Figma Makeをエンジニアが使ってみた
こんにちは！
Exploratory Development & Incubation Team（通称：EDIT）の石原です。
今回は、Figma Config 2025で発表された新機能Figma Makeを使ってみた所感をエンジニア目線でお届けします。
このブログ記事はEAHのセッションで発表した内容をもとに作成しています。
EAHって何？という方はこちらの記事をご覧ください！
そもそも、Figmaとは？
既にご存知の方も多いかと思いますが、Figmaはブラウザ上でリアルタイムに共同編集ができるデザインプラットフォームです。
UI/UXデザインのデファクトスタンダードとして、エンジニアにとってもデザインを確認したり、Dev Modeでプロパティやコードを書き出す、といった場面で欠かせないツールになっています。
そんなFigmaに新しく搭載されたのが、AIを活用した生成機能Figma Makeです。
結論：プロトタイプ作成のハードルが劇的に下がる
結論からお伝えすると、Figma Makeを活用することで、プロンプト一つでUIのプロトタイプ作成のハードルが劇的に下がります。特に、既存のデザインシステムとの連携が非常に強力だと感じました。
Figma Makeは、AIを活用して「こういうUIを作りたい」という文章での指示をもとに、画面レイアウトやコンポーネントのたたき台を自動で生成してくれる機能です。
これまではコンポーネントを一つ一つ配置して画面を描く必要がありましたが、Figma Makeの登場により、デザインはプロンプトから生成する体験へと進化しています。
実践：プロンプトとラフスケッチからUIを生成してみた
実際にいくつかのユースケースでFigma Makeを試してみました。
1. テキストプロンプトから「社内ダッシュボード」を作成
まずは、よくある管理画面のUIを指示してみました。
プロンプト内容： 「KPIがカード形式で並び、テーブルと簡単なグラフがある管理画面」
これだけで、結構しっかりデザインされたプロトタイプが瞬時に生成されます。
2. 手書きスケッチをベースにしたプロトタイプ作成
さらに驚いたのが、手書きのラフスケッチからの生成です。
カフェのリストを管理するアプリの雑な図から、地図やリスト表示を切り替えられるしっかりとしたUIが生成されました。
そこから「少しレトロな喫茶店のような温かみのあるデザイン」といったプロンプトを付け加えることで、見た目の変更もAIがゴールまで導いてくれます。自分でデザインの調整方法がわからなくても、AIとコラボレーションして直感的に作り込めるのが魅力です。
動くプロトタイプへのスムーズな橋渡し
作成したUIは、Figma MakeをSupabaseに接続することで、コーディングなしで実際のデータを使用した提供可能なWebアプリに変換することもできます。ユーザー認証の追加やユーザーデータの保存といった機能にもアクセスできるため、エンジニアとしてはバックエンドとのつなぎ込みのイメージが非常に湧きやすくなります。
ちなみにFigma Config 2025ではFigma SitesというデザインをそのままWebサイトとして公開できる機能も発表されたので、作って→繋いで→公開する、という一連のサイクルがFigma上で完結できるようになったということですね。
エンジニア目線の推しポイント
今回触れてみて一番熱い🔥と感じたのは、デザインシステムとの連携です。
そもそもデザインシステムとは、単なるパーツ集ではなく、ガイドライン、コンポーネント、ツール、ベストプラクティスを一つにまとめた製品開発の共通言語のようなものです。
Figma Makeでは、自社のデザインライブラリをコンテキストとして読み込ませることで、AIが生成するプロトタイプの精度を上げることができます。
Figma Makeにできること
Figma Makeを実際に使ってみた当時は、デザインライブラリから抽出した色の値、フォントの種類、余白や角丸のルールといったスタイリングの情報を、生成されるコードのスタイルシートに反映させることが可能でした。
つまり、AIが「この会社のブランドカラーはこれ」「余白はこのルール」というのを理解した上で、見た目を整えてくれる段階でした。
さらに進化したMake Kitsの展開
2026年3月下旬から有料プラン向けに順次ロールアウトが開始されたMake Kitsという機能によって、この連携はさらに強力になります。
これまでのスタイルの反映だけでなく、デザインシステム内の実際のコンポーネントやnpmパッケージを直接Makeに関連付けられるようになります。
うまく活用すれば、AIが独自の図形を描くのではなく、定義済みのコンポーネントを組み合わせてUIを構成してくれるようになります。デザインの知識がなくても、最初から自社のガイドラインに沿った一貫性のある画面をサクッと用意できるのが、エンジニアにとっては大きなメリットになるのではないでしょうか。
おわりに
最近は生成AIがコード実装をサポートしてくれるのが日常的になっていますが、その波がデザインツールにも自然に広がってきた印象です。
Figma Makeのようなツールをうまく取り入れることで、UI設計から実装までのプロセスがより地続きになっていくのではないかと思います。デザインとエンジニアリングの距離を少し縮めてくれる、実用的なアップデートだと感じました！
