デザインのコード化：ツール、トレードオフ、そして近道

1. 変換ツール

デザインファイルを読み取り、HTML、CSS、またはフレームワークのコードを書き出すプラグインです。Anima は Figma のフレームを HTML、React、Tailwind に変換し、Figma コミュニティには Figma を HTML に変換するプラグインがいくつもあります。

• 強み：速く、ワンクリックで済む。
• 限界：出力はコードベースではなく図に沿っているため、書き直されることが多い。

2. AI コード生成ツール

デザイン、スクリーンショット、またはプロンプトを読み取ってコンポーネントを書くツールです。Figma Make はフレームから HTML、CSS、JavaScript を生成します。Builder.io は、あなた自身のコンポーネント、トークン、デザインシステムを使ったコードにデザインを変換します。

• 強み：技術スタックに合ったコードが得られる。
• 限界：最初の生成のあとは、やはりデザインとコードがずれていく。

3. コードでできたキャンバス

最も新しいアプローチは、変換そのものをなくします。キャンバス自体が HTML と CSS なので、埋めるべき溝がありません。Paper と Kalka はこの方式で、Penpot もレイアウトに CSS Flex と Grid を使うことでこれに近づいています。

• 強み：デザインしたものがそのまま公開され、何も失われない。
• 限界：Web のルールに沿ってデザインすることになる。それこそが狙いですが、慣れは必要です。

選び方

• React や Vue のコンポーネントライブラリを持つアプリ：あなたのコンポーネントを理解している AI 生成ツール。
• 既存の Figma ファイルから静的ページを手早く作る：変換ツール。
• Web サイトを頻繁にデザインして公開する：コードでできたキャンバス。デザインをコードにする工程そのものがなくなります。

Kalka は、この3つ目のアプローチに対する私たちの答えです：Figma のようなインターフェースの下に本物の HTML があり、オープンソースでローカルに動きます。現在開発中です。