はじめに
デザインツール「Figma」をご存知でしょうか。現在最もメジャーなデザインツールの一つで、私も1年以上仕事で愛用していました。
しかし今回、小規模プロジェクトで簡単なUIデザインを作成する際、コストなどとの兼ね合いから penpot というFigmaライクな無料のデザインツールを試してみました。
本記事では、ローカル環境での個人利用だけでなく、EC2環境にpenpotをデプロイして複数人でのデザイン確認・編集を可能にした経験を共有します。
penpotとは？（Figmaとの比較）
penpotは、自分の環境にホストできるFigmaのようなオープンソースのデザインツールです。
公式サイト: https://penpot.app/
主な特徴比較
| 項目 | Figma | penpot |
|---|---|---|
| ホスティング | クラウドのみ | セルフホスト・クラウド両対応 |
| セキュリティ | Figma社依存 | 自社環境依存 |
| 費用体系 | 無料プランはあるがファイル数など制限あり （詳細） | セルフホストの場合ライセンス費不要（詳細） ※サーバー運用は必要 |
| 複数人作業 | 〇 | 〇 |
| AI機能 | あり(FigmaMake,FigmaAIなど) | なし |
最大の魅力は「自社環境にホストできる自由度」 です。
ただし、機能や使い勝手はFigmaと比べて劣りますし、FigmaにあるようなAI機能などは搭載されていないです。
ローカル環境での個人利用の環境構築
ここからは一人で利用するときの環境構築について書きます。複数の方法があります。
https://help.penpot.app/technical-guide/getting-started/
Docker環境での構築
公式でも一番最初に書いている方法です。
公式ドキュメント: https://help.penpot.app/technical-guide/getting-started/docker/
環境情報
私は以下の環境で構築しました。
- WindowsのWSL2
- Docker Engine + Docker Compose
セットアップ手順
-
設定ファイルのダウンロード
curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml -
コンテナの起動
sudo docker compose -p penpot -f docker-compose.yaml up -d
-
アクセスとセットアップ
- ブラウザで http://localhost:9001/ にアクセス
- 任意のメールアドレスでアカウントを作成
- penpotロゴをクリックしてプロジェクト画面へ移動
このように前提環境があれば簡単にセットアップできました！
非公式のビルド済みデータ
有志によるビルド済みデータも配布されています。お手軽ですが公式ではない点に注意。
GitHub リポジトリ: https://github.com/author-more/penpot-desktop/releases
EC2での複数人利用
チーム内の複数人でのデザイン確認・編集を可能にするため、社内のAWSのEC2環境にもデプロイしました。
基本的にはローカルでのDockerの環境構築と同じなので詳細は省略します。
環境情報
- インスタンス: AWS EC2（Amazon Linux）
- 構成: Docker + Docker Compose
チーム利用の設定
EC2のプライベートアドレスなど（例：http://XX.XXX.XXX.XXX:9001/）
で、penpotを見れるようになったら以下を行います。
アカウント作成と招待
-
各メンバーがそれぞれアカウント作成
- EC2のpenpotにアクセス
- 個別にアカウントを作成（ダミーメールアドレスでもOK）
-
プロジェクト共有
- オーナー役がプロジェクトを新規作成
- 設定画面から他のメンバーを招待。その際アカウントを作るのに使ったメールアドレスやユーザー名をメンバーに聞く
- 招待されたメンバーがプロジェクト一覧を確認。オーナーが作ったプロジェクトが見られるようになっていたらOK！
動作確認結果
今回実際のPJで複数人ではほぼ使っていませんが、一人で複数アカウント作って確認したところ、同時編集、コメント機能はFigmaと同じように使えそうでした。
penpot Tips
ここからは環境構築ではなく、penpot自体の機能についていくつか共有します。
基本操作
図形の作成・編集基本操作、画像・素材のインポート、コンポーネント（パーツ）のインスタンス化などFigmaと同じようにできます。
フォントについて
デフォルトでGoogle Fontsが入っていました。日本語フォントもあります。
それ以外のカスタムフォントはアップロード機能で追加可能です。Figmaにあった、ローカルPCのフォント自動読み込み機能なさそうでした。
参考: https://help.penpot.app/user-guide/custom-fonts/
ただ、フォント一覧で実際のフォントがプレビューされないのはいまいちです。
Figmaからの移行
Figmaのデータをpenpotに移行することもできました。
-
Figmaでの書き出し
- Figma用penpotエクスポートプラグインをインストール
- プラグイン: https://www.figma.com/community/plugin/1219369440655168734/penpot-exporter
- プラグインを実行して.penpotデータを書き出し
-
penpotでの読み込み
- penpotで「Import Penpot files」を選択
- エクスポートした.penpotファイルをアップロード
かなりの精度で再現されました。
Figmaと比べて劣っている点
線描画機能の欠如
Figmaにあった「線」機能がありません。（GitHub Issue）
代わりにパス機能を使えば線は引けますが、Figmaにはシェイプの一部として線機能が別であったので不便に感じました。
PDF書き出し時の画質劣化
画像付きファイルをPDF書き出し時をすると画質が劣化します。（GitHub Issue）
これは印刷物を作るときかなり致命的です。私はPNG形式で最大サイズにして書き出すことで対応しました。
SVGインポートの構造
素材サイトなどからsvgファイルをインポートすると、Layer上でフォルダ構造になり、色の変更方法などが分かりづらかったです。
まとめ
penpotは、Figmaの完全な代替にはなりえませんし、動作もやや不安定でしたが、基本的なデザイン作業は行えました。
特にセルフホストできる点は企業で利用する際はメリットになるかなと思いました。
興味のある方は一度試してみてください。