2025年7月にFigmaが発表した Figma Make は、自然言語からWebアプリを生成できる新しいAIツールです。
React + Tailwindベースのコードを生成し、Figma Designと連携しながらスピーディにUIを構築できます。

弊社（中小企業向けのシステム開発会社）でも、今後の提案やプロトタイプ作成に活かすために実際に触ってみました。

実際にテストした内容と、どこまで使えるかを率直にレビューします。

最初にサンプルとして今年話題に上がったalt.aiのページを参考にさせていただきます。
個人的にはthree.jsのanimationもあって、動きが面白いページだとは思うのでFigmaでどれだけ実装できるのかを試してみました。

1. URLから参考ページを指定してサイトを生成できるか？

まず試したのは、チャットに
「既存サイトのURLを提示して、その構成を自動で取り込む」
という使い方。

期待としては「ページ構成の模倣」や「写真・文言の自動抽出」でしたが、現状では以下の課題がありました。

• 「取得した」とMake側はチャット上で回答するが、実際には中身を取り込めていない
• テキストや画像は反映されない
• レイアウトの“雰囲気”だけ抽出している印象

参考サイトの構造をベースにした自動生成は、まだ発展途上という印象です。

基本的には一般的なページをそのまま作成しているような状況なので、urlをチャット欄に入れてそのページ構成のようにできるかという機能は現在実装されていないようです。

2. 既存のFigmaデザインをMakeに取り込み、AI生成させられるか？

次に検証したのは、
「Figma Design上の既存デザインをMakeに読み込ませて、それに沿ったUIを生成できるか？」

結果としては良くできており、

• デザインの色使い・コンポーネント配置を踏まえた生成が可能
• 完全コピーではないが、意図を反映したUIを作る
• 生成されたReactコードの構造も比較的きれい

デザインが明確にある場合、Makeを“量産ツール”として使うのは十分アリです。

特に デザイン → コード の変換精度は従来の“Design to Code”より大幅改善されています。

3. ライブラリを指定したUI生成はできるか？

これは想像以上に効果的でした。

Makeはデフォルトでは独自コンポーネントを生成しますが、
「Motionでanimationを作成して」
などと指定すると、その通りに生成されます。

このことから、実務では、

• 事前に使用ライブラリを指定
• 設計方針を定義し、ガイドラインに沿って生成
• 生成物の品質を均一化

といった使い方が向いています。

指示なしだとブラウザ標準搭載のコードになる → 指示した方が期待したアウトプットが出やすい
という点は非常に重要です。

4. Figma Make → Design の流用方法と注意点

Makeで生成したUIは、簡単に Figma Designへコピー可能 で、
そこからの修正やレビューができます。

ただし、

• Make側ではコメント機能が使えない
• 複数メンバーでレビューするならDesign側で統一する必要がある

という注意点があります。

▼ 実運用の流れイメージ

1. Makeでプロトタイプを高速生成
2. Designにコピーしてレビュー
3. 修正後、Makeで再生成（必要に応じて）

「デザインとコードを往復しながら作る」新しいワークフローという感じです。

5. 実務でどこまで使えるのか？

結論として、実務でも十分使えるレベル です。

具体的な利用シーン

• 中小企業向けのWebアプリ初期モックを10〜20分で作成
• MVPの一次UIをMakeで生成 → エンジニアが最小限の修正
• 受託開発の「提案資料用UI」を高速作成
• 要件定義フェーズでクライアントとUIを共有しながら認識合わせ
• デザインレビューをDesignで実施し、差分をMakeで更新

Vueには非対応（現時点）

Make内部ではReact + Tailwindが標準となっており、Vueは不可。
実際に問い合わせたところ、次のような返答でした：

Figma Makeは React と Tailwind CSS を使用した Web アプリケーション構築専用のプラットフォームです。Vue での開発には対応しておりません。

ただ、現代のWebアプリ開発はReact採用が多いため、実務影響は比較的小さいと思います。

まとめ：Figma Makeはデザイン〜コーディングの新しいワークフローを作る

Figma Makeはまだ完璧ではないものの、
・プロトタイプ作成
・初期デザイン生成
・Reactコード生成
・Designとの連携
の4つが強力で、実務レベルで大きく工数を削減できます。

特に中小企業向けの受託開発・新規事業案件では、
「スピード」と「柔軟な修正対応」が求められるため、
Makeは非常に相性の良いツールだと感じました。

今後も検証しながら、弊社の開発・提案プロセスに積極的に取り入れていく予定です。