Figma Makeを触ってみたメモです。
10/22に開催されたGet Started with Figma Makeアーカイブを見ながら勉強しました。
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の良いところは、画像や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"
}
}Figma Makeの良さ
コーダー視点のFigma Makeの良いところを考えてみました。
デザイン→実装のギャップを縮めることができる
これまではデザイナー→コーダーの手で実装という流れが多かったですが、Makeはその“橋渡し”役を強化できます。
打ち合わせ／アイデア出しの段階で「動く形」を即座に見せられるので、デザイナー・コーダー・企画担当など異なる立場の人の理解度のギャップが埋まりそうです。
モダンなコード構成
生成されたコードには、React・Tailwind CSS・Vite などモダンな構成例が使われています。
自分は長年WordPress畑にいたので、コーディング知識のアップデートにもなりそうです。がんばる
デバイス機能／データ活用
バックエンド接続やデータAPI活用ができるみたいです。うまく活用すればほぼ完成に近い状態まで持っていけそう！
レイヤーがごちゃつかない、変数名悩まない
自動でレイヤー名を考えてくれるのが便利でした。いつも変数名悩むので、自動で変数名を作ってくれるのが嬉しいです。
あとからクリックで部分編集ができる
「ポイントして編集」から、部分的に編集ができます。
作ったものをさらに「この部分だけ変えて」「このコンポーネントを自社デザインに差し替えて」といった修正が簡単！
コードから直接編集することもできるみたいです。
「AI向けガイドラインを用意（guidelines.md）
AI（cursorなど）向けのGuideline.mdというルールを生成してくれます。
「スタイルの使い方」「命名ルール」「コンポーネントの挙動」「レスポンシブの考え方」などを記述しておくことで、AIが生成をするときの“ルール”や“文脈”を明示できます。
プロフェッショナルプラン
テンプレートを共有できる
作ったものは、テンプレートとして公開できるみたいです。
全体公開やチーム内公開ができるので、テンプレートを元にアイデアの幅を広げることもできそうです。
無料プランでもコミュニティのテンプレートは利用出来ます。
https://www.figma.com/ja-jp/templates
Makeで作ったものをDesignに持ってくる
Makeで作成したプロトタイプ／Webアプリを、 Figma Designファイルに持ってきて、デザイン調整をすることが可能です。
レイヤー名などをいい感じにしてくれているので、先にMakeで準備してからDesignに移動するのもアリですよね。
使いこなせたら最高！
「思いついたアイデアをすぐ形にできる」のが新感覚でした。最近のツールってすごい。
使い方を理解すればデザイナー・コーダー間の思考をつなぐ架け橋になりそうだし、コミュニケーションの齟齬もなくなりそうでした。
ノーコードで作る場合は言語化する能力が必要かも。