FigmaのvariablesからはじめるモダンなCSS設計

はじめに
- デザイントークンとは
- Figma Variablesの特徴
FigmaのVariablesとStylesの違い
効果的な組み合わせ
Figmaのvariables設計の基本
デザイントークンのCSS変換
- 基本的な変換ルール
命名規則の統一
コンポーネント単位での変換例
レスポンシブデザインへの対応
- Figmaでのブレイクポイント管理
- CSSでの実装方法
デザインシステムの運用
実践的なTips
まとめ
- デザインとコードの一貫性がもたらすメリット
- メンテナンス性の向上

はじめに

Webサイトやアプリケーションの規模が大きくなるにつれ、デザインの一貫性を保つことが難しくなっていきます。「このボタンの青色は少し違う…」「余白の大きさがページによってバラバラ…」—— このような経験はありませんか？

デザインの一貫性の欠如は、ユーザー体験を損なうだけでなく、開発者の作業効率も低下させます。この課題を解決するのが、FigmaのVariablesを活用したデザイントークン管理です。

デザイントークンとは

デザイントークンとは、デザインシステムの基礎となる値のことです。具体的には：

カラー
スペーシング（余白）
フォントサイズ
ボーダーの太さ
シャドウ

などの値を、再利用可能な形で管理する仕組みです。

Figma Variablesの特徴

Figma Variablesは、これらのデザイントークンを効率的に管理するための機能です。主な特徴は：

CSS

/* Figmaでの定義 */
color.primary.500: #3B82F6
space.md: 16
radius.lg: 8

/* CSSでの使用 */
:root {
  --color-primary-500: #3B82F6;
  --space-md: 1rem;
  --radius-lg: 0.5rem;
}

一元管理: 値の変更を一箇所で管理
再利用性: 定義した値を複数の場所で使用可能
一貫性: デザイン全体で統一された値を使用
保守性: 値の更新が容易

これらの機能により、以下のようなメリットが得られます：

デザインの一貫性向上
- すべてのコンポーネントで統一された値を使用
- ブランドの一貫性を保持
開発効率の向上
- デザインからコードへの変換が容易
- 値の更新が一括で可能
チームでの協業がスムーズに
- 共通言語としてのデザイントークン
- 設計意図の共有が容易

この記事では、FigmaのVariablesを活用したデザイントークン管理の方法と、それをCSSに効率的に変換する方法を解説します。デザイナーとエンジニアの架け橋となる知識を、実践的な例を交えながら紹介していきます。

FigmaのVariablesとStylesの違い

Figmaには値を再利用可能な形で管理する方法として、「Variables」と「Styles」の2つが存在します。これらは一見似ているように見えますが、使用目的と特徴が異なります。

Variables

Variablesは、デザインシステムの最も基本的な値（プリミティブ値）を管理するのに適しています。

CSS

/* Figmaでの定義例 */
color.primary: #3B82F6
color.gray.100: #F3F4F6
space.sm: 8
space.md: 16

主な特徴：

1.プリミティブな値の管理

色
数値（スペーシング、サイズ）
テキスト
ブール値

2.動的な値の変更

CSS

/* ダークモード対応例 */
color.background {
  light: #FFFFFF
  dark: #1A1A1A
}

3.グローバルな再利用

プロジェクト全体で使用可能
一箇所の変更が全体に反映

Styles

Stylesは、特定のプロパティに対する具体的なスタイルセットを管理します。

Figma

/* Figmaでの定義例 */
text/heading-lg {
  font-size: 24px
  font-weight: bold
  line-height: 1.4
}

shadow/card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1)
}

主な特徴：

1.複数プロパティの一括管理

テキストスタイル
エフェクト（シャドウ）
グリッド設定
カラースタイル

2.コンポーネント固有の設定

特定のUIパターン用
複数のプロパティをまとめて適用

使い分けの基準

Variablesを使うべき場面

1.基本的な値の定義

CSS

/* 基本カラー */
--color-primary: var(--blue-500);
--color-success: var(--green-500);

/* 基本スペーシング */
--space-xs: 0.5rem;
--space-sm: 1rem;

2.テーマ切り替え

CSS

/* ライト/ダークモード */
:root {
  --bg-color: var(--color-light);
  --text-color: var(--color-dark);
}

[data-theme="dark"] {
  --bg-color: var(--color-dark);
  --text-color: var(--color-light);
}

Stylesを使うべき場面

1.具体的なUIパターン

CSS

/* テキストスタイル */
.text-heading-lg {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

2.再利用可能なコンポーネント

CSS

/* カードスタイル */
.card-shadow {
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
}

効果的な組み合わせ

VariablesとStylesを適切に組み合わせることで、より堅牢なデザインシステムを構築できます：

CSS

/* Variables（基本値）*/
:root {
  --color-primary: #3B82F6;
  --space-md: 1rem;
  --radius-sm: 4px;
}

/* Styles（組み合わせ）*/
.button-primary {
  background-color: var(--color-primary);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
}

このように、VariablesとStylesを適切に使い分けることで：

デザインシステムの一貫性が保てる
変更に強い設計ができる
コードの再利用性が高まる

次章では、これらの基本的な理解を踏まえて、Figmaでのvariables設計の具体的な方法を見ていきましょう。

Figmaのvariables設計の基本

効率的なデザインシステムを構築するために、Figmaでのvariables設計の基本的な考え方と実践的な方法を解説します。

カラーの管理方法

カラーシステムは、明確な階層構造で管理します：

CSS

/* プリミティブカラー */
colors.blue.500: #3B82F6
colors.blue.600: #2563EB
colors.gray.100: #F3F4F6
colors.gray.200: #E5E7EB

/* セマンティックカラー */
color.primary: {
  default: {colors.blue.500}
  hover: {colors.blue.600}
}

color.background: {
  default: {colors.gray.100}
  muted: {colors.gray.200}
}

命名規則のポイント

プリミティブ値は具体的な名前で
セマンティック値は用途で命名
状態変化も考慮した設計

スペーシング（余白）の設定

一貫性のある余白システムを構築します：

CSS

/* 基本単位: 4px */
space.3xs: 4   /* 4px */
space.2xs: 8   /* 8px */
space.xs: 12   /* 12px */
space.sm: 16   /* 16px */
space.md: 24   /* 24px */
space.lg: 32   /* 32px */
space.xl: 48   /* 48px */

スペーシングの使い分け

3xs～xs: アイコンや小さな要素間
sm～md: コンポーネント内の余白
lg～xl: セクション間の余白

タイポグラフィの管理

フォントシステムを体系的に設定：

CSS

/* フォントサイズ */
typography.size.xs: 12
typography.size.sm: 14
typography.size.md: 16
typography.size.lg: 18
typography.size.xl: 24

/* 行高 */
typography.lineHeight: {
  tight: 1.25
  normal: 1.5
  loose: 1.75
}

/* フォントウェイト */
typography.weight: {
  regular: 400
  medium: 500
  bold: 700
}

エフェクト（シャドウなど）の設定

深さと用途に応じた体系的な設定：

CSS

/* シャドウ */
effect.shadow.sm: {
  y: 1,
  blur: 2,
  color: rgba(0,0,0,0.05)
}

effect.shadow.md: {
  y: 2,
  blur: 4,
  color: rgba(0,0,0,0.1)
}

/* 角丸 */
radius.sm: 4
radius.md: 8
radius.lg: 12
radius.full: 9999

変数の階層構造

効率的な管理のための階層設計：

Plane Text

variables/
├── primitive/
│   ├── colors/
│   ├── spacing/
│   └── typography/
├── semantic/
│   ├── brand/
│   ├── background/
│   └── text/
└── component/
    ├── button/
    └── card/

命名規則のベストプラクティス

1.一貫性のある命名

CSS

/* Good */
color.primary.500
color.primary.hover

/* Bad */
primaryColor
Primary_Color

2.階層的な構造

CSS

/* コンポーネント固有の値 */
button.primary.background
button.primary.hover

3.状態の表現

CSS

/* 状態を含む命名 */
color.primary.default
color.primary.hover
color.primary.active

このように体系的に設計することで：

保守性の向上
- 変更が容易
- 影響範囲が明確
再利用性の確保
- 共通の値を効率的に使用
- 一貫性の維持
拡張性の確保
- 新しい値の追加が容易
- 既存の構造を崩さない

次章では、これらのFigma variablesをCSSに変換する方法を見ていきましょう。

デザイントークンのCSS変換

Figmaで定義したvariablesをCSSに効率的に変換する方法を、具体的な例を交えて解説します。

基本的な変換ルール

Figma変数からCSS Custom Propertiesへ

CSS

/* Figmaでの定義 */
button.color.primary: #3B82F6
button.padding.base: 16
button.radius: 8

/* CSSでの変換 */
:root {
  --button-color-primary: #3B82F6;
  --button-padding-base: 1rem;
  --button-radius: 0.5rem;
}

命名規則の統一

BEMの考え方に基づいた変換パターン：

CSS

/* Block変数 */
card.padding: 24
↓
--card-padding: 1.5rem;

/* Element変数 */
card.header.height: 48
↓
--card-header-height: 3rem;

/* Modifier変数 */
card.color.primary: #3B82F6
↓
--card-color-primary: #3B82F6;

/* State変数 */
card.state.hover: #2563EB
↓
--card-state-hover: #2563EB;

実践的な変換例

1. カラーシステム

CSS

/* Figma */
color.gray.100: #F3F4F6
color.primary.500: #3B82F6
color.primary.hover: #2563EB

/* CSS */
:root {
  /* プリミティブカラー */
  --color-gray-100: #F3F4F6;
  
  /* セマンティックカラー */
  --color-primary-500: #3B82F6;
  --color-primary-hover: #2563EB;
}

2. スペーシングシステム

CSS

/* Figma */
space.xs: 8
space.sm: 16
space.md: 24

/* CSS */
:root {
  --space-xs: 0.5rem;  /* 8px */
  --space-sm: 1rem;    /* 16px */
  --space-md: 1.5rem;  /* 24px */
}

3. コンポーネント固有の値

CSS

/* Figma */
button.base.padding: 16
button.small.padding: 8
button.large.padding: 24

/* CSS */
:root {
  --button-padding-base: 1rem;
  --button-padding-small: 0.5rem;
  --button-padding-large: 1.5rem;
}

.button {
  padding: var(--button-padding-base);
}

.button--small {
  padding: var(--button-padding-small);
}

.button--large {
  padding: var(--button-padding-large);
}

単位の変換について

Figmaの値からCSSの単位への変換ルール：

CSS

/* スペーシング */
16 → 1rem  (基本サイズ: 16px)
8 → 0.5rem
24 → 1.5rem

/* ボーダー */
1 → 1px
2 → 2px

/* シャドウ */
blur: 4 → 4px
spread: 2 → 2px

考慮すべきポイント

1.一貫性の維持

CSS

/* 同じ種類の値は同じ単位を使用 */
--space-sm: 1rem;      /* OK */
--space-md: 24px;      /* NG - remに統一すべき */

2.カスケーディングの考慮

CSS

/* 基本値の定義 */
:root {
  --button-color-base: var(--color-primary-500);
  --button-color-hover: var(--color-primary-600);
}

3.デバイス対応

CSS

/* ブレイクポイントごとの値 */
:root {
  --header-height: 60px;
}

@media (min-width: 768px) {
  :root {
    --header-height: 80px;
  }
}

このように体系的に変換することで：

デザインとコードの一貫性が保てる
変更に強い設計が実現できる
チームでの共通理解が促進される

次章では、これらの変換ルールを実際のコンポーネントに適用する例を見ていきましょう。

コンポーネント単位での変換例

実際のUIコンポーネントを例に、FigmaからCSSへの具体的な変換プロセスを見ていきましょう。

ボタンコンポーネント

Figmaでの定義

CSS

/* Variables */
button.base.padding: 16
button.base.radius: 8
button.base.height: 40

button.color.primary: #3B82F6
button.color.hover: #2563EB
button.color.text: #FFFFFF

button.size.small.padding: 8
button.size.large.padding: 24

/* Styles */
button.text.base {
  font-size: 14
  font-weight: 500
  line-height: 1.4
}

CSSでの実装

CSS

/* 変数定義 */
:root {
  /* ベーススタイル */
  --button-padding-base: 1rem;
  --button-radius: 0.5rem;
  --button-height: 2.5rem;
  
  /* カラー */
  --button-color-primary: #3B82F6;
  --button-color-hover: #2563EB;
  --button-color-text: #FFFFFF;
  
  /* サイズバリエーション */
  --button-padding-small: 0.5rem;
  --button-padding-large: 1.5rem;
}

/* コンポーネントの実装 */
.button {
  /* ベーススタイル */
  padding: 0 var(--button-padding-base);
  border-radius: var(--button-radius);
  height: var(--button-height);
  
  /* テキストスタイル */
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  
  /* アニメーション */
  transition: background-color 0.2s;
}

/* バリエーション */
.button--primary {
  background-color: var(--button-color-primary);
  color: var(--button-color-text);
  
  &:hover {
    background-color: var(--button-color-hover);
  }
}

.button--small {
  padding: 0 var(--button-padding-small);
}

.button--large {
  padding: 0 var(--button-padding-large);
}

カードコンポーネント

Figmaでの定義

Figma

/* Variables */
card.padding: 24
card.radius: 12
card.shadow: {
  y: 2,
  blur: 8,
  color: rgba(0,0,0,0.1)
}

card.header.padding: 16
card.content.spacing: 16

/* Styles */
card.title.text {
  font-size: 18
  font-weight: 600
  line-height: 1.4
}

CSSでの実装

CSS

:root {
  /* カード基本設定 */
  --card-padding: 1.5rem;
  --card-radius: 0.75rem;
  --card-shadow: 0 2px 8px rgba(0,0,0,0.1);
  
  /* 内部スペーシング */
  --card-header-padding: 1rem;
  --card-content-spacing: 1rem;
}

.card {
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background-color: var(--color-surface);
}

.card__header {
  padding-bottom: var(--card-header-padding);
}

.card__title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

.card__content > * + * {
  margin-top: var(--card-content-spacing);
}

実装のポイント

1.変数の階層構造を維持

CSS

/* コンポーネントのスコープを意識 */
--button-*
--card-*

2.ステート管理の一貫性

CSS

.button--primary {
  &:hover {
    /* ホバー状態の管理 */
  }
  
  &:disabled {
    /* 無効状態の管理 */
  }
}

3.スペーシングの一貫性

CSS

/* 内部の余白はコンポーネント変数で管理 */
--card-padding
--card-header-padding

/* 要素間の余白はグローバル変数で管理 */
--space-md

4.レスポンシブ対応

CSS

@media (min-width: 768px) {
  .card {
    padding: calc(var(--card-padding) * 1.5);
  }
}

このように、FigmaからCSSへの変換では：

変数の命名規則を統一
コンポーネントのスコープを明確に
状態変化を考慮
レスポンシブデザインに対応

することで、保守性の高いCSSを実現できます。

次章では、これらのコンポーネントをレスポンシブデザインに対応させる方法を見ていきましょう。

レスポンシブデザインへの対応

FigmaからCSSへのレスポンシブデザインの実装方法について、具体的な例を交えて解説します。

Figmaでのブレイクポイント管理

Figmaでは、各ブレイクポイントごとにフレームを作成し、それぞれの状態を管理します：

CSS

/* ブレイクポイントの定義 */
breakpoint.sm: 640
breakpoint.md: 768
breakpoint.lg: 1024
breakpoint.xl: 1280

/* コンポーネントの状態管理 */
header.height: {
  base: 60    /* モバイル */
  md: 80      /* タブレット以上 */
}

container.width: {
  base: 100%
  sm: 640
  md: 768
  lg: 1024
  xl: 1280
}

CSSでの実装方法

ブレイクポイントの設定

CSS

:root {
  /* ブレイクポイント */
  --breakpoint-sm: 40rem;  /* 640px */
  --breakpoint-md: 48rem;  /* 768px */
  --breakpoint-lg: 64rem;  /* 1024px */
  --breakpoint-xl: 80rem;  /* 1280px */
}

/* ミックスインとして使用する場合（SCSSの例） */
@mixin responsive($breakpoint) {
  @if $breakpoint == "sm" {
    @media (min-width: 40rem) { @content; }
  }
  @if $breakpoint == "md" {
    @media (min-width: 48rem) { @content; }
  }
  /* ... */
}

Auto LayoutとCSSの対応

Figmaの Auto Layout をCSSのFlexbox/Gridに変換する例：

CSS

/* 基本的なグリッドレイアウト */
.l-grid {
  display: grid;
  gap: var(--space-md);
  
  /* モバイルファースト */
  grid-template-columns: 1fr;
  
  /* ブレイクポイントごとの調整 */
  @media (min-width: 48rem) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @media (min-width: 64rem) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Flexboxレイアウト */
.l-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  
  @media (min-width: 48rem) {
    flex-direction: row;
    align-items: center;
  }
}

コンポーネントの適応的な変更

CSS

/* ヘッダーコンポーネント */
.l-header {
  height: var(--header-height-base);
  padding: 0 var(--space-md);
  
  /* ナビゲーション */
  &__nav {
    display: none; /* モバイルでは非表示 */
  }
  
  /* ハンバーガーメニュー */
  &__menu-button {
    display: block;
  }
  
  @media (min-width: 48rem) {
    height: var(--header-height-md);
    
    &__nav {
      display: flex; /* タブレット以上で表示 */
    }
    
    &__menu-button {
      display: none; /* タブレット以上で非表示 */
    }
  }
}

コンテナの管理

CSS

.l-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-md);
  
  @media (min-width: 40rem) {
    max-width: var(--container-width-sm);
  }
  
  @media (min-width: 48rem) {
    max-width: var(--container-width-md);
  }
  
  @media (min-width: 64rem) {
    max-width: var(--container-width-lg);
  }
}

レスポンシブ値の管理

CSS

:root {
  /* 基本値（モバイル） */
  --font-size-heading: 1.5rem;
  --space-section: 2rem;
  
  /* タブレット以上 */
  @media (min-width: 48rem) {
    --font-size-heading: 2rem;
    --space-section: 3rem;
  }
  
  /* デスクトップ */
  @media (min-width: 64rem) {
    --font-size-heading: 2.5rem;
    --space-section: 4rem;
  }
}

実装のポイント：

モバイルファーストの原則
- 基本値はモバイル向けに設定
- メディアクエリで段階的に拡張
変数の一貫性
- ブレイクポイントの統一
- 命名規則の維持
パフォーマンスの考慮
- 必要最小限のメディアクエリ
- 効率的なレイアウト変更

次章では、これらの知識を活かしたデザインシステムの運用方法を見ていきましょう。

デザインシステムの運用

効率的なデザインシステムの運用方法について、実践的な観点から解説します。

VariablesとStylesの整理・管理方法

命名規則の一元管理

Plane Text

/* 命名規則ガイド */
project/
└── design-tokens/
    ├── variables/
    │   ├── global/        # グローバル変数
    │   │   ├── colors.css
    │   │   └── spacing.css
    │   └── components/    # コンポーネント変数
    │       ├── button.css
    │       └── card.css
    └── styles/            # 再利用可能なスタイル
        ├── text.css
        └── effects.css

バージョン管理とドキュメント化

CSS

/**
 * @tokens Button
 * @version 1.2.0
 * @lastUpdate 2024-11-13
 * 
 * @variable button-color-primary - プライマリボタンの背景色
 * @variable button-color-hover - ホバー時の背景色
 * @variable button-padding-base - 基本の内部余白
 */

Figmaコンポーネントの更新と管理

変更の追跡

1.変更履歴の記録

markdown

# Changelog
## [1.2.0] - 2024-11-13
### Added
- ダークモードのカラートークンを追加
### Changed
- ボタンの余白を16pxから20pxに変更

2.変更の影響範囲

css

/* 変更前 */
--button-padding-base: 1rem;  /* 16px */

/* 変更後 */
--button-padding-base: 1.25rem;  /* 20px */
/* @affects: すべてのボタンコンポーネント */

CSSの保守性

モジュール構造の維持

CSS

/* 基本構造を維持したスタイル定義 */
.button {
  /* 1. レイアウトプロパティ */
  display: inline-flex;
  align-items: center;
  
  /* 2. サイズ・余白 */
  padding: var(--button-padding-base);
  height: var(--button-height);
  
  /* 3. 視覚的スタイル */
  background-color: var(--button-color-primary);
  border-radius: var(--button-radius);
  
  /* 4. タイポグラフィ */
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
}

実践的なTips

Figma VariablesとCSSを効率的に扱うための実践的なテクニックやよくある課題への対処方法を紹介します。

よくある変換パターン

複雑なシャドウの変換

CSS

/* Figmaでの定義 */
shadow.card: {
  y: 2,
  blur: 8,
  spread: 0,
  color: rgba(0,0,0,0.1)
}

/* CSSでの実装 */
:root {
  --shadow-card: 0 2px 8px rgba(0,0,0,0.1);
  
  /* 複数のシャドウを組み合わせる場合 */
  --shadow-card-enhanced: 
    0 2px 8px rgba(0,0,0,0.1),
    0 4px 16px rgba(0,0,0,0.05);
}

グラデーションの管理

CSS

/* Figmaでの定義 */
gradient.primary: {
  from: #3B82F6,
  to: #2563EB,
  angle: 45
}

/* CSSでの実装 */
:root {
  --gradient-primary: linear-gradient(
    45deg,
    var(--color-primary-500) 0%,
    var(--color-primary-600) 100%
  );
}

気をつけるべきポイント

1. 数値の丸め込み

CSS

/* Figmaの値をCSSに変換する際の注意点 */

/* 非推奨 */
--spacing: 1.33333rem;  /* 細かすぎる */

/* 推奨 */
--spacing: 1.325rem;    /* 小数点3桁まで */

2.カラー値の一貫性

CSS

/* 非推奨 */
--color-primary: #3B82F6;
--color-secondary: rgb(45, 185, 96);
--color-accent: hsl(280, 65%, 60%);

/* 推奨: 形式を統一 */
--color-primary: #3B82F6;
--color-secondary: #2DB960;
--color-accent: #B346E4;

3. 変数の依存関係

CSS

/* 非推奨: 直接的な依存 */
--card-shadow: var(--shadow-lg);

/* 推奨: 意図を明確に */
--shadow-lg: 0 4px 16px rgba(0,0,0,0.1);
--card-shadow: var(--shadow-lg); /* カード用のシャドウとして使用 */

開発フローの効率化

1. デザイン → コード変換の自動化

Figma Variablesのエクスポート
CSS Custom Propertiesの自動生成
ドキュメントの自動更新

2.変更の追跡と管理

CSS

/* 変更履歴のコメント */
/**
 * @changelog
 * 2024-11-14: スペーシングの値を調整
 * 2024-11-13: 新しいカラートークンを追加
 */

3.レビュープロセスの効率化

変更箇所の可視化
影響範囲の自動チェック
CSSの最適化チェック

デバッグのコツ

css

/* 変数の使用箇所を可視化 */
[style*="--color-primary"] {
  outline: 2px solid red;
}

/* 未定義変数のチェック */
:root {
  --undefined-var: initial !important;
}

このようなTipsを活用することで：

開発効率の向上
- 作業時間の短縮
- エラーの防止
品質の向上
- 一貫性の維持
- バグの早期発見
チーム全体の生産性向上
- 共通認識の形成
- スムーズな協業

まとめ

FigmaのVariablesを活用したCSS設計について、主要なポイントを振り返りましょう。

デザインとコードの一貫性がもたらすメリット

1.開発効率の向上

デザイントークンの一元管理
変更作業の効率化
自動化の促進

2.品質の向上

css

/* デザインシステムに基づいた実装 */
.button {
  padding: var(--button-padding-base);
  background: var(--button-color-primary);
  border-radius: var(--button-radius);
}

3.チームコミュニケーションの改善

デザイナーとエンジニアの共通言語
明確な変更管理
レビューの効率化

メンテナンス性の向上

1.変数管理の体系化

CSS

:root {
  /* プリミティブトークン */
  --color-blue-500: #3B82F6;
  
  /* セマンティックトークン */
  --color-primary: var(--color-blue-500);
  
  /* コンポーネントトークン */
  --button-color-base: var(--color-primary);
}