【実務・中級編】オープンソースのUI/UXデザインツール「Penpot」とは？Figmaからの移行手順とメリットを徹底解説 – UI/UX・デザインツール活用バイブル

Penpotが変えるデザイン・開発の未来：Figmaからの移行と現場を加速する実践知見

テックリードの皆さん、日々のデザインシステム管理や開発チームとのハンドオフに疲弊していないか？
「デザインの微修正がコードに反映しきれていない」「ライセンス費用の高騰に頭を悩ませている」「クローズドなエコシステムへの依存にリスクを感じる」——もし、これらの課題に少しでも共感するなら、今すぐPenpotに注目すべきだ。

Penpotは、単なる「Figmaのオープンソース版」という安直なポジションに収まるツールではない。「デザイナーと開発者の共通言語（ネイティブSVG）で完全に同期する」という、真にプロフェッショナルな思想で作られた次世代のデザイン・プロトタイピングプラットフォームだ。

本稿では、Penpotの基本概要からFigmaからの移行手順、そして現場の生産性を極限まで引き上げるためのキラーテクニック、設定ファイルのベストプラクティスまで、実務に直結する知見を余すところなく伝授する。

—

1. なぜ今、Penpotなのか？開発者とデザイナーを繋ぐオープンソースの真価

多くのデザインツールが「デザイナーのためのもの」として進化してきた歴史の中で、Penpotは最初から「開発者との協業」を前提に設計されている。

SVGネイティブという圧倒的なアドバンテージ

Figmaをはじめとする多くのツールは、内部独自のデータ構造（バイナリや独自JSON）を採用しており、Git管理やコードベースへの統合には常にコンバーターやプラグインの介在が必要だった。

対してPenpotは、ファイルフォーマットそのものがSVGと標準的なWeb標準（CSS Flexbox/Grid）で構成されている。
つまり、Penpot上で描画されたレイアウトは、そのままプロダクションコードの概念（CSSレイアウト）と1:1で一致する。デザイナーが作ったレイアウトが「なぜかコードにすると崩れる」という、あの不毛なラリーを根絶できるのだ。

オープンソース（Self-Host）がもたらす開発環境の解放

データ主権の完全な掌握: 自社サーバー（オンプレミス）やセキュアなプライベートクラウドへのデプロイが可能。金融、医療、政府系など、厳格なセキュリティ要件が求められるプロジェクトでも導入障壁が低い。
ベンダーロックインからの脱却: サブスクリプション価格の改定や、突然の買収・仕様変更に振り回されるリスクがない。
拡張性とコントリビューション: コアがオープンソースであるため、自社のワークフローに合わせて内部挙動をカスタマイズしたり、必要な機能を自らコントリビュートできる。

—

2. Figmaからの移行手順：移行の壁をゼロにするステップ

「移行コストが高い」というのは、新しいツール導入における最大の言い訳だ。しかし、Penpotへの移行は驚くほどスムーズに行える。

ステップ 1: アセットとコンポーネントの棚卸し

移行前に、Figma上で肥大化した不要なコンポーネントやスタイルを整理する。PenpotはCSS GridやFlexboxの概念を強く持っているため、このタイミングでオートレイアウトの構造を見直すと、移行後のクオリティが跳ね上がる。

ステップ 2: .figファイルのインポート

Penpotは`.fig`ファイルのインポート機能を備えている。
1. Penpotのダッシュボードから「Import」を選択。
2. 対象の`.fig`ファイルをアップロード。
3. 構造、テキスト、カラー、コンポーネントが自動的にPenpotのネイティブオブジェクト（SVG構造）に変換される。

> ⚠️ 現場の注意点（移行時のギャップ）:
> Figma独自の複雑なコンポーネントプロパティや高度なバリアント表現は、インポート時に手動調整が必要な場合がある。特にAuto LayoutからPenpotのCSS Grid/Flexboxへのマッピングにおいて、レイアウトの制約（Constraints）を再確認すること。

—

3. 開発スピードを劇的に高める！隠れたキーボードショートカット

マウス操作を排除し、キーボードだけで完結させることは、デザイン速度を倍増させるだけでなく、フロー状態を維持するために不可欠だ。Penpotの洗練されたショートカットの中でも、特にテックリード・エンジニアが覚えるべきものを厳選した。

—

4. チーム開発で役立つ設定の共有化ルール

デザインシステムをスケールさせるには、「誰が作っても同じ品質になる」ガバナンスが不可欠だ。Penpotをチームで運用する際は、以下のルールをコード管理と同期させよう。

1. デザイントークンの単一情報源（SSoT）の確立
カラーパレット、タイポグラフィ、スペーシングの定義を、Penpotの「Shared Libraries」としてチーム全体で強制共有する。
2. CSSプロパティとの用語統一
デザイナー側でも「Padding」「Margin」「Gap」「Flex Direction」といったCSSの共通語彙を使用するルールを敷く。これにより、Inspectモード（開発者モード）で表示されるCSSコードをそのままプロダクションにコピペできるようになる。
3. Gitワークフローとの統合
Penpotのデータを定期的にエクスポートし、デザインの変更履歴をGitで管理するパイプラインを構築する。これにより「いつ、誰が、どの仕様を変更したか」をコードのコミットログと完全に紐づけられる。

—

5. 実用的な設定ファイル（YAML/JSON）のベストプラクティス

Penpotのデザインシステムを、フロントエンド（React / Vue / Tailwind CSSなど）のコードベースへシームレスにブリッジするための、デザイントークン定義（JSON/YAML）のベストプラクティス構成例を提示する。

このJSONを起点にして、Style Dictionaryなどのツールを使えば、Penpotで定義したカラーやスペーシングを、CSS変数はもちろん、TypeScriptの型定義やTailwindのconfigに自動変換できる。

`design-tokens.json` (デザイントークンのマスター定義)

{
“$schema”: “https://raw.githubusercontent.com/design-tokens/community-group/main/format/schema.json”,
“color”: {
“brand”: {
“primary”: {
“value”: “#0F172A”,
“type”: “color”,
“comment”: “メインブランドカラー（Slate 900ベース）。テキストや主要なボタンに使用。”
},
“accent”: {
“value”: “#38BDF8”,
“type”: “color”,
“comment”: “アクセントカラー（Sky 400）。インタラクティブな要素やフォーカス状態に適用。”
}
},
“feedback”: {
“success”: { “value”: “#22C55E”, “type”: “color”, “comment”: “成功・完了トースト用” },
“error”: { “value”: “#EF4444”, “type”: “color”, “comment”: “エラー・破壊的アクション用” }
}
},
“spacing”: {
“xs”: { “value”: “4px”, “type”: “dimension”, “comment”: “最小パディング・ギャップ” },
“sm”: { “value”: “8px”, “type”: “dimension”, “comment”: “インライン要素間のマージン” },
“md”: { “value”: “16px”, “type”: “dimension”, “comment”: “標準的なカード内パディング” },
“lg”: { “value”: “24px”, “type”: “dimension”, “comment”: “セクション間隔” },
“xl”: { “value”: “32px”, “type”: “dimension”, “comment”: “ページレイアウトのマージン” }
},
“typography”: {
“fontFamily”: {
“sans”: {
“value”: “Inter, system-ui, -apple-system, sans-serif”,
“type”: “fontFamily”,
“comment”: “アプリケーション全体の標準フォントファミリー”
}
},
“fontSize”: {
“sm”: { “value”: “0.875rem”, “type”: “dimension”, “comment”: “キャプション、メタ情報” },
“base”: { “value”: “1rem”, “type”: “dimension”, “comment”: “本文テキストの基本サイズ” },
“lg”: { “value”: “1.25rem”, “type”: “dimension”, “comment”: “サブ見出し（H3）” },
“xl”: { “value”: “1.5rem”, “type”: “dimension”, “comment”: “セクション見出し（H2）” }
}
}
}

活用フロー

1. Penpot上で上記のトークン値に準拠したカラースタイルとテキストスタイルを作成。
2. 開発側は上記の `design-tokens.json` をビルドプロセスに組み込み、デザイナートークンをコードへ自動同期。
3. これにより、デザイン変更（例: ブランドカラーの微調整）が発生した際も、JSONを更新してビルドを走らせるだけで、デザインとコードの乖離を完全に防ぐことができる。

—

結びにかえて：エンジニアリングの視点でデザインを再定義する

Penpotの導入は、単に「コスト削減のツール選び」ではない。それは、デザインとコードの境界線を限りなくゼロにし、開発組織全体の爆発的なアジリティを生み出すための構造改革だ。

オープンソースの自由度と、Web標準に準拠した堅牢なアーキテクチャを持つPenpotを使いこなし、チームの生産性を次の次元へと引き上げてほしい。今日からあなたのプロジェクトでも、このオープンソースの牙城を取り入れてみてはどうだろうか。

1. なぜ今、Penpotなのか？ 開発者とデザイナーを繋ぐオープンソースの真価

SVGネイティブという圧倒的なアドバンテージ

オープンソース（Self-Host）がもたらす開発環境の解放

2. Figmaからの移行手順：移行の壁をゼロにするステップ

ステップ 1: アセットとコンポーネントの棚卸し

ステップ 2: .figファイルのインポート

3. 開発スピードを劇的に高める！隠れたキーボードショートカット

4. チーム開発で役立つ設定の共有化ルール

5. 実用的な設定ファイル（YAML/JSON）のベストプラクティス

`design-tokens.json` (デザイントークンのマスター定義)

活用フロー

結びにかえて：エンジニアリングの視点でデザインを再定義する

1. なぜ今、Penpotなのか？開発者とデザイナーを繋ぐオープンソースの真価