Figmaを起点に作るデザイントークン

この記事の概要

デザイントークンという言葉を聞いたことがあるでしょうか？
標準化された仕様はまだ存在しない¹のですが、色やスペース、タイポグラフィスケールなど、見た目を構成する最小単位の要素だと思ってもらえば良いです。

そんなデザイントークンをFigmaを起点にして作る方法について、記事にしました。
デザインデータを作り、コードに適用するまでを対象にしています。

今回は特定のプラグインに頼らない方法までを記事にしようと思うため、後述するエイリアストークンは再現していません。
また、Sassの変数やJavaScriptの定数など表現方法は色々ありますが、一番汎用的であろうCSS Custom Propertiesでの表現に絞っています。

デザイントークンの種類について

一口にデザイントークンと言っても複数の役割があるため、実制作に入る前に概念の説明をします。

よくある区分はグローバルトークン²とエイリアストークン³の2種類を設定する方法です。

今回の記事では要旨だけをピックアップして説明していますが、AdobeのSpectrumに詳細に分かりやすくまとまっています。
興味のある方はこちらもどうぞ。

グローバルトークン

グローバルトークンとは、#2680EBにblue-400、14pxにfont-size-100など、ある値に識別可能な名前をつけたものです。
特定の文脈によらず、いつでもどこでも使える値として定義されます。

この記事で扱うデザイントークンとはグローバルトークンのことです。

エイリアストークン

エイリアストークンとは、blue-400にcta-background-colorのように、グローバルトークンに特定の文脈や概念を付与したものです。
エイリアストークンに直接カラーコードやサイズを指定することはなく、グローバルトークンを継承してのみ存在します。

なぜグローバルトークンがあるのにエイリアストークンも用意するかと言えば、以下のような場面でメリットが生まれるからです。

• CTA (Call to Action)に何色を使うべきか、すぐに判断できる
• CTA以外の場所でcta-background-colorが使われていたらNGと判断できる
• ライトテーマとダークテーマでそれぞれ別の値をbackground-colorに指定しておけば、都度の条件分岐が不要になる

ただし、記事冒頭にも記載した通り、今回はFigmaの純正機能だけに絞って説明するため、エイリアストークンは話題にしません。

Figmaでのトークンの作成

本題に入ります。

Figmaにおけるデザイントークンとは、イコールStylesのことです。
StylesにはText, Color, Effect, Gridが登録できますが、主に扱うのはColorとTextのため、その2つに絞って紹介します。

Color styles

Colorの場合はそこまで考えることはありません。
Figmaで登録した色と、同名かプレフィックスだけつけるような命名を登録すればOKです。

colorに使うこともあればbackground-colorに使うことも、border-colorに使うこともあるでしょう。
そのため特定のクラスは作らず、:root内にCustom propertiesを登録するのみで良いです。

:root {
  --color-gray-100: #eee;
  --color-gary-200: #ddd;
  --color-gray-300: #ccc;
}

Text styles

TextはColorと違い、少し難しいです。

FigmaでText styleとして登録できる要素のうち、メインのものは以下です。

• font-family
• font-weight
• font-size
• line-height
• letter-spacing
• paragraph-spacing

Figmaの場合はこれらがひとまとまりになって1つのStyleとして扱われますが、コードで表現する場合はそれぞれの要素を別で登録できます。

どういうことかというと、例えばFigma内の以下の6つのStylesを作ったとします。
サイズ3種 * ウェイト2種、font-familyやline-heightは共通で6種類です。

これらをコードで表現する際は以下の7つのプロパティを準備し、それぞれを組み合わせて表現します。
（以下の名称はあくまで一例です）

:root {
  --font-family: 'Noto Sans JP';
  --font-weight-regular: regular;
  --font-weight-bold: bold;
  --font-size-100: 14px;
  --font-size-200: 16px;
  --font-size-300: 18px;
  --line-height-normal: 1.5;
}

letter-spacingは無くても成立するため、paragraph-spacingはむしろデフォルトで指定しない方が良いため、それぞれを省略しています。

組み合わせも含めてのText styleなので、それぞれのプロパティを組み合わせたクラスを作ります。
Figmaと同名か、プレフィックスだけつけるような命名が良いでしょう。

.font-s-regular {
  font-size: var(--font-size-100);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.font-s-bold {
  font-size: var(--font-size-100);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.font-m-regular {
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.font-m-bold {
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}


.font-l-regular {
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.font-l-bold {
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

まとめると、以下のようなプロセスで作成します。

• Figma上でグラフィック要素として必要なText stylesを考え、登録する
• 登録したText stylesに必要なプロパティを分解して、それぞれをコードで定義する
• 定義したコードを使う

最後に

グローバルトークンだけに絞った内容ではありますが、Figmaからコードまでの一連のデザイントークン作成の流れを記事にしました。

Tokens StudioやStyle Dictionalyなどとも組み合わせると、エイリアストークンも含み、Syncも楽になります。
そちらより上級編として別な記事にできればと考えています。

---

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

Devトークでのお話してくださる方も募集中です！

1. 現状、粗めのドラフトは存在しています。 https://tr.designtokens.org/ ↩

2. プリミティブトークンと呼ばれることも多いですが、この記事ではグローバルトークンの名称で統一します。 ↩

3. セマンティックトークンと呼ばれることも多いですが、この記事ではエイリアストークンの名称で統一します。 ↩