脱・囲い込み。Penpotを「デザインのソースコード」として掌握する極致
Figmaという「閉じた楽園」に安住している諸君へ。
UIデザインがバイナリのブラックボックスに封印され、APIのレートリミットに怯え、ブラックボックス化されたプロプラエタリなエコシステムに依存し続けることに、エンジニアとして何の疑問も抱かないのか？
本稿で扱うPenpotは、単なるFigmaの代用品ではない。これは、デザインを「DOM（SVG）の再定義」として扱い、Gitフローと完全に同期可能な「デザインの真のソースコード化」を実現するためのエンジンだ。
今日は、Penpotを使い倒し、デザインパイプラインを「コード」として制御するための極限の知見を授ける。
—
1. なぜPenpotなのか：SVGという「言語」の力
Penpotの核心は、「SVGネイティブ」である点に尽きる。
Figmaの独自フォーマットとは異なり、Penpotは保存したファイルを解凍すれば、そのままブラウザでレンダリング可能なSVG/CSS構造が露出する。
- データポータビリティ: ベンダーロックインからの完全開放。
- Git連携の必然: 差分管理が困難なバイナリとは異なり、SVGのdiffは極めて読みやすい。
- CSSカスタムプロパティ（変数）の直結: デザインのトークンがそのままコードのCSS変数と一対一でマップされる。
—
2. アーキテクチャの掌握：Dockerとセルフホスティング
クラウド版を使うのは、初心者向けだ。DevOpsを司る者が目指すべきは、社内インフラにPenpotを組み込み、そのパフォーマンスを自社のコンテキストで最大化することにある。
自前環境の最適化（docker-composeハック）
メモリ消費を抑え、CI/CDと直結させるための最小構成だ。
docker-compose.yml
services:
penpot-backend:
image: penpotapp/backend:latest
environment:
- PENPOT_FLAGS=enable-registration # チーム外のアクセスを制限
deploy:
resources:
limits:
memory: 1G # 大規模プロジェクトでもメモリを制限して安定稼働
penpot-frontend:
image: penpotapp/frontend:latest
# 独自のCDNやプロキシを通すことで、アセットのキャッシュ戦略を制御可能
—
3. APIによるデザイン自動化の極致
PenpotはAPIファーストだ。GUIでポチポチとコンポーネントを作るのは、もはや「手作業」に過ぎない。JSON構造を叩き、デザインを動的に生成する。
独自スクリプトによるコンポーネント生成（Node.js例）
デザインシステムの一部をコードからPenpotに流し込むための骨子だ。
const axios = require(‘axios’);
/
- デザインシステムからPenpotのAPI経由でコンポーネントを自動生成する
- 実際には、Design TokenのJSONをパースして叩く
/
async function syncDesignTokens(tokenData) {
const endpoint = `${process.env.PENPOT_URL}/api/v1/workspaces/…`;
try {
const response = await axios.post(endpoint, tokenData, {
headers: { ‘Authorization’: `Bearer ${process.env.PENPOT_API_KEY}` }
});
console.log(‘デザインシステムとPenpotの同期完了:’, response.status);
} catch (err) {
console.error(‘同期失敗:’, err.response.data);
}
}
—
4. Figmaからの脱出：マイグレーションの「正攻法」
FigmaからPenpotへの移行は、単なるファイル変換ではない。「設計思想の変換」である。
1. SVGエクスポートの自動化: FigmaのAPIを使い、全コンポーネントをSVGで吐き出す。
2. CSS抽出: `figma-to-css`系のライブラリを使い、FigmaのプロパティをCSS変数（SCSS/PostCSS）に変換する。
3. Penpotへのインポート: Penpotのインポート機能をCLI経由で叩き、自動配置させる。
このプロセスを一度組めば、デザイン変更のたびに手動で追従する必要はなくなる。
—
5. 伝説的エンジニアからの提言：デザインの「コード化」を完遂せよ
諸君、UI/UXの仕事は「絵を描くこと」ではない。「ユーザー体験を定義する論理構造を記述すること」だ。
Penpotを単なるツールとして使うな。「デザインシステムをCI/CDのパイプラインに組み込むためのインターフェース」として定義し直せ。
- 自動テスト: デザインの変更が、自動的にフロントエンドの回帰テストを誘発する仕組みを作る。
- アクセシビリティ監視: PenpotのSVG構造をLighthouse APIで動的にチェックし、デザイン段階でa11yを担保する。
デザインツールを「閉じた場所」から「オープンな開発エコシステム」へと解放したとき、君たちのチームの生産性は数倍に跳ね上がる。それが、技術の真髄を理解した者にのみ許される、真のプロダクト開発だ。
さあ、GUIから卒業し、コードとしてデザインを記述せよ。その先には、誰も見たことのない景色が広がっているはずだ。