Figma VariablesをそのままCSS変数に写す——デザイントークンの受け渡し
カンプから色を拾ってベタ書きし、ダークモードで総取り替え——その手戻りは、Figma VariablesとCSSカスタムプロパティを同じ構造で並べれば消えます。自サイトのトークン設計を例に、型・モード・エイリアスの写し方と、デザイナー側に用意してほしい3点をまとめました。
カンプから色コードを1つずつコピーして、CSSにベタ書きする。あとからダークモード対応が入って、全部拾い直し。「あの薄いグレー、#6b6560でしたっけ」——デザイナーとのやり取りが色の突き合わせで埋まる。こういう手戻りは、Figma Variables（デザインの値を変数として持つ仕組み）とCSSカスタムプロパティ（--color-accent のような変数）を同じ構造で並べるだけで、かなり消えます。
自分のポートフォリオも、色・余白・文字サイズを1枚のファイルに変数として集約し、ライトとダークを同じ名前のまま切り替えています。その写し方と、デザイナー側に用意してもらえると実装がぐっと速くなる点を、実物のコードを見ながらまとめました。
Figma Variablesは、CSS変数とほぼ一対一で対応する
Figma Variablesには4つの型があります——color / number / string / boolean。このうち色と数値が、実装ではそのままCSSカスタムプロパティになります。翻訳ではなく、名前の転記に近い。
- モード＝collection（変数の束）の中で値を切り替える仕組み。Light/Darkやサイズ違いを、同じ変数名のまま複数持てる。CSS側の「変数名は固定して、
:rootの値だけ差し替える」設計と考え方が同じ。 - エイリアス＝ある変数が別の変数を参照すること。たとえば「背景/既定」が「Green/500」を指す。CSSの
var(--…)参照とそのまま重なる。 - Dev Modeでは、開発者が変数名・現在値・どのモードかを確認でき、エイリアスの参照先までたどれます。
構造が最初から変数になっていれば、実装は「値を拾う」作業ではなく「名前を写す」作業に変わります。ここがそろっているかどうかで、受け渡しの速さは大きく変わる。
私はこう写している（自サイトのトークン設計）
自分のサイトでは、theme.scss という1ファイルをトークンの単一ソースにしています。ここを直せばサイト全体が変わる。要点は3つ。
- 意味で名付ける。
--orangeではなく--color-accent、--gray-3ではなく--color-muted。見た目でなく役割で名付けると、ブランドカラーを差し替えても名前が生き残ります。 - 余白と文字サイズは階層にする。余白は4・8・16・24…と8pxを基準にした段階（
--spacing-xsから--spacing-4xl）、文字サイズも14〜56pxの階層。Figma側のnumber変数の刻みと数を揃えておくと、指定の解釈で迷いません。 - モードは同じ名前で切り替える。
--color-bgなどの色トークンは、ライトを既定にして、OS設定（prefers-color-scheme）とクラス指定の両方でダークへ差し替える。コンポーネント側のCSSは変数を参照するだけなので、モードが増えても書き換えは要りません。
アクセント色には「白背景で4.9:1（WCAG AA）」といったコントラスト比をコメントで残しています。Figmaの変数側に同じ根拠が書いてあると、実装中に手が止まりません。
デザイナー側にお願いしたい3つ
Variablesを使ってもらえるだけで実装は速くなりますが、次の3つがあると手戻りがほぼ消えます。
- Code Syntax（Web）でCSS名を決めておく。Figmaの変数にはプラットフォーム別のCode Syntaxを設定でき、Dev Modeのコードスニペットに
var(--color-icon-onbrand)のようにそのまま出ます。実装者が名前を勝手に決めずに済み、命名の揺れが消える。 - primitiveとsemanticを分ける。生の色（Green/500）と、役割の色（背景/既定）を分け、後者が前者をエイリアスで参照する2層にする。これはCSSの
--color-accent: var(--brand-orange)と同じ構造で、ブランド変更に強くなります。 - モードは最初に1つでも定義する。ライトだけでも「これはモードで切り替える前提」と分かれば、実装は最初からダーク追加を見越した書き方にできる。後付けの総取り替えを避けられます。
Figmaの変数と実装のCSS変数が同じ構造で並んでいると、受け渡しは「翻訳」ではなく「転記」になる。齟齬が減り、モード追加や色変更のたびに作り直す事故もなくなります。関連して、実装しやすいFigmaデータの作り方は実装しやすいFigmaデータ7チェックに、動きや状態の伝え方はFigma Dev Modeの注釈にまとめています。
デザイントークンを整理して渡したい、あるいはトークン設計から一緒に組みたい制作会社の方は、お問い合わせからお気軽にご相談ください。
本記事は2026年7月時点の情報です。