FigmaからPenpotへの移行は「脱出」ではない。Web標準という名の聖域への帰還だ。
Figmaという「閉じた楽園」から、オープンソースの旗手であるPenpotへ移行する。多くのチームがこの移行で躓くのは、Figmaの独自のレイヤー・カプセル化（オートレイアウトや絶対配置の独自実装）を、そのままSVGやCSS Grid/Flexboxの文脈へ無理やり流し込もうとするからだ。
本稿では、単なるインポートのTipsを超え、Penpotの内部アーキテクチャを理解し、CI/CDパイプラインの一部として移行を自動化するための、極限のエンジニアリング・ハックを共有する。
—
1. データ構造の断絶を埋める：FigmaからSVGへの「正規化」
Figmaの`.fig`ファイルはブラックボックスだ。これをPenpotのCanvas（SVGベース）に持ち込む際、最も深刻なのが「座標系の浮動小数点エラー」と「構造のフラット化」である。
対策：SVG正規化スクリプトの導入
Figmaから直接インポートせず、一度中間ファイルとしてSVGを生成し、独自のCLIツールで「Penpotフレンドリーな構造」に整形するパイプラインを構築せよ。
Node.jsを用いたSVG正規化スクリプト（抜粋）:
/
- FigmaからエクスポートしたSVGの不要なメタデータを削除し、
- Penpotのグループ構造を維持するためにidを正規化するスクリプト
/
const svgo = require(‘svgo’);
const fs = require(‘fs’);
async function normalizeForPenpot(svgPath) {
const svgData = fs.readFileSync(svgPath, ‘utf8’);
// PenpotはCSS属性を優先するため、インラインスタイルを属性値に変換する
const result = await svgo.optimize(svgData, {
plugins: [
‘cleanupIDs’, // idをユニーク化
‘removeDimensions’, // viewBoxを優先させる
{ name: ‘convertStyleToAttrs’ }, // style属性を解体して独立させる
]
});
fs.writeFileSync(‘optimized.svg’, result.data);
}
—
2. フォント置換の地獄：Web標準との完全同期
Figmaでは「ローカルフォント」が特権的に扱われるが、PenpotはWebフォントを前提とする。移行時にフォントが崩れる最大の原因は、Font Familyのネーミング衝突と、サブセット化されていないWebフォントのロード負荷だ。
- 極限の最適化戦略:
- Figmaで使用していたフォントをすべて `Google Fonts` または `Self-hosted WOFF2` としてPenpotに事前登録する。
- CSSカスタムプロパティ（デザインシステム同期）: Penpotの「Design Tokens」機能を利用し、フォントファミリーを直接CSS変数として読み込ませる。これにより、開発側のコードとPenpot内の定義が完全に一致する。
—
3. Penpot APIを叩く：プロトタイプ自動生成パイプライン
Penpotの真骨頂は、そのAPI経由で「デザインの正解」をプログラム的に制御できることにある。GUIでの手動修正を諦め、Penpot API + 独自のPythonクライアントでレイヤー構造を動的に生成・更新せよ。
自動化スクリプトのアーキテクチャ例:
import requests
PenpotのAPIを使用して、デザインシステムを自動アップデートする
class PenpotAutomation:
def __init__(self, api_token, base_url):
self.headers = {“Authorization”: f”Token {api_token}”}
self.base_url = base_url
def update_component_grid(self, board_id, layout_config):
“””
Figmaのオートレイアウトから変換された情報を、
PenpotのFlexboxエンジンに直接流し込む。
“””
endpoint = f”{self.base_url}/api/v1/boards/{board_id}”
# ここで直接Flexコンテナの制約をJSONで注入する
response = requests.patch(endpoint, json=layout_config, headers=self.headers)
return response.status_code
—
4. メモリ消費とパフォーマンスのハック
PenpotはブラウザベースのSVGレンダラーである。1ファイルに数百のレイヤーを詰め込むと、DOMの肥大化によりメモリリークが発生する可能性がある。
- レイヤー・セグメンテーション: 1ファイル1プロジェクトというFigmaの慣習を捨てよ。機能ドメインごとに`.penpot`ファイルを分割し、`Shared Libraries`として結合するモジュラー構造を採用する。
- イベントループの解放: 複雑なベクターを描画する際は、ブラウザのメインスレッドを止めないよう、大規模なSVGコンポーネントはインポート時に「ビットマップ・キャッシュ」化し、開発フェーズに入るまでベクトル情報をオフにする手法をとる。
—
結論：ツールに合わせるのではなく、Web標準を実装せよ
FigmaからPenpotへの移行において、「完全に同じ見た目」を追求するのは二流のやり方だ。真のエキスパートは、「Figma上の表現を、ブラウザが解釈可能なCSS/SVGの論理構造へと翻訳するプロセス」自体を設計する。
Penpotは、あなたが書くコードと、デザイナーが触るデザインを「同じ言語（CSS/SVG）」で会話させるための架け橋だ。このツールを使いこなすということは、デザインと実装の境界線を消滅させ、究極のDevOpsデザイン環境を構築することに他ならない。
さあ、GUIのクリック作業から解放され、コードでデザインを制御する真のエンジニアリングを始めよう。