Penpotで実現する「疎結合」なデザインシステム：スケーラブルなコンポーネント戦略の極致
UI/UXの現場で「デザインツール」を単なる作図ソフトと捉えているうちは、真の効率化には到達できない。PenpotがFigmaのような先行ツールと決定的に異なるのは、そのオープンなアーキテクチャにある。SVGネイティブ、CSS Grid/Flexbox準拠という性質を理解すれば、デザイナーとエンジニアの境界線は溶ける。
本稿では、Penpotを単なるデザインツールとしてではなく、「デザインコードの単一ソース」として制御し、パイプラインに組み込むための高度な知見を共有する。
—
1. コンポーネント設計の「原子構造」：レイアウト駆動の階層化
Penpotにおいて最も陥りやすい罠は、コンポーネントを「見た目のテンプレート」として作成することだ。真のベストプラクティスは、CSSのボックモデルを意識した構造化である。
- Atomic Designの再定義:
Penpotのコンポーネントは、必ず「Flexコンテナ」を最上位に配置せよ。絶対配置（Absolute）は崩壊の元だ。
- バリアントの最適化:
バリアントを「状態の変化」として定義するのは当然だが、Penpotではバリアントセット内のプロパティを命名規則（例: `state=hover`, `type=primary`）で統一し、後述するAPIによる抽出時にメタデータとしてパース可能にしておく必要がある。
- 「隠し」プロパティの活用:
プロトタイピングの段階で、表示/非表示を切り替えるプロパティを戦略的に仕込むことで、エンジニアがCSSを書く際の「条件分岐」を視覚化できる。
—
2. ライブラリ管理の「DevOps的」アプローチ
デザインシステムをチームで共有する際、Penpotの「Shared Libraries」をただ使うだけでは不十分だ。大規模チームでは、「コアライブラリ（基盤）」と「フィーチャーライブラリ（機能）」の分離が必須となる。
- ライブラリの依存関係管理:
コア（カラー、タイポグラフィ、スペーシング）を別ファイルに切り出し、各プロジェクトへは「リンク」として配布する。これにより、コアの変更が全プロダクトに即時伝搬するが、事故を防ぐために「ステージング環境用のライブラリファイル」を別個に持つ運用を推奨する。
—
3. Penpot APIをハックする：完全自動化パイプライン
Penpotの真骨頂は、そのAPIにある。GUIでポチポチとアセットを書き出す時代は終わった。Node.jsでスクリプトを書き、デザインデータから直接CSS/JSONトークンを生成し、GitHub Actionsに流し込む。
実践：Penpotからデザイントークンを抽出するスクリプト（概念）
/
- Penpot APIからコンポーネント情報を抽出し、
- Tailwind CSSの設定ファイルへ変換するパイプラインの断片
/
const fetchPenpotData = async (fileId, apiKey) => {
// Penpot API経由でJSON構造を取得
const response = await fetch(`https://design.your-company.com/api/files/${fileId}`, {
headers: { ‘Authorization’: `Bearer ${apiKey}` }
});
return await response.json();
};
const generateTailwindConfig = (nodes) => {
// SVGネイティブなPenpotの構造を解析
// node.stylesからカラーやスペーシングを抽出
const tokens = nodes.filter(n => n.type === ‘token’);
return {
theme: {
extend: {
colors: tokens.reduce((acc, t) => ({ …acc, [t.name]: t.value }), {})
}
}
};
};
このパイプラインが実現する世界:
1. デザイナーがPenpotでカラーパレットを更新。
2. CIが検知し、API経由でデータを取得。
3. 自動的にCSS/SCSS/Tailwind変数を生成し、PRを自動作成。
4. エンジニアは「デザインを確認して実装する」ステップを完全にスキップする。
—
4. パフォーマンス最適化ハック：メモリを食いつぶさないために
Penpotのブラウザ負荷を最小化し、大規模なデザインシステムを快適に操作するための「低レイヤ」の心得。
- インスタンスのネスト制限:
コンポーネントの入れ子構造（Nested Instances）が5層を超えると、ブラウザのメモリ消費は指数関数的に増大する。抽象度の高いコンポーネントは、可能な限り「フラットな構成」で再設計せよ。
- アセットのSVG最適化:
インポートするアイコン等は、必ずSVGO等でパスを最適化してからPenpotに入れること。不要なメタデータやパスの冗長性は、そのままレンダリング負荷に直結する。
- レイヤー命名の正規化:
APIを叩く際、レイヤー名が汚いとパース処理で計算量が跳ね上がる。チーム全体で命名規則（BEMをデザインレイヤーにも適用する）を徹底させることは、単なる規律ではなく「技術的なパフォーマンス対策」である。
—
最後に：デザイナーとエンジニアの共通言語
Penpotを極めるということは、「デザインをコードで語れるようになる」ということだ。
我々のようなアーキテクトにとって、ツールは単なる手段に過ぎない。重要なのは、デザインシステムが「動的なエンティティ」として、プロダクトの成長とともに呼吸し続けることだ。
PenpotのAPIを叩き、デザインの変更をコードへと自動変身させるパイプラインを構築したとき、君たちは初めて「デザイナーが書いたデザイン」と「エンジニアが書いたコード」の間にあった、無駄な摩擦を根絶できるはずだ。
さあ、GUIの檻から抜け出し、コードの力でデザインを支配せよ。