マルチブランドFigmaトークン連携 2025 — CSS変数と配信をCIで同期する

マルチブランドでデザイントークンを管理する企業では、FigmaのテーマとコードベースのCSS変数が乖離しがちです。ブランドリニューアルや季節キャンペーンの度に tokens.json を手作業で編集すると、反映漏れやアクセシビリティ違反が発生し、エンジニア・デザイナー双方の再作業が膨らみます。本稿では、Figma Tokens・Style Dictionary・Next.jsを組み合わせ、CI/CDで整合性を担保するワークフローを紹介します。

TL;DR

• Figma APIとDesign Tokensプラグインでブランド別のモードを抽出し、figma/<brand>.json を生成する。
• Hex→CSSトークン変換 を利用して :root と data-theme 切り替え用のCSS変数を自動生成し、TypeScriptの型定義まで一括出力する。
• GitHub Actionsで tokens:pull → lint → contrast-check → build → deploy の順にCIを構築し、Palette Balancer APIでテーマごとのWCAG比率を検証する。
• Pipeline Orchestrator と連携し、ブランドごとの配信環境（CDN/エッジ）へ差分デプロイする。
• ダッシュボードで色差 (ΔE)、LCP、テーマ切替率をモニタリングし、ブランドガイドラインの実効性を定量化する。

1. 情報設計とリポジトリ構成

1.1 データモデル

まずはトークンを「コア」「ブランド」「コンポーネント」の3層に分け、抽象度の高い順に継承させます。

1.2 リポジトリのディレクトリ例

/design-system
  ├─ tokens/
  │   ├─ core.json
  │   ├─ brands/
  │   │    ├─ default.json
  │   │    ├─ premium.json
  │   │    └─ youth.json
  │   └─ components/
  │        ├─ button.json
  │        └─ input.json
  ├─ scripts/
  │   ├─ pull-figma.mjs
  │   ├─ build-css.mjs
  │   └─ validate-contrast.mjs
  └─ packages/
      ├─ tokens-css/
      └─ tokens-ts/

• pull-figma.mjs はFigma APIを叩いてブランドモードの差分を取得し、git diff を出力してレビュアーが視認できるようにします。
• build-css.mjs では Hex→CSSトークン変換 のAPIを利用し、tokens-css パッケージに :root 用と data-theme 用のCSS変数を出力します。
• TypeScriptの型は tokens-ts に生成し、Next.jsアプリで import type { ThemeToken } from '@uit/tokens-ts'; のように型安全なアクセスを提供します。

2. CI/CD パイプライン構築

2.1 GitHub Actionsの構成

以下はActionsワークフローの例です。

name: Tokens Sync

on:
  workflow_dispatch:
  schedule:
    - cron: '0 */6 * * *'
  push:
    paths:
      - 'tokens/**'
      - 'scripts/**'

jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: node scripts/pull-figma.mjs
      - run: npm run lint:tokens
      - run: node scripts/validate-contrast.mjs
      - run: node scripts/build-css.mjs
      - run: npm run test:visual
      - run: npm run build
      - run: npm run deploy
        env:
          CDN_TOKEN: ${{ secrets.CDN_TOKEN }}

• lint:tokens では JSON Schema を使って必須キーを検証します。
• validate-contrast.mjs は Palette Balancer のAPIを用い、ブランドモード別に3:1 / 4.5:1 ラベルを付けてレポート出力します。
• test:visual は Storybook + Playwright でテーマ切り替えのスクリーンショット差分を比較します。

2.2 CI結果の通知

• 成功時は tokens-sync Slackチャンネルに diff summary を投稿し、Excel等での手入力を介さず意思決定できます。
• 失敗時は Palette Balancer の結果を添付し、コントラストが不足するトークンを自動ハイライトします。

3. 配信パイプラインとキャッシュ戦略

3.1 Pipeline Orchestrator の活用

Pipeline Orchestrator を利用すると、ブランド別の配信先CDNに差分だけを転送できます。

• CDN転送後は pwa-update イベントを発火し、Service Workerが新トークンを取得できるようにします。
• Next.jsの app/layout.tsx で data-theme をサーバーサイドレンダリングし、初回描画時から正しいブランドテーマを表示させます。詳細は Web to Print Workflow 2025 — ブランド配布と品質保証 の配信章を参照してください。

4. ガバナンスと可視化

4.1 KPIダッシュボード

LookerまたはGrafanaで以下のメトリクスを可視化します。

• ΔE差分: ブランド更新ごとの色差（Palette Balancer出力）。
• LCP（P75）: テーマ切り替え時の描画遅延を監視。
• Theme Toggle Rate: ユーザーがダーク/ライトを切り替えた比率。
• Deployment Frequency: トークン更新の頻度と成功率。

4.2 レビュー体制

• 毎週の「Design Ops Sync」でトークン差分を確認し、逸脱があれば直ちにFigma側へフィードバックします。
• 四半期ごとに tokens-audit.md を更新し、ブランドごとの投資配分と改善指標を整理します。

5. ケーススタディ

大手EC企業での導入では以下の成果がありました。

• トークン同期にかかる時間が平均5.5時間 → 1.2時間に短縮。
• WCAG違反カラーの検出件数が月18件 → 1件に激減。
• ブランド別テーマ切り替え時のLCP（P75）が3.1秒 → 2.2秒に改善。

まとめ

マルチブランドのデザイントークン運用は、Figmaとコードの“二重管理”をなくし、CI/CDに統合することで初めてスケールします。Hex→CSSトークン や Palette Balancer の自動検証を組み合わせれば、アクセシビリティやパフォーマンスの劣化を防ぎながら高速にブランド展開が可能です。まずはFigmaのモード構造を棚卸し、tokens:pull ワークフローを試すところから始めてください。