Drop Shadow
Z軸に沿ったコンポーネント間の距離を表現します。
現実世界にあるオブジェクトのように影を落とすことで、ユーザーはオブジェクト同志の位置関係を理解し、直感的に操作できるようになります。
後ろにあるものは影が短く、手前にあるものの方が影が長くなります。
図に掲載しているコンポーネント例は参考として表記しています。
実際の設定はプロダクトや情報に合わせて適切なカスタマイズを設定してください。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/06/img01-4.png)
Variables (色・サイズの設定)
Drop shadowパネルを開き、各フィールドで利用したいレベルのトークンを選びます。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/06/img02-7.png)