Figma Make使ってみたログ

2025/10/26

Figma Makeを触ってみたメモです。
10/22に開催されたGet Started with Figma Makeアーカイブを見ながら勉強しました。

Figma Makeとは何か
1. Make／Design／Sitesの違い
Figma Makeを使ってみる
Figma Makeの良さ
プロフェッショナルプラン
1. テンプレートを共有できる
2. Makeで作ったものをDesignに持ってくる
使いこなせたら最高！
1. 参考リンク

Figma Makeとは何か

https://www.figma.com/ja-jp/make
Figma Makeは文章の指示（プロンプト）だけで、デザインから実際に動作するコードを自動で生成できるツールです。
「アイデア → 指示 → 動くもの」という流れが、これまでより圧倒的に高速化されています。

たとえば・・・
「◯◯なアプリを作って」と指示したら、AIがデザインを考えてすぐに動く試作品を作ってくれます。
瞬時に「動く形」で確認できるので打ち合わせやアイデア出しのときに重宝しそうです。

Make／Design／Sitesの違い

名称	特徴
Figma Design	従来のFigmaでのデザイン作業。デザイナーが作り、コーダーが実装、という流れが一般的。 DevToolでコードも用意してくれる。
Figma Make	自然言語（プロンプト）による指示＋既存デザイン／画像に基づいて、動作設計（インタラクション）・機能・コード生成まで自動で行える。
Figma Sites	Figma上で作ったデザインをノーコードでWebサイトとして公開できるツール。既存のFigmaデザイン→そのままサイト化、という流れ。

Figma Makeを使ってみる

ChatGPTに「日本のキャリア系オンラインショップ風のECサイトを作りたい」と伝えて、生成されたプロンプトをFigma Makeに入力してみました。
ドコモショップのデザインのキャプチャも添付してみます。

指示文作成

オンラインショップのサイトを作成してください。
ヘッダーは左寄せロゴ、中央にグローバルナビ、右上にログイン・カート・検索アイコンを配置します。
ヒーロースライダーは1枚表示の横スライドで、合計3枚です。
ラインナップは「iPhone」「Android」「iPad」「アクセサリ」などをカード形式で表示し、ホバーで軽く浮き上がる演出を加えます。キャンペーンバナーは目立つ色で特別セール情報を提示。
おすすめ商品はランキング形式のカードで商品画像・価格・詳細ボタンを表示します。
お知らせや配送情報はリスト形式で整理し、フッターにはサイトマップや、関連リンク、著作権表記をまとめます。配色はホワイト背景にライトグレーで区切り、アクセントにグリーンを使用。サンセリフ系で、全体をグリッド中心に配置します。

Figma Make指示文画面。画像を添付し、プロンプトを記載しエンターをクリック。

Figma Makeの良いところは、画像やFigmaDesignで作成したデザインを添付できるところです。これによって言語化しづらいニュアンスを伝えることができます。

生成画面

生成中画面。 — すぐに生成が始まりました。どんどんコードが紡がれていて、この時点で少し感動しました。

実際に出来た内容

数分で出来上がりました。

試作として出すには十分なものが出来上がったと思います。
ここから更に指示文を出すことも出来ます。

コードはこんな感じ

コードをダウンロードすることもできます。
package.jsonも生成されていたため確認したところ、React・Tailwind CSS、ビルドにはviteが使われているようです。
また、画像はUnsplashを利用していました。
コードを眺めているだけでも勉強になりそうです。

モダン技術はあまり詳しくないのですが、エンジニアから見たFigma Make – 高品質なサイト生成の要因を探るが構成内容や生成プロセスについて丁寧に解説されていたので参考になりました。

Package.json


  {
      "name": "オンラインショップサイト作成",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
          "@radix-ui/react-accordion": "^1.2.3",
          "@radix-ui/react-alert-dialog": "^1.1.6",
          "@radix-ui/react-aspect-ratio": "^1.1.2",
          "@radix-ui/react-avatar": "^1.1.3",
          "@radix-ui/react-checkbox": "^1.1.4",
          "@radix-ui/react-collapsible": "^1.1.3",
          "@radix-ui/react-context-menu": "^2.2.6",
          "@radix-ui/react-dialog": "^1.1.6",
          "@radix-ui/react-dropdown-menu": "^2.1.6",
          "@radix-ui/react-hover-card": "^1.1.6",
          "@radix-ui/react-label": "^2.1.2",
          "@radix-ui/react-menubar": "^1.1.6",
          "@radix-ui/react-navigation-menu": "^1.2.5",
          "@radix-ui/react-popover": "^1.1.6",
          "@radix-ui/react-progress": "^1.1.2",
          "@radix-ui/react-radio-group": "^1.2.3",
          "@radix-ui/react-scroll-area": "^1.2.3",
          "@radix-ui/react-select": "^2.1.6",
          "@radix-ui/react-separator": "^1.1.2",
          "@radix-ui/react-slider": "^1.2.3",
          "@radix-ui/react-slot": "^1.1.2",
          "@radix-ui/react-switch": "^1.1.3",
          "@radix-ui/react-tabs": "^1.1.3",
          "@radix-ui/react-toggle": "^1.1.2",
          "@radix-ui/react-toggle-group": "^1.1.2",
          "@radix-ui/react-tooltip": "^1.1.8",
          "class-variance-authority": "^0.7.1",
          "clsx": "*",
          "cmdk": "^1.1.1",
          "embla-carousel-react": "^8.6.0",
          "input-otp": "^1.4.2",
          "lucide-react": "^0.487.0",
          "next-themes": "^0.4.6",
          "react": "^18.3.1",
          "react-day-picker": "^8.10.1",
          "react-dom": "^18.3.1",
          "react-hook-form": "^7.55.0",
          "react-resizable-panels": "^2.1.7",
          "recharts": "^2.15.2",
          "sonner": "^2.0.3",
          "tailwind-merge": "*",
          "vaul": "^1.1.2"
      },
      "devDependencies": {
          "@types/node": "^20.10.0",
          "@vitejs/plugin-react-swc": "^3.10.2",
          "vite": "6.3.5"
      },
      "scripts": {
          "dev": "vite",
          "build": "vite build"
      }
  }