こんにちは！デザインとコードの境界線を溶かし、エンジニアリングの力でプロダクトの品質を極限まで高める――そんな未来を模索しているあなたへ。
今日は、オープンソースのベクターグラフィック＆UIデザインツール「Penpot」と、モダンなフロントエンド開発の聖杯である「W3C Design Tokens（DTCG仕様）」を組み合わせた、マルチプラットフォーム自動同期パイプラインの構築術についてお話しします。
「デザインの変更がコードに反映されるまでタイムラグがある」「iOS、Android、Webでカラーコードの記述揺れが絶えない」「Figmaの有料プランやエコシステムに依存し続けたくない」……そんな日々のフラストレーションを、今日ここで完全に終わらせましょう。
これをマスターすれば、デザイナーがPenpot上で色を1つ変えただけで、GitHub Actionsが動き出し、iOSのSwiftファイル、AndroidのKotlinファイル、そしてWebのCSS/Tailwind変数までが自動で更新される――そんな魔法のような自動化フローが手に入ります。
肩の力を抜いて、まずは基本から一歩ずつ紐解いていきましょう。
—
1. W3C Design Tokens Community Group仕様とPenpotの親和性
まずは、「デザイン・トークン（Design Tokens）」とは何か、そしてなぜW3Cの仕様が重要なのかを整理しておきましょう。
デザイン・トークンとは？
デザイン・トークンとは、色、タイポグラフィ、スペーシングといったデザインの最小単位を、「名前付きの変数」として定義したものです。従来はデザイナーの頭の中や、デザインツールの片隅に散らばっていた「マジックナンバー」を、コードと共通の言語に変換する架け橋だと思ってください。
なぜW3C DTCG仕様なのか？
かつてはツール独自のJSON形式（Figma Tokensプラグインの形式など）が乱立し、ツールを乗り換えるたびに変換スクリプトを書き直す地獄がありました。これを解決するために立ち上がったのが、W3C Design Tokens Community Group (DTCG)です。業界標準のフォーマットを定めることで、ツールに依存しない真のポータビリティを手に入れられるようになりました。
Penpotが選ばれる理由
Penpotは、最初から「オープンWebスタンダード」をベースに設計された、極めて稀有なオープンソースのデザインツールです。SVGをネイティブフォーマットとして採用し、CSS GridやFlexboxの概念をそのままUIレイアウトに持ち込んでいます。
つまり、コードの思想とデザインの思想が最初から完全にシンクロしているのです。Penpotのカラーマネジメントは、W3C DTCGのデータ構造と非常に高い親和性を持ち、次世代のトークン駆動開発（Token-Driven Development）を行うための最高の土台を提供してくれます。
—
2. PenpotからデザインメタデータをJSONで書き出す手順
それでは、実際にPenpotを触りながら、デザイン変数をトークンとして抽出するハンズオンに入りましょう。ここでは、Penpotのカラーパレットを起点にします。
Step 1: Penpotでカラー変数を定義する
Penpotのプロジェクトを開き、右サイドバーの「Colors（カラー）」パネルから、プロジェクト全体で共通利用するカラー変数（例: `primary-500`, `neutral-900`など）を体系的に定義します。
> 💡 先輩からのアドバイス
> ここでの命名規則（Nomenclature）が、そのままコード側の変数名になります。Kebab-case（例: `color-brand-primary`）で階層的に整理しておくのが、後続のマルチプラットフォーム展開で最もトラブルが少ないベストプラクティスです。
Step 2: プラグインまたはAPI経由でのエクスポート
Penpotは強力なAPIエコシステムとプラグイン機構を持っています。現在、Penpotのビルトインエクスポート機能やコミュニティ製プラグイン（またはPenpot APIを用いたヘッドレススクリプト）を利用して、定義したカラーやタイポグラフィをW3C DTCG準拠のJSONとして出力できます。
以下は、W3C DTCG仕様に準拠した、出力されるJSONの美しいサンプルです。
{
“color”: {
“brand”: {
“primary”: {
“$value”: “#3E619B”,
“$type”: “color”,
“$description”: “ブランドのメインカラー。ボタンやアクティブ状態に使用。”
}
},
“neutral”: {
“surface”: {
“$value”: “#F8FAFC”,
“$type”: “color”,
“$description”: “アプリ全体の背景色（サーフェイス）”
}
}
}
}
このJSONファイルこそが、デザインとコードを繋ぐ「唯一の真実のソース（Single Source of Truth）」となります。
—
3. Style DictionaryやFigma Tokens代替としての活用法
JSONとして書き出したデザインメタデータを、各プラットフォームが読める形に料理（トランスパイル）する必要があります。ここで登場するのが、Amazonがオープンソースとして開発した伝説的なツール「Style Dictionary」です。
Style Dictionaryとは？
デザイン・トークンのJSONを受け取り、iOS（Swift / Objective-C）、Android（Kotlin / XML）、Web（CSS / SCSS / JS / Tailwind）向けのネイティブな変数コードに一瞬で変換してくれるビルドツールです。Figma Tokens（現Tokens Studio）の有料機能や複雑なエコシステムに依存せず、完全なオープンソーススタックで同等以上のパイプラインが構築できます。
プロジェクトの初期セットアップ
Node.js環境を用意し、プロジェクトフォルダを作成してStyle Dictionaryをインストールしましょう。
mkdir penpot-tokens-pipeline
cd penpot-tokens-pipeline
npm init -y
npm install -D style-dictionary
プロジェクトのルートに、設定ファイルである `config.json` を作成します。このファイルが、Penpotから出力されたJSONを各言語へと変換するレシピになります。
{
“source”: [“tokens//.json”],
“platforms”: {
“css”: {
“transformGroup”: “css”,
“buildPath”: “build/css/”,
“files”: [
{
“destination”: “_variables.css”,
“format”: “css/variables”
}
]
},
“android”: {
“transformGroup”: “android”,
“buildPath”: “build/android/”,
“files”: [
{
“destination”: “colors.xml”,
“format”: “android/colors”
}
]
},
“ios”: {
“transformGroup”: “ios-swift”,
“buildPath”: “build/ios/”,
“files”: [
{
“destination”: “StyleTokens.swift”,
“format”: “ios-swift/class.swift”
}
]
}
}
}
これで、`tokens/` フォルダにPenpotからエクスポートしたJSONを配置し、ビルドコマンドを叩くだけで、全プラットフォーム用のコードが生成される仕組みが整いました。
—
4. iOS・Android・Webへのマルチプラットフォーム自動同期パイプラインの構築
さあ、いよいよ最後の仕上げです。手動でJSONをコピー＆ペーストするような泥臭い作業は今日で終わり。GitHub Actionsを使って、「Penpotの更新をトリガー（または定期実行）して、自動で各リポジトリにプルリクエストを送る」完全自動化パイプラインを構築します。
GitHub Actionsワークフローの構築
プロジェクトの `.github/workflows/sync-tokens.yml` に、以下の設定を記述します。
name: Sync Design Tokens from Penpot
on:
# 手動実行、またはWebhooks / 定期実行（cron）を設定可能
workflow_dispatch:
jobs:
build-and-sync:
runs-on: ubuntu-latest
steps:
- name: 1. リポジトリのチェックアウト
uses: actions/checkout@v4
- name: 2. Node.js環境のセットアップ
uses: actions/setup-node@v4
with:
node-version: ’20’
- name: 3. 依存関係のインストール
run: npm ci
- name: 4. Style Dictionaryによるトークンビルド
run: npx style-dictionary build
- name: 5. 変更差分の確認とコミット・PR作成
uses: peter-evans/create-pull-request@v6
with:
token: ${{ secrets.GITHUB_TOKEN }}
commit-message: “chore(tokens): Penpotのデザイン変数を自動同期”
title: “🎨 [Design Tokens] デザイン変数の自動同期アップデート”
body: |
Penpotで更新された最新のデザインメタデータを基に、
CSS, Android (XML), iOS (Swift) のトークンを自動生成しました。
内容を確認してマージしてください。
branch: feature/auto-sync-tokens
base: main
精度高い動作確認（Hello World）のやり方
1. Penpot上で、テストとしてプライマリカラーの値を微変更し、最新のJSONを `tokens/` ディレクトリに配置（またはAPI経由で自動取得）します。
2. ローカル環境、またはGitHubのActionsタブから `workflow_dispatch`（手動実行ボタン）をポチッと押します。
3. 数秒後、GitHub上で自動的にブランチが切られ、`build/css/_variables.css` や `build/ios/StyleTokens.swift` が綺麗に更新されたプルリクエストが生成されているのを確認してください。
生成されたCSSのプレビュー：
/
- 完全に自動生成されたファイルです。手動で編集しないでください。
/
:root {
–color-brand-primary: #3E619B;
–color-neutral-surface: #F8FAFC;
}
これで、デザイナーがPenpotで色を変えるたび、エンジニアは面倒なコードの書き換え作業から解放され、ビジネス価値を生み出す実装に集中できるようになります。
—
おわりに
いかがでしたでしょうか？
Penpotというオープンでモダンなデザインツールと、W3C DTCG仕様、そしてStyle DictionaryやGitHub Actionsを組み合わせることで、属人性の高かったデザイン運用を「堅牢なエンジニアリングパイプライン」へと昇華させることができます。
これをマスターすれば、チーム全体の開発スピードが劇的に上がり、デザインとコードの乖離という永遠の課題に終止符を打つことができます。
まずはローカル環境で小さなカラー変数を一つ、JSON経由でビルドするところから試してみてください。「これをこう繋げるのか！」という感動が、あなたの毎日の開発を必ずもっと楽しく、スマートにしてくれるはずです。それでは、ハッピー・コーディング＆デザイン！