PenpotのカラーマネジメントとDesign Tokens完全対応：マルチプラットフォーム展開の自動化パイプライン構築
テックリードの皆さん、こんにちは。デザインとコードの境界線をなくし、マルチプラットフォーム（iOS / Android / Web）への展開を完全自動化したいと思ったことはありませんか？
多くのチームがいまだに「Figmaからトークンをプラグインで書き出し、JSONを加工し、Style Dictionaryに食わせる」という職人芸的なワークフローに依存しています。しかし、オープンソースの旗手である Penpot が W3C Design Tokens Community Group（DTCG）仕様にネイティブ対応したことで、このエコシステムは次のフェーズへと進化しました。
今回は、PenpotのカラーマネジメントとDesign Tokensのポテンシャルを極限まで引き出し、デザイン変更が数分でプロダクトのコードベースに反映される「真のCI/CDパイプライン」の構築手法を、実務レベルのコードと設定ファイルと共に完全解説します。
—
1. W3C Design Tokens Community Group仕様とPenpotの親和性
なぜ今、W3C DTCGフォーマットなのか。それは、デザインの「色」や「タイポグラフィ」「スペーシング」を、特定のデザインツールに依存しない共通のソースオブトゥルース（SSOT）として定義できるからです。
Penpotは、このW3C DTCGのドラフト仕様に準拠したデータ構造を内部で構築しています。従来の「単なるカラーパレットの共有」とは異なり、以下の特性を持っています。
- 多層的なエイリアス（参照構造）: プリミティブ（基本色：`blue-500`）からセマンティック（意味的トークン：`color-primary`）、そしてコンポーネント固有のトークンへのカスケード。
- 文脈に応じたテーマ切り替え: ダークモードやブランドごとのテーマ拡張が、構造を壊さずに実現可能。
- プラットフォーム中立性: JSON形式で表現されるため、iOS（Swift / SwiftUI）、Android（Kotlin / Jetpack Compose）、Web（CSS Variables / Tailwind CSS）へ等価に変換できます。
⚙️ チーム開発におけるPenpot設定の共有化ルール
デザインシステムを破綻させないために、Penpotの「Libraries」機能とチーム設定において、以下のルールを厳格に定めてください。
1. 命名規則の強制（Kebab-case）:
トークン名は必ず `category-property-modifier-state` の形式（例: `color-surface-background-default`）に統一します。
2. ハードコードの禁止:
デザインファイル内で直接HEX値（例: `#007AFF`）を使用することを厳禁とし、必ずColor Tokensパレットからバインドさせます。これに違反したオブジェクトは、後述する検証スクリプトによってCI上で弾かれます。
—
2. PenpotからデザインメタデータをJSONで書き出す手順
Penpotの強力な点は、APIやエクスポート機能を通じて、デザインメタデータを極めてクリーンなW3C DTCGフォーマットのJSONとして取得できる点です。
🛠️ 開発スピードを劇的に高めるショートカット＆プラグイン
- `Ctrl + Shift + D` (Mac: `Cmd + Shift + D`): デベロッパーモードの即時切り出し。CSSやSVGだけでなく、トークンの構造を瞬時に確認できます。
- Penpot Community Plugins – “Tokens Exporter”:
公式またはコミュニティ製のトークンエクスポータープラグインを導入し、エクスポート先をGitリポジトリ（またはGitHub Actions経由の自動同期）に設定します。
📄 書き出されるW3C DTCG準拠のJSON（実例）
Penpotから出力される、またはCIで整形されるトークンJSONのベストプラクティス構造です。
{
“$schema”: “https://design-tokens.github.io/community-group/format/”,
“color”: {
“primitive”: {
“blue”: {
“500”: {
“$value”: “#0066FF”,
“$type”: “color”,
“$description”: “プライマリブルーのベースカラー”
}
},
“neutral”: {
“100”: {
“$value”: “#F8F9FA”,
“$type”: “color”
},
“900”: {
“$value”: “#111315”,
“$type”: “color”
}
}
},
“semantic”: {
“surface”: {
“default”: {
“$value”: “{color.primitive.neutral.100}”,
“$type”: “color”,
“$description”: “標準的な背景色”
},
“inverse”: {
“$value”: “{color.primitive.neutral.900}”,
“$type”: “color”,
“$description”: “ダークモードまたは反転要素の背景色”
}
},
“action”: {
“primary”: {
“$value”: “{color.primitive.blue.500}”,
“$type”: “color”,
“$description”: “主要なCTAボタンの背景色”
}
}
}
}
}
—
3. Style Dictionaryを活用したマルチプラットフォーム変換
W3C DTCGフォーマットのJSONを手に入れたら、Amazonが開発した Style Dictionary を用いて、各プラットフォーム向けのコードへとトランスパイルします。Figma Tokens（Tokens Studio）の代替として、オープンでベンダーロックインされないエコシステムを構築できます。
📁 プロジェクト構成例
design-tokens/
├── tokens/
│ └── tokens.json # Penpotから出力されたW3C DTCG JSON
├── build/
│ ├── android/
│ ├── ios/
│ └── web/
├── config.json # Style Dictionaryの設定ファイル
└── package.json
⚙️ 設定ファイル: `config.json`
マルチプラットフォーム（Web, iOS, Android）へ同時に出力するためのStyle Dictionary設定ファイルです。
{
“source”: [“tokens//.json”],
“platforms”: {
“web”: {
“transformGroup”: “css”,
“buildPath”: “build/web/”,
“files”: [
{
“destination”: “_variables.css”,
“format”: “css/variables”,
“options”: {
“outputReferences”: true
}
}
]
},
“ios”: {
“transformGroup”: “ios-swift”,
“buildPath”: “build/ios/”,
“files”: [
{
“destination”: “DesignTokens.swift”,
“format”: “ios-swift/class.swift”,
“options”: {
“className”: “DesignTokens”
}
}
]
},
“android”: {
“transformGroup”: “android”,
“buildPath”: “build/android/”,
“files”: [
{
“destination”: “color_tokens.xml”,
“format”: “android/resources”
}
]
}
}
}
—
4. iOS・Android・Webへのマルチプラットフォーム自動同期パイプラインの構築
ここからが本題です。Penpotでのデザイン変更を検知し、コードベースへ自動でPR（プルリクエスト）を作成するGitHub Actionsパイプラインを構築します。
🤖 GitHub Actionsワークフロー: `.github/workflows/sync-tokens.yml`
name: Sync Design Tokens from Penpot
on:
# Webhook経由、または定期実行（例: 1日1回、または手動トリガー）
workflow_dispatch:
schedule:
- cron: ‘0 0 1’ # 毎週月曜日に実行
jobs:
sync-and-build:
runs-on: ubuntu-latest
permissions:
contents: write
pull-requests: write
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: ’20’
cache: ‘npm’
- name: Install dependencies
run: npm ci
# ※注: Penpot APIやCLIを使用して最新のJSONを取得するステップ（ここではモックとして既存のtokens.jsonを更新する想定）
# – name: Fetch latest tokens from Penpot API
# run: npx penpot-tokens-cli –file-id “${{ secrets.PENPOT_FILE_ID }}” –output tokens/tokens.json
- name: Run Style Dictionary to build tokens
run: npx style-dictionary build
- name: Create Pull Request
uses: peter-evans/create-pull-request@v6
with:
token: ${{ secrets.GITHUB_TOKEN }}
commit-message: ‘chore(tokens): synchronize design tokens from Penpot’
title: ‘🔄 Design Tokens Auto-Sync’
body: |
Penpotの最新デザインメタデータに基づいて自動生成されたデザインシステムの差分です。
内容を確認し、問題なければマージしてください。
branch: chore/sync-design-tokens
delete-branch: true
—
5. 出力されるコードのベストプラクティス
上記のパイプラインによって自動生成される、各プラットフォーム向けの成果物の例です。手動での修正は一切不要になります。
🌐 Web (CSS Variables) -> `build/web/_variables.css`
/
- Do not edit directly
- Generated on
/
:root {
–color-primitive-blue-500: #0066FF;
–color-primitive-neutral-100: #F8F9FA;
–color-primitive-neutral-900: #111315;
–color-surface-default: var(–color-primitive-neutral-100);
–color-surface-inverse: var(–color-primitive-neutral-900);
–color-action-primary: var(–color-primitive-blue-500);
}
🍎 iOS (Swift) -> `build/ios/DesignTokens.swift`
import UIKit
public enum DesignTokens {
public enum Color {
public static let primitiveBlue500 = UIColor(red: 0.000, green: 0.400, blue: 1.000, alpha: 1.0)
public static let surfaceDefault = UIColor(red: 0.973, green: 0.976, blue: 0.980, alpha: 1.0)
public static let actionPrimary = Color.primitiveBlue500
}
}
🤖 Android (XML) -> `build/android/color_tokens.xml`
—
さいごに：デザインとコードを繋ぐ新しいエンジニアリング文化へ
PenpotのW3C Design Tokens対応と、今回紹介したStyle Dictionary、GitHub Actionsを組み合わせたパイプラインによって、「デザイナーが色を変えたら、数分後にはiOS、Android、Webのエンジニアの元にPRが届く世界」が完全に現実のものとなります。
プロトタイピングツールを単なる「お絵描きソフト」として扱う時代は終わりました。Penpotをデザインシステムの中核となる「データベース」として捉え、コードベースとシームレスに同期させる。このアーキテクチャを導入したチームは、UIの不整合（デザイン負債）から完全に解放され、プロダクトの価値創造そのものに集中できるようになります。
さあ、今すぐあなたのチームのワークフローにこの自動化パイプラインを組み込み、開発スピードを次の次元へと引き上げましょう。