Penpotを「デザインシステムの真のソース」に昇華させる：CSS変数完全同期の深淵
多くのデザインツールが「デザインのためのツール」として完結している中、PenpotがオープンソースかつSVGベースであることは、我々エンジニアにとって福音だ。FigmaがブラックボックスなJSONの海を泳ぐのに対し、Penpotは最初からWebネイティブである。
本稿では、Penpotを単なるお絵描きソフトとして扱うのではなく、「CSS変数を生成する真のソース（Single Source of Truth）」として、フロントエンドのパイプラインに直結させる極限のワークフローを解説する。
—
1. デザインシステムの「実体」を定義する：PenpotのCSS変数運用
Penpotのカラーパレットやタイポグラフィは、ブラウザのCSS変数（CSS Custom Properties）と1対1で対応させる。重要なのは、Penpot上の名前空間をCSSの規約と一致させることだ。
- ルール: `brand-primary` → `–color-brand-primary`
- 構造: デザイン側の命名規則（Naming Convention）を、そのままコード側のトークン命名規則とする。
これを怠ると、後述する自動化パイプラインが「翻訳」という無駄なコストを支払うことになる。「デザインの命名＝コードの変数名」こそが、同期の聖域だ。
—
2. APIを用いた「同期の自動化」：CLIパイプラインの構築
PenpotのWeb UIでポチポチと設定を書き出すのは三流の仕事だ。我々はAPIとNode.jsで、ビルドプロセスにデザイントークンを組み込む。
PenpotのAPIは、プロジェクト内のデザインデータをJSON形式で引き抜くことができる。以下のスクリプトは、Penpotのワークスペースから最新のトークンを抽出し、CSS変数ファイルを自動生成するボイラープレートだ。
`fetch-tokens.js` (Node.js/Axios)
const axios = require(‘axios’);
const fs = require(‘fs’);
// Penpot API TokenとWorkspace IDを環境変数で管理
const { PENPOT_API_TOKEN, PENPOT_FILE_ID } = process.env;
async function generateCssTokens() {
// 1. Penpot APIからデザインデータを取得
const { data } = await axios.get(`https://design.penpot.app/api/rpc/get-file?fileId=${PENPOT_FILE_ID}`, {
headers: { ‘Authorization’: `Token ${PENPOT_API_TOKEN}` }
});
// 2. 独自のスキーマへ変換（ここではcolorsの抽出例）
const colors = data.colors.map(c => `–color-${c.name}: ${c.value};`).join(‘\n’);
// 3. CSS変数を書き出し
const cssContent = `:root {\n${colors}\n}`;
fs.writeFileSync(‘./src/styles/tokens.css’, cssContent);
console.log(‘✅ Design Tokens synced successfully.’);
}
generateCssTokens();
—
3. パフォーマンスとメモリ最適化：CSS Custom Propertiesの運用ハック
CSS変数を大規模に展開すると、ブラウザのレンダリングエンジン（Blink等）が持つCSSOMのメモリ消費が気になる場面がある。特に大規模なデザインシステムでは、変数のネストや再計算がパフォーマンスのボトルネックになる可能性がある。
最適化の極意：
1. CSS Variable Overrides（スコープ制限）: `:root` にすべてを詰め込むな。`[data-theme=”dark”]` やコンポーネント単位のスコープを使い、計算コストを局所化せよ。
2. PostCSSによる静的置換（ビルド時）: 開発中はCSS変数で柔軟性を担保し、プロダクションビルド時にPostCSSプラグイン（`postcss-custom-properties`）を用いて、可能な限り値を静的（Static）に解決させる。これにより、ランタイムの再計算コストをゼロにする。
—
4. CI/CDパイプラインへの完全組み込み
このプロセスをGitフローに組み込む。
1. Webhookの利用: Penpotの「保存」や「プッシュ」イベントをトリガーにCI（GitHub Actions等）を起動。
2. Lint & Test: 生成された `tokens.css` がアクセシビリティ標準（コントラスト比等）を満たしているか、Stylelintで静的解析を行う。
3. Auto-Commit: 変更があれば自動でブランチを切り、PRを作成する。
.github/workflows/sync-tokens.yml
jobs:
sync:
runs-on: ubuntu-latest
steps:
- run: node scripts/fetch-tokens.js
- run: git commit -am “chore: update design tokens from Penpot”
- run: git push
—
結び：エンジニアがデザインを「支配」するということ
デザインシステムを「ドキュメント」として放置するのは、エンジニアとしての怠慢だ。PenpotをAPI経由で制御し、トークンをコードの血肉とすることで、デザイナーは「デザインの意図」に集中し、エンジニアは「プロダクトの堅牢性」に集中できる。
ツールに振り回されるな。ツールをパイプラインの歯車にせよ。
Penpotは、そのための最も強力なオープンソースの楔（くさび）となるはずだ。次世代のフロントエンドアーキテクトであれば、この「デザインとコードの境界の消失」を、君自身のプロダクトで体現してほしい。