概念はわかるし絶対強力なのもわかってるVariablesはマストで攻略必至な機能。しかしふらっと触ってわかるほどシンプルではないので布団の上で身悶える日々。が、いつまでも遠回りはできないのでFigmaの攻略動画を見ながら探っていく決心をしたのです。

基本、上記の動画見ながらステップbyステップでデモ作成していくと、ちょうど9:00くらいで「ギャッ！！」となり、一瞬にして理解できます。なのでまず最初の10分は正座して焦らずにじっと見続けることをおすすめする。これ考えた人すげー天才。ツール界のアップデートの鏡でしょう。サービス運用から洗練されているこんなすごいツールはやっぱり他には無い。

例えばLightモード/Darkモードを作成する

例えばLightモード/Darkモードを作成する際、新規でUIを起こす場合は、

1. まずはGUIを作成する

2. ベースのカラーを定義して、更にText、Surface、Borderなどで名前をつけてカラースタイルを”スタイル定義せずに”Variablesで全部定義する。

3. VariablesのポップアップでModeを増やし、Lightモード/Darkモードを作りMode2にダークの場合のカラーパターンを定義する

4. 作成したGUIのフレームでLayerからVariableを選択してLight/Darkを切り替えると瞬時に切り替わる

みたいな感じで作ることができます。

Variableの種類は4つ

• Color：FillとStrokeの色

• Number：テキスト、コーナーR、Width/Height、パディングとマージン

• Strings：テキストの切り替え（英日とか）

• Boolean：True/Falseのブーリアン設定

1. Color

まずはカラーについて。いままではスタイルで定義していたので、各カラーに「primary_Blue」とか名付けて「text」とか「surface」とか「Border」とかにグループ分けして管理していたんではないでしょうか。

Variablesだと、まず使うカラーすべてを変数としてコレクションに登録（Grey10,20,30とか普通にOrangeとか）して、更に「text-primary」とか「surface-primary」とか「border」を定義する新しいコレクションを追加してそこに最初のコレクションに追加したカラーを割り当てる、という感じで多重なスタイル管理ができます。

Figmaのチュートリアルでは、使うカラーすべての基本的な一覧コレクションを”Primitive"（プリミティブトークン）と呼んで、「text-primary」とか「surface-primary」とか「border」を定義する意図した範囲に適用させる具体的なコレクションを”Token"（セマンティックトークン）と命名して管理しています。これを”Tokenizationと”言います。
Primitiveは”Assets”とかでもわかりやすいかもしれないです。

デザイントークンについて（Salesforce Lightning Design System）

2.Spacing / Radius

制作中

3.Prototype

まずはこれを観てみましょう。

続く（制作中）