Figma の Variables をデザイントークンのマスターデータとし、デザインも実装も連携できるのが理想的なのだが、値によってうまくいかない。タイポグラフィ設定において、何が設定できて何が難しいのかを整理する。

前提

Webサイト制作での使用を想定。
Figma のプラグインを使用してJSONを書き出した後、実装側で Style Dictionary を使用してCSSカスタムプロパティ（format: 'css/variables'）に変換して使用する。

Variables には4つの Type がある。

• Color
• Number
• String
• Boolean

Boolean 以外の3タイプにはスコープ（適用できる項目）が設定されてる。

これより、1つ1つの設定（CSSプロパティ）ごとに整理する。

font-family

• フォントの種類。
• String タイプを設定可能。
  • 例：Hiragino Kaku Gothic ProN
  • 例：Roboto
• 実装（CSS）で使用するためにクォーテーションを付与する必要がある。
  • Style Dictionary で調整すればOK。

--typography-font-family-base: Hiragino Kaku Gothic ProN;
↓
--typography-font-family-base: 'Hiragino Kaku Gothic ProN';

font-weight

• 文字のウェイト（太さ）。
• Number タイプと String タイプが設定可能だが、実装との連携を考慮する場合は Number を使用すると良い。
• String タイプだと、フォントの種類によって指定できる値がバラバラ。
  • 例：Hiragino Kaku Gothic ProN
    • W3, W6
  • 例：Roboto
    • Thin, ExtraLight, Light, Normal, Reqular, SemiBold, Bold, ExtraBold, Black
• 実装では数値（500 など）を使うため、Number タイプで管理すればデザインと連携できる。
  • 一般的には100単位で設定するが、Variable Font の場合は 100 〜 900 の値を設定可能。

font-size

• 文字サイズ。
• Number タイプを設定可能。
• 実装では、ウェブアクセシビリティの観点から rem で指定すると良い。
  • Style Dictionary で変換すればOK。

line-height

• 行間の設定。やっかい。
• Number タイプを設定できるが、px として扱われる。
  • 手動入力で % は使用可能だが、Variables では設定できない。
• 実装では font-size の相対値にすることが多い。
  • line-height: 1.75; = 175%
• % で連携できれば良いのだが、数値（px）の場合は「どの font-size に対しての値なのか」を判別できないため、Style Dictionary でも変換は不可。
• 現状、1つの値でデザインと実装を連携することはできない。

対応パターン

• デザイン用と実装用、両方の値を Variables で管理する。
• デザイン用か実装用、どちらかの値を Variables で管理する。
• Variables で管理をしない。

letter-spacing

• 文字間の設定。line-height と同じ。やっかい。
• 実装では、font-size の相対値（em）で設定することが多い。
  • letter-pacing: 0.05em; = 5%

color

• 文字色。Figma だとFill 。
• Color タイプを設定可能。
• 実装側でも特に問題なく連携可能。

まとめ