先生と生徒の会話形式で理解しよう

生徒

「BootstrapのテーマとFigmaの色設定を同じにしたいのですが、どうすれば同じデザインになりますか？」

先生

「Figmaで管理している色や余白の情報を“デザイントークン”として扱い、それをCSS変数に同期することで同じデザインを共有できますよ。」

生徒

「デザイントークンってなんですか？難しそう……。」

先生

「デザイントークンというのは、色やフォントサイズの“値”に名前をつけて管理する仕組みです。これをCSS変数に変換すれば、Bootstrapのテーマにも使えるようになります。」

1. FigmaとCSS変数を同期する仕組みとは？

Web制作では、デザインとコードの見た目が一致しないことがよくあります。これは、デザイナーはFigmaで色を設定し、エンジニアはCSSで色を指定するため、別々の場所で値を管理してしまうのが原因です。そこで役立つのが「デザイントークン」という考え方です。

デザイントークンとは、色・余白・フォントサイズなどの値を「変数」として統一管理する方法です。Figmaにもデザイントークンの管理機能やプラグインがあり、そこに登録した値をJSON（データ形式）として書き出せます。このJSONをCSS変数へ変換することで、Bootstrapを使ったWebサイトでも同じ値を共有できます。

この同期によって、デザインとコードのズレを防ぎ、サイト全体の色やスタイルを一元管理できます。特にBootstrapではCSS変数を使ったテーマ切り替えが標準機能として用意されているため、デザイントークンとの相性が非常に良いのです。

2. FigmaのデザイントークンをCSS変数に変換する流れ

具体的にどのように同期するのか、初心者でも理解しやすいように基本の流れを3ステップで説明します。

ステップ1：Figmaで色や余白の値をトークン化する
デザイナーはFigmaのプラグイン（例：Figma Tokens）を使って色やサイズをまとめて登録します。「primary」「secondary」「background」など、名前をつけて保存できます。

ステップ2：トークンをJSONとして書き出す
Figma Tokensでは「Export」を選ぶとJSON形式で値を出力できます。このJSONには色コードなどがまとめられています。

ステップ3：JSONをCSS変数に変換する
JSONの値をもとにCSS変数一覧を作成し、Bootstrapに組み込むことでテーマとして利用できます。変換自体はツールでも手作業でも可能です。

3. FigmaトークンをCSS変数としてBootstrapに組み込む書き方

ここでは実際に、Figmaで管理している色をCSS変数に変換し、Bootstrapのテーマで使えるようにする例を紹介します。HTMLに直接書ける形で示すので、初心者でも理解しやすいサンプルです。


<style>
/* Figmaトークン → CSS変数として登録（ライトテーマ） */
.theme-root {
    --color-primary: #4a90e2;   /* Figmaのメインカラー */
    --color-secondary: #50e3c2; /* サブカラー */
    --color-bg: #ffffff;        /* 背景 */
    --color-text: #222222;      /* テキスト */
}

/* ダークテーマ（data-bs-theme="dark"） */
.theme-root[data-bs-theme="dark"] {
    --color-bg: #000000;
    --color-text: #f1f1f1;
    --color-primary: #6ab8ff;
}

/* 色の適用 */
.theme-root {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.theme-root a {
    color: var(--color-primary);
}
</style>

<!-- ★ div をテーマルートとして使うので動く！ -->
<div class="theme-root p-4" data-bs-theme="dark">
    <h2>FigmaトークンとCSS変数の同期例</h2>
    <p>Figmaの値をCSS変数に変換しておくと、テーマ切り替えを行うBootstrapとも連携できます。</p>
    <a href="#">リンクの色もトークンから変わります</a>
</div>

ブラウザ表示