こんにちは。エキサイトでデザイナーをしている齋藤です。
今回はFigmaのVariablesでデザイントークンを設計する際に、Scoping機能を用いて使用先を間違わないようなトークンを設計する方法をご紹介します。
解決したいこと
例えば、角丸用のトークンを作成したとします。
単にトークンを作成した初期状態ですと、GapなどCorner Radius以外の箇所でもトークンを呼び出せてしまいます。
このような状態にしておくと、トークン設計者が意図しない箇所でトークンが使用されてしまい、デザインの一貫性が失われたり、変更の際に漏れが生じてしまう恐れがあります。
Scoping機能で使用先を制限する
Scoping機能を用いることで、トークンごとに使用先を制限することができます。
Variablesの各行右端の設定アイコンから、Scopingを設定することができます。
角丸用のトークンの場合は、Corner Radiusにのみ使用されたいため、「Corner Radius」にチェックを入れ、その他からはチェックを外します。
その際、全行選択して上でScopingを設定することもできます。
こうすることで、Corner Radius以外の箇所からトークンを呼び出せなくすることができ、一貫性と保守性が担保された状態になりました。
さいごに
今回は、Figma VariablesのScoping機能で使用先を間違わないトークン設計をする方法をご紹介しました。
Figmaを用いてデザインシステムを開発する場合にはとても有用ですので、ぜひお試しください。
ご精読ありがとうございました。
