Figma HTML 変換：選択肢と、変換をなくす方法

Figma から HTML への変換がワンクリックで終わらない理由

Figma のフレームはベクターの図です。テキストも余白もレイアウトも、ブラウザではなく Figma が計算しています。Web ページにするには、その図を HTML 要素と CSS ルールに翻訳する何かが必要で、どんな翻訳にも、あなたが決めていない判断が入り込みます。

オートレイアウトは flexbox に近いものの、完全に一対一ではありません。制約は配置のルールに置き換わり、フォントの描画も変わります。だからこそ、変換結果は公開前にたいてい手直しが必要になります。

選択肢1：Figma プラグイン

Figma コミュニティには Figma を HTML に変換するプラグインがいくつもあり、Anima のようなツールはフレームを HTML、React、Tailwind に変換します。Framer には、Figma のフレームを Framer に貼り付けてそのまま公開できるプラグインがあります。

• 向いている用途：静的ページの最初の下書きをすばやく作る。
• 注意点：自動生成のクラス名、絶対配置、そしてコードベースに合わせて書き直すことになるマークアップ。

選択肢2：AI によるデザインのコード化ツール

Figma Make はフレームから HTML、CSS、JavaScript を生成します。ほかにも、デザインを読み取ってあなたの技術スタック向けのコンポーネントを書く AI ツールが増え続けています。

• 向いている用途：使っているフレームワークのコンポーネントをすばやく手に入れる。
• 注意点：どちらか一方が変わった瞬間から、デザインとコードがずれ始めます。

選択肢3：手作業で作り直す

今でも最も一般的な方法です。開発者がデザインを読み、寸法を測り、HTML と CSS を書きます。仕上がりはきれいですが、実質もうひとつのプロジェクトであり、デザインが変わるたびに一部をやり直すことになります。

選択肢4：最初から HTML でデザインする

キャンバスがはじめから Web ページなら、変換の問題そのものがなくなります。Kalka では、すべてのフレームが HTML 要素で、デザインパネルで設定するプロパティはすべて CSS の宣言です。翻訳するものがないので、書き出すものもありません。

手元に残るのはひとつのフォルダです：pages/home.html、styles.css、そして design-system/tokens.json に入ったデザイントークン。開発者はどのエディターでも開けて、Git でレビューし、本番サイトに組み込めます。

あなたに合うのはどれか

• ランディングページを1回だけ作る：プラグインで十分です。
• React や Vue のコンポーネントを持つプロダクト：AI のデザインコード化ツールに、レビューを組み合わせましょう。
• Web サイトを何度もデザインして公開する：HTML でデザインし、変換の工程そのものをなくしましょう。

Kalka は開発中のオープンソースプロジェクトです。4つ目の選択肢があなたのワークフローに合いそうなら、ウェイトリストに登録して最初のビルドを手に入れてください。