Penpotを「デザインの真実」にする：W3C DTCG準拠のマルチプラットフォーム同期パイプライン
デザインツールは単なる「絵を描く場所」ではない。それは、プロダクトのOSそのものである。
多くのエンジニアがFigmaのプラグインエコシステムに依存し、そのブラックボックス性に頭を抱える中、オープンソースの旗手たるPenpotは、Design Tokens W3C Community Group (DTCG) 仕様をネイティブに理解する数少ない選択肢だ。
本稿では、Penpotを単なるUIカンプ作成ツールとしてではなく、「マルチプラットフォーム同期パイプラインの単一の真実（Single Source of Truth）」として運用するための、極限の自動化アーキテクチャを解剖する。
—
1. なぜ「W3C DTCG仕様」なのか：標準化の恩恵
Penpotが優れているのは、内部データモデルがSVG/CSSに基づいている点だけではない。W3C DTCGフォーマットを正しく解釈することで、「デザイナーが定義した色」と「エンジニアが実装するCSS変数/Swift/Kotlinコード」の間に介在する翻訳ミス（＝ヒューマンエラー）を物理的に排除できる。
Figmaのトークン管理は往々にしてサードパーティのプラグインに依存し、それがAPIの変更で動かなくなるリスクを孕んでいる。Penpotのネイティブなトークン管理は、将来的なロックインを避け、CI/CDパイプラインへの直結を可能にする。
2. Penpot APIによるメタデータ抽出の真髄
PenpotのWeb APIは極めて堅牢だ。GUIでちまちまとエクスポートする時代は終わった。Node.jsまたはPythonを用いて、PenpotのワークスペースからJSON形式でトークンを抽出するスクリプトを構築する。
以下は、Penpot APIを叩き、W3Cフォーマットに適合させるための最小構成スクリプトの断片だ。
// fetch-tokens.js
// Penpot APIから生データを取得し、自社のトークン構造へ正規化する
const axios = require(‘axios’);
async function syncTokens(workspaceId, accessToken) {
const endpoint = `https://design.your-company.com/api/v1/workspaces/${workspaceId}/tokens`;
const { data } = await axios.get(endpoint, {
headers: { ‘Authorization’: `Bearer ${accessToken}` }
});
// ここでW3C DTCGフォーマットへの変換処理を行う
// Penpotの内部IDをセマンティックな名称にマッピングするのが鍵
const w3cTokens = transformToW3C(data);
require(‘fs’).writeFileSync(‘./tokens.json’, JSON.stringify(w3cTokens, null, 2));
}
// 内部アーキテクチャ最適化のヒント:
// 大規模プロジェクトでは、差分検知（JSONのハッシュ値比較）を行い、
// 変更がない場合はパイプラインを中断することでCIコストを最小化せよ。
3. Style Dictionaryとの統合：マルチプラットフォーム展開の自動化
抽出した`tokens.json`は、Amazonが提供するStyle Dictionaryに流し込む。これが、UI/UXエンジニアが到達すべき「最終防衛線」だ。
自動化フローの全体像
1. Penpot: デザイン決定 → API経由でトークン抽出
2. CI Pipeline (GitHub Actions): `tokens.json`を検知
3. Style Dictionary: 各プラットフォーム（iOS/Swift, Android/XML, Web/SCSS）へトランスパイル
4. Artifacts: 各リポジトリへPRを自動生成
Style Dictionary設定例 (config.json)
{
“source”: [“tokens.json”],
“platforms”: {
“web”: {
“transformGroup”: “css”,
“buildPath”: “dist/web/”,
“files”: [{ “destination”: “_variables.css”, “format”: “css/variables” }]
},
“ios”: {
“transformGroup”: “ios”,
“buildPath”: “dist/ios/”,
“files”: [{ “destination”: “StyleTokens.swift”, “format”: “ios-swift/class.swift” }]
}
}
}
4. パフォーマンスとメモリ消費の最適化ハック
大規模なデザインシステム（数千のトークン）を扱う際、Node.jsのメモリ不足に悩まされることがある。以下のハックを適用せよ。
- ストリーム処理: トークンのパースに `JSONStream` を使用し、メモリ上に全JSONを展開しないこと。
- キャッシュ層の構築: APIのリクエスト回数を制限するために、RedisやインメモリキャッシュをCIパイプラインのキャッシュ層に噛ませる。
- 型安全性: TypeScriptを用いて、抽出したトークンがW3C DTCG仕様を完全に満たしているか、実行時に `ajv` 等のスキーマバリデータで厳密に検証する。
—
結論：デザイナーとエンジニアの「言語」を統一せよ
Penpotを単なるツールとして使うのは、フェラーリを近所のコンビニの買い物に使うのと同じだ。真のプロダクトデザイナーであれば、Penpotを「API駆動の開発基盤」の一部として捉えるべきだ。
デザインシステムは静的なドキュメントではない。それは、「Penpotからコードベースまで、一滴の変更も漏らさず同期される動的なパイプライン」であるべきだ。
この構成を導入した瞬間、デザインの微調整のためにエンジニアにチケットを切る時間はゼロになる。それが、我々が目指すべき「真のエンジニアリング」の姿である。
さあ、GUIから解放され、コードでデザインを制御せよ。