ドロップシャドウは背景に影を落とす効果であり、その強さによって高低差を表現できます。Level1~5まで5段階のElevationを定義しています。

Level0はBody (surface)であり、ほとんどのUIコンポーネントはこのLevel0に位置します。DropdownMenuの開閉メニューはLevel1、ToastはLevel3、Modal DialogやDrawerはLevel5など、UIの一般的な振る舞いに合わせてLevelをコントロールすることが大切です。

Figmaでの利用上の注意

ドロップシャドウは、影の色、位置、拡散量など複数の値から構成されます。Figma Variablesは、このようなグループ化されたトークン (Composit Tokenと呼ばれます) に現在対応していません。そのため、シャドウはVariablesではなくEffect Stylesとして定義しており、他と適用方法が異なることに注意してください。

z-indexはオブジェクトの重なり順を制御するCSSプロパティであり、値が大きいほど階層が高くなります。システムトークンとしてz-index値を定義していますが、これはCSS実装用のトークンのためFigmaでは意識する必要はありません。

シャドウは表現上の階層ですが、z-indexは実装上の階層です。そのためシビアにz-index値をコントロールすることが堅牢なUIを作る上で大切であり、トークン名には意味性の強い名前を付けています。詳しくはSystem Tokenの一覧を参照してください。