マガジンのカバー画像

Material Design 3 要点まとめ

14
本
Material Design 3 ガイドラインの要点をまとめたものです。
運営しているクリエイター
パジェロ｜COMPASS

Material Design 3 要点まとめ #5 Interaction states

Material Design 3 ガイドラインの要点をまとめたものです。 第5回はInteraction statesの章。ステートレイヤーの基本法則など、コンポーネントの「状態」の表現についての解説です。 要点ステートレイヤー：要素の「状態」を表す半透明の覆いUIコンポーネントには「ステートレイヤー」という、要素の「状態」を表す半透明の覆いがある。 レイヤーは要素全体を覆うか、要素の上に円形にかぶさる。 一度に適用できるステートレイヤーは1つだけ。 ステートレイヤ

パジェロ｜COMPASS

Material Design 3 要点まとめ #4 Design tokens

Material Design 3 ガイドラインの要点をまとめたものです。 第4回はDesign tokensの章。M3の目立った新概念のひとつ。スタイル指定の構造化が大きく進みました。 要点デザイントークン：スタイルの「値」を共通化するハードコードされた「値」の代わりにデザイントークンでスタイルを定義する、という概念。 デザインシステムによるプロダクトの構築、メンテナンス、スケーリングなどの作業を効率化できる。 コードのような名前（例：md.ref.palette.s

パジェロ｜COMPASS

Material Design 3 要点まとめ #3 Customizing Material

Material Design 3 ガイドラインの要点をまとめたものです。 第3回はCustomizing Materialの章。Android12からの新機能である、ダイナミックカラーによるUIカラーのパーソナライズの紹介。ここでは触りだけ紹介されていて、詳細は別章にそれぞれジャンプする構成になってます。 要点ダイナミックカラー：UIカラーにユーザーの設定を反映M3のカラースキームを使ってUIを構築しておくことで、アプリのUIカラーをユーザーごとにパーソナライズすることが

パジェロ｜COMPASS