FigmaからPenpotへの移行で失敗しないための注意点とSVGインポートの極意
テックリードの皆さん、こんにちは。オープンソースのプロトタイピング・デザインツール「Penpot」の波が、いよいよ我々の開発現場にも本格的に押し寄せてきている。
Figmaが業界標準となって久しいが、プライバシー規制の厳格化、ベンダーロックインへの懸念、そして何よりも「デザインとコードの完全な融合（SVGファーストのアーキテクチャ）」を求めて、セルフホスト可能なPenpotへ移行を検討、あるいはすでに実行に移しているチームも多いはずだ。
しかし、ここで多くのチームが壁にぶぶる。「Figmaから資産を移行したら、レイヤーがバラバラになり、フォントが崩れ、オートレイアウトが意図しない挙動を起こす」という悲劇だ。
今回は、FigmaからPenpotへの移行を完全無欠に成功させ、開発スピードを逆に加速させるための実践的な知見を、プロのエンジニアリングの視点から余すところなく伝授する。
—
1. なぜ移行でデータが崩れるのか？ 構造的差異の理解
移行のトラブルシューティングに入る前に、敵（アーキテクチャの違い）を知ろう。
- Figma: 独自バイナリ形式（`.fig`）。SVGやCSSの概念を独自解釈でラップしているため、レイヤーのネストやエフェクトの持ち方がプロプライエタリ。
- Penpot: 完全なSVGネイティブ。内部データ構造は純粋なSVGとCSSのプロパティに極めて近い。
この違いが原因で、Figma側の「力技のグループ化」や「曖昧な制約（Constraints）」が、Penpotにインポートされた瞬間にパースエラーや意図しないレイアウト崩れを引き起こす。
—
2. SVGインポートのコツとレイヤー構造の事前整理
FigmaからPenpotへ資産を安全に持ち込むための最短ルートは、一括インポートではなく「SVGを介したクリーンな移行」だ。
Figma側での事前準備（リファクタリング）
移行ボタンを押す前に、Figma側で以下の「デトックス作業」を行う。これだけで移行後の手戻りが8割減る。
1. グループ（Group）の撲滅:
Figmaの「Ctrl/Cmd + G」によるグループは、Penpotでは意味不明な`
2. マスク処理の適正化:
複雑なブーリアン演算やマスクは、SVG書き出し時に予期せぬクリップパスを生む。可能な限りパスファインダーで結合（Flatten）しておく。
3. ストロークのアウトライン化:
線の太さ（Stroke）の保持はツール間で解釈が分かれやすい。重要度の高いアイコンやロゴは、Figma側で `Ctrl/Cmd + Shift + O` でアウトライン化（パス化）してからSVGとしてエクスポートする。
—
3. フォント置換のトラブルシューティング
移行時、最もエンジニアを悩ませるのがタイポグラフィの崩れだ。Figmaで使っていたローカルフォントやプロプライエタリなフォントが、Penpotの環境（特にセルフホスト環境）で正しく解決されない。
対策: Webフォントファーストへの切り替え
PenpotはCSSの `@font-face` や Google Fonts と極めて高い親和性を持っている。
- 症状: インポート後に文字が重なる、あるいはフォントファミリーがフォールバック（Sans-serif等）に落ちる。
- 原因: ホストサーバー側で該当フォントがロードされていない、またはフォントウェイトの数値マッピングがずれている。
- 解決策:
1. Penpotのチーム設定（またはセルフホストのグローバル設定）にあらかじめプロジェクトで使用するカスタムフォント（Woff2形式推奨デザインシステム用フォント）を登録する。
2. Figma側でテキストスタイルの命名規則を、CSSの `font-family` / `font-weight` と完全に一致させておく。
—
4. 開発スピードを劇的に高めるキーボードショートカット
Penpotを使いこなす上で、Figmaとの操作性の違いにフラストレーションを感じるエンジニアも多いはずだ。以下のショートカットを体に叩き込み、マウス操作を排除せよ。
| 操作 | Penpot ショートカット | 備考・Figmaとの違い |
| :— | :— | :— |
| コンポーネント化 | `Ctrl + Alt + K` (`Cmd + Option + K`) | Figmaと同じ。モダンツールの標準。 |
| グリッド/レイアウト切替| `Shift + G` | CSS Grid / Flexbox的挙動の確認に必須。 |
| レイヤーのロック | `Ctrl + Shift + H` | 誤操作を防ぐための鉄板ショートカット。 |
| コードインスペクト表示| `Ctrl + Alt + I` | CSSプロパティを瞬時に取得し、エディタへ直行。 |
| ズーム・トゥ・フィット| `Shift + 1` | ボード全体を俯瞰する。 |
—
5. チーム開発で役立つ設定の共有化ルール
Penpotをチームに導入する際、野良デザインが乱立するのを防ぐために、デザインシステムの「シングル・ソース・オブ・Truth（信頼できる唯一の情報源）」を確立する必要がある。
1. カラーパレットとタイポグラフィのトークン化:
ローカルカラーを絶対に許容しない。必ず「Libraries」機能を用いて、全チームメンバーが同一のカラーパレット（Design Tokens）を参照するように強制する。
2. CSS Flexboxベースのレイアウト思想の徹底:
Penpotのレイアウト機能は、Web開発のCSS Flexboxと完全に同等に設計されている。Figmaの「オートレイアウト」の感覚ではなく、「CSSの親要素・子要素の関係性」を意識してコンポーネントを組むよう、デザイナーとエンジニア間で共通言語を持つこと。
—
6. 【実践】デザインシステム連携のための設定ファイル構成例
Penpotや外部ツールとの連携、あるいはCI/CDパイプライン上でデザインシステムを同期させる際、設定ファイル（JSON/YAML）の整備が不可欠だ。
以下に、実務で即座に使えるデザインドキュメントおよびトークン定義のベストプラクティス構成例を提示する。
`design-tokens.json` (デザインシステム・カラー/タイポグラフィ定義)
このJSONをベースに、Style Dictionary等を用いてCSS変数やTailwindのConfigにトランスパイルする。
{
“$schema”: “https://design-tokens.github.io/community-format/format.json”,
“color”: {
“primary”: {
“500”: {
“value”: “#0D9488”,
“type”: “color”,
“comment”: “メインブランドカラー（Teal 600相当）”
},
“600”: {
“value”: “#0F766E”,
“type”: “color”,
“comment”: “ホバー時のインタラクティブカラー”
}
},
“neutral”: {
“900”: {
“value”: “#18181B”,
“type”: “color”,
“comment”: “ベーステキストカラー（Zinc 900）”
},
“100”: {
“value”: “#F4F4F5”,
“type”: “color”,
“comment”: “バックグラウンド・サーフェスカラー”
}
}
},
“typography”: {
“fontFamily”: {
“sans”: {
“value”: “Inter, system-ui, -apple-system, sans-serif”,
“type”: “string”
},
“mono”: {
“value”: “JetBrains Mono, Fira Code, monospace”,
“type”: “string”
}
},
“fontSize”: {
“sm”: { “value”: “0.875rem”, “type”: “dimension” },
“base”: { “value”: “1rem”, “type”: “dimension” },
“lg”: { “value”: “1.125rem”, “type”: “dimension” },
“xl”: { “value”: “1.25rem”, “type”: “dimension” }
}
}
}
`penpot-sync.yml` (GitHub Actions による自動同期・検証フローの例)
デザイン資産（SVGアイコンなど）がリポジトリにプッシュされた際、あるいは定期実行でPenpotのAPI等と連携するためのCI設定の骨組みだ。
name: Design Assets Sync & Validate
on:
push:
paths:
- ‘design/svgs/’
- ‘tokens/’
jobs:
validate-and-build:
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: ’20’
- name: Install Dependencies
run: npm ci
# SVGの最適化（SVGOを使用し、Penpotインポート時に崩れの原因となる不要なメタデータを削除）
- name: Optimize SVGs for Penpot
uses: svg/svgo-action@v3
with:
root: ‘design/svgs’
config: ‘./svgo.config.js’
- name: Validate Design Tokens
run: npm run tokens:validate
env:
TOKEN_PATH: ‘./tokens/design-tokens.json’
—
結びに代えて
FigmaからPenpotへの移行は、単なる「ツールの乗り換え」ではない。それは、デザインをよりエンジニアリングに近い論理的な構造へと昇華させ、プロダクトのコードベースとデザインシステムを直結させるためのパラダイムシフトである。
最初はレイアウトや操作性の違いに戸惑うかもしれない。しかし、SVGネイティブのクリーンな構造と、オープンソースならではの拡張性を手に入れた開発チームの生産性は、間違いなく次のステージへと突入する。
さあ、古いバイナリの呪縛を断ち切り、真のオープン・デザインの領域へ踏み出そう。