Config 2023でFigma variablesが発表されました✨
variablesによってデザインの色や文、サイズなどが変数で指定できるようになります。
variablesをつかってミニマムなデザインシステムを作成しました🙌
開発の参考になれば嬉しいです。
内容はデジタル庁のデザインシステムをベースに作成させていただきました🙏
（めちゃくちゃ良くできていて勉強になりました）
ルールや適用方法で迷った場合はデジタル庁のデザインシステムを参考にしてみてください。
デザインシステム
variablesの作成
以下の操作で作成できます。
集合
Design→Local variables→Create Collection
変数
Create variable→Color,Number,String,Boolean
モード
+ (New variable mode)
variablesの種類
variablesではColor,Number,String,Booleanの型が利用できます。
variablesの定義
カラー
プリミティブ
sea-900,sun-900などのプリミティブなカラーを定義します。
セマンティック
BodyやLinkなどのセマンティックなカラーを定義します。
それぞれのカラーはプリミティブから指定します。
余白
余白の数値を定義します。
タイポグラフィ
テキストのフォントやサイズ、縦や横の余白などはvariablesで指定できないため利用しません。
variablesの適用
variablesを利用してデザインシステムを完成させます。
variablesのモードの切り替え
親コンポーネントのレイヤー
variablesのモードは親コンポーネントのレイヤーのChange variable modeで切り替えることができます。
そのため「ライト」「ダーク」それぞれのモードを定義しておき、
親コンポーネントのレイヤーでモードを指定すれば、
以下のように切り替えができます。
Prototype Interactions
Prototypeの際のインタラクション（クリックやドラッグなど）によってもモードを切り替えることができます。
たとえば、これはクリックの際にボタンをDisabledにする指定です。
以下のように切り替えができます。
さいごに
variablesを使うことでよりよい開発体験をデザイナー・エンジニアともに得られるのではないかと期待しています！
何か質問・相談ありましたらTwitterまで連絡ください✨
Discussion