こんにちは！プロダクトデザインの現場で、日々UIとコードの境界線を溶かしているエンジニアの先輩です。
「Figmaのサブスク費用やオープンソースの思想に共感して、チームでPenpotへ移行したい。だけど、今まで積み上げてきた資産が移行で崩壊するのが怖い……」
そんな悩みを抱えていませんか？
大丈夫、安心してください。オープンソースのオープンなベクターベース・プロトタイピングツールである「Penpot」は、Web標準技術（SVGやCSS Flexbox/Grid）をそのままデザインの土台に据えた、僕たちエンジニアにとって涙が出るほど愛おしいツールです。
今回は、FigmaからPenpotへ、デザイナーもエンジニアも絶望しない「完全移行」を果たすための極限の知見を授けましょう。これをマスターすれば、明日の移行作業が劇的にスムーズになり、チームのワークフローが加速しますよ。
—
1. なぜPenpotなのか？（ツールの本質を知る）
移行作業に入る前に、私たちがこれから向き合う「Penpot」というツールの本質を軽く整理しておきましょう。
Figmaが「独自のクラウド閉塞エコシステム」だとすれば、Penpotは「Web標準のオープンエコシステム」です。内部データはすべてSVGとCSSをベースに構築されており、デザインデータそのものがコード（SVG）と極めて親和性が高い。つまり、デザイナーが作ったレイアウトが、そのままフロントエンドのメンタルモデルと一致するよう設計されています。
インストールと最初のセットアップ
Penpotの素晴らしいところは、SaaS版だけでなく、Dockerを使ってローカルや社内サーバーに完全無料で完全な環境を構築できる点です。
まずはDocker ComposeでローカルにPenpotを立ち上げてみましょう。これが最も確実でセキュアな検証環境になります。
docker-compose.yml
Penpotをローカル環境で爆速で立ち上げるための設定ファイル
version: ‘3.8’
services:
penpot-frontend:
image: penpot/frontend:latest
ports:
- “9001:8080”
environment:
- PENPOTS_PUBLIC_URI=http://localhost:9001
depends_on:
- penpot-backend
- penpot-exporter
penpot-backend:
image: penpot/backend:latest
environment:
- PENPOT_DATABASE_URI=postgresql://penpot:penpot@penpot-postgres/penpot
- PENPOT_REDIS_URI=redis://penpot-redis:6379
depends_on:
- penpot-postgres
- penpot-redis
penpot-exporter:
image: penpot/exporter:latest
penpot-postgres:
image: postgres:15-alpine
environment:
- POSTGRES_INITDB_ARGS=–encoding=UTF-8
- POSTGRES_DB=penpot
- POSTGRES_USER=penpot
- POSTGRES_PASSWORD=penpot
penpot-redis:
image: redis:7-alpine
ターミナルで `docker compose up -d` を叩き、ブラウザで `http://localhost:9001` にアクセスすれば、あなただけの独立したPenpot環境の完成です。
—
2. 移行の最大の壁：FigmaからPenpotへのデータ移行戦略
現在、PenpotはFigmaのネイティブ形式（`.fig`）を直接完璧にインポートすることはできません。ここに多くのチームが躓く罠があります。
「じゃあ、どうやって移行するのか？」
答えは 「SVGを共通言語とした段階的移行（Incremental Migration）」 です。
すべてを一度に移行しようとせず、以下のステップを踏むことで、データ崩れを最小限に抑えられます。
コツ①：Figma側でのレイヤー構造の「デトックス」
Figmaで適当にグループ化されたレイヤーや、不必要なマスク、絶対配置（Absolute Positioning）の乱用は、Penpotへの移行時に大爆発を起こします。
- オートレイアウト（Auto Layout）を極力Flexboxに寄せる:
FigmaのAuto Layoutは非常に高機能ですが、Penpotのレイアウトエンジン（CSS Flexbox/Gridの概念を忠実に再現）に持っていくと、パディングやネストの解釈でズレが生じます。Figma側で「グループ」ではなく「意味のあるフレーム（Frame）」単位で整理し、ネストを浅くしましょう。
- 不要なクリッピングパスを削除する:
パスファインダーで結合できるものは結合し、無駄なレイヤー階層を削ぎ落としておくことが、SVGエクスポート時の美しさに直結します。
—
3. SVGインポートの精度を極限まで高める技術
Figmaから個別のコンポーネントや画面をSVGで書き出し、Penpotにインポートする際の「黄金ルール」を伝授します。ここを間違うと、テキストがアウトライン化されて編集できなくなったり、謎の余白が生まれたりします。
1. テキストは「アウトライン化」するか「Webフォントを同期」するか
SVGインポートの最大の敵はフォントです。
- デザインの見た目を完璧に維持したい場合（LPやバナーなど）：
Figma側でテキストを右クリックし、「アウトライン化（Outline Stroke / Flatten）」してからSVGエクスポートします。これでフォントの差異による崩れは100%防げます（ただし文字編集はできなくなります）。
- コンポーネントとして再利用・テキスト編集したい場合：
Penpot側にあらかじめ同じフォント（Google Fontsなど）をインポート・有効化しておき、SVG内の `
2. SVGクリーンアップの習慣
Figmaから書き出したSVGには、デザインツール固有のメタデータ（`sketch:type` や不要な `id`、コメントなど）がゴチャゴチャと含まれています。これらがPenpotでのレイヤー名を汚す原因になります。
インポート前に、CLIツールやエディタでSVGを綺麗に掃除（SVGO等の活用）するか、Penpotのインポートプレビューで確認する習慣をつけましょう。
—
4. フォント置換とスタイルのトラブルシューティング
移行後に「文字が妙にはみ出る」「行間が詰まる」という現象に直面したら、それはフォントメトリクス（文字の上下の余白やベースラインの計算方法）の差異が原因です。
対策：デザインシステム単位での「トークン」の再定義
Penpotの真骨頂は、CSS Variables（カスタムプロパティ）と直結した「カラー」「タイポグラフィ」のスタイル管理システムにあります。
1. フォントのインポート: Penpotのプロジェクト設定から、Figmaで使用していたものと同じWebフォント（例: InterやNoto Sans JPなど）を確実に読み込ませます。
2. スタイルの手動再適用: グローバルなタイポグラフィースタイル（H1, Body等）は、SVGインポートに頼らず、Penpotのスタイルパネルで新しく定義し直すことを強くおすすめします。コンポーネントの数が多い場合は、デザインシステムの基盤（Primitives）だけを先にPenpot上で手動構築し、子パーツをSVGで流し込むのが最も破綻が少ないです。
—
5. 精度高い「Hello World」動作確認プロトコル
さて、理論はここまでにして、実際に「Figmaで作ったボタンパーツをSVG経由でPenpotにインポートし、正しくインタラクションが動くか」というHelloWorld的な動作確認を行いましょう。
Step 1: Figmaでの準備
1. Figmaで 120x40px のフレームを作成。
2. 中にテキスト「Click Me」を配置し、Auto Layoutで上下左右中央揃えにする。
3. フレームを選択し、右下メニューから SVGとしてエクスポート。
Step 2: Penpotへのインポートと検証
1. Penpotで新規プロジェクトを開き、ワークスペースに先ほどのSVGファイルをドラッグ＆ドロップ。
2. 【チェックポイント】 インポートされたオブジェクトを選択し、右サイドバーの「Layout」パネルを確認します。
- Flexboxのプロパティ（方向、パディング、アライメント）が意図通りに維持されているか？
3. 【インタラクションテスト】
- そのオブジェクトをコンポーネント化（Component）する。
- ホバー時のバリエーション（Variant）を追加し、プロトタイプタブで画面遷移や状態変化を結びつけてみる。
これがスムーズに完了すれば、あなたのPenpot移行プロジェクトは成功したも同然です！
—
おわりに：オープンなデザインの未来へ
FigmaからPenpotへの移行は、単なる「ツールの乗り換え」ではありません。それは、クローズドなエコシステムから、Web標準とオープンソースの思想に基づいた、より自由でエンジニアリングに近いデザインプロセスへのパラダイムシフトです。
最初はレイアウトの癖やフォントの扱いに戸惑うこともあるかもしれませんが、一度このワークフローをマスターすれば、デザイナーとエンジニアの間の「共通言語」が圧倒的にクリアになります。
さあ、今日の午後から、あなたのチームでもローカルにPenpotを立ち上げ、新しいデザインの旅を始めてみませんか？
毎日の作業が、驚くほど軽やかになりますよ！