HTML で納品するデザイナーのための Figma 代替ツール
Figma 代替ツールの多くはキャンバスを真似るだけです。キャンバスの素材そのものを変えるツールはごくわずか。デザインが最終的に Web サイトになるなら、主な選択肢はこう比較できます。
Figma の代替が求められる理由
よく耳にする理由はシンプルです。オープンソースのライセンス、自分のマシンに置けるファイル、肝心なところで制限のない無料プラン、あるいはコードに近いワークフローです。
この記事を書いたのは、その最後の理由のためです。ほとんどのデザインツールでは、キャンバスはベクター描画で、ブラウザがそれを目にすることはありません。結局は誰かがすべてのフレームを HTML と CSS で作り直し、その過程で失われたものを直す必要があります。
ひと目でわかる比較
| ツール | オープンソース | デザインの方法 | エージェントと MCP | ファイルの保存先 |
|---|---|---|---|---|
| Figma | いいえ | ベクターキャンバス | MCP サーバー、キャンバスへの書き込みはベータ版 | Figma のクラウド |
| Penpot | はい | CSS Flex と Grid レイアウトのキャンバス | オープンな MCP サーバー | Penpot のクラウドまたはセルフホスト |
| Paper | ライセンス未公開 | HTML と CSS のキャンバス | MCP、無料プランは週100回のツール呼び出し | Paper のワークスペース、Web とデスクトップアプリ |
| OpenDesign | はい、Apache-2.0 | プロンプトが先、エージェントが HTML プロトタイプを作成 | コーディングエージェントと連携 | ローカルフォルダ |
| Kalka | はい、MIT | Figma 風のキャンバス、すべてのレイヤーが HTML | ローカル MCP を内蔵、利用上限なし | ローカルフォルダ、Git |
Penpot
Penpot は最もよく知られたオープンソースの代替ツールです。ブラウザで動き、セルフホストもでき、無料プランではファイル数もシート数も無制限です。レイアウトは CSS Flex と Grid に沿っており、Inspect タブでは SVG、CSS、HTML のコードを確認できます。オープンな MCP サーバーも提供しており、Penpot Exporter を使えば Figma ファイルを取り込めます。
こんな人におすすめ：チーム全員が今日から使える、セルフホスト可能で成熟したオープンソースツールが欲しい人。
Paper
Paper は Kalka に最も近い発想のツールです。キャンバスは HTML と CSS で、エージェントは MCP を通じてそこを読み書きします。Web アプリとデスクトップアプリがあり、トークンやコンポーネントをコードベースと同期でき、HTML と CSS を書き出せます。無料プランには週100回の MCP ツール呼び出しが含まれます。Pro は編集者1人あたり月 $16（年払い、月払いは $20）で、上限は100万回に増えます。
こんな人におすすめ：資金力のあるチームが支える HTML キャンバスを今すぐ使いたく、プロプライエタリなホスト型ツールでも構わない人。
OpenDesign
OpenDesign はオープンソース（Apache-2.0）で、仕組みが異なります。デザインシステムを選び、画面を説明すると、Claude Code、Codex、Cursor などのコーディングエージェントが HTML プロトタイプを書きます。その後、要素の移動、サイズ変更、色変更ができます。プロジェクトはローカルフォルダ内の HTML と CSS ファイルです。デスクトップアプリは自分の API キーを使えば無料で、有料プランではホスト型モデルのクレジットが追加されます。
こんな人におすすめ：白紙のキャンバスではなく、プロンプトから始めたい人。
Kalka
Kalka は私たちが開発しているツールです。Figma でおなじみのインターフェースはそのままに、キャンバス上のフレーム、レイヤー、影はすべて本物の CSS でスタイリングされた本物の HTML 要素で、ブラウザがレイアウトします。プロジェクトはただのフォルダなので、どのコードエディターでも開け、Git でバージョン管理できます。内蔵の MCP サーバーにより、どんなエージェントでもローカルで、利用上限なしにキャンバスを読み取り、描画できます。これまでの作業も持ち込めます。Kalka は .fig と .pen ファイルをインポートできます。
Kalka は開発中で、MIT ライセンスのオープンソースです。開発の過程はすべて X で共有しています。
こんな人におすすめ：今と同じやり方で手でデザインし、コードでの作り直しを省きたい人。
選び方
- 今すぐ安定して使えるオープンソースが必要：Penpot。
- 今すぐ HTML キャンバスが欲しく、オープンソースでなくてもよい：Paper。
- 描くよりプロンプトで作りたい：OpenDesign。
- Figma の操作感、その下に本物の HTML、そして自分のファイルが欲しい：Kalka のウェイトリストに登録してください。