【海外記事】Figma Makeの限界とその乗り越え方

今日はこの記事を読んでみます。なお、画像も以下から引用します。

https://uxplanet.org/figma-make-top-3-limitations-how-to-overcome-them-782991f7c399

AIによる記事の要約：

• プロンプト作成の難しさ：Figma Makeはプロンプト入力からデザインを生成するが、どのように書けばよいかのヒントがなく、初心者にはハードルが高い。具体例を出したり段階的な指示を心がける必要がある。

• 出力内容の不安定さ：AIが生成する結果はばらつきがあり、デザインやコードが意図どおりにならない場合がある。そのため、生成後に修正したり、既存コンポーネントを利用して精度を上げる工夫が求められる。

• ツールの限界と活用方法：Figma Makeは万能ではなく、複雑なロジックや細かなUX判断は人間のデザイナーの役割である。AIの力を補助として捉え、設計意図を明確にしておくことが重要である。

本記事は私がその時々の興味や気分に合わせて、主に海外のデザインやテック系、ビジネス、文化に関する記事を英語学習も兼ねながら日本語訳してまとめているものです。読みづらい部分や解釈が正確ではない部分もあるかもしれませんが、予めご了承ください。

本日もよろしくお願いいたします。

Figma Makeの３つの限界と解決策

Figma Makeは新しいツールではありません。デザイン領域にしばらく存在していたものでした。
しかしながらプロダクト業界の多くの人々はそれを使う機会があったにもかかわらず、そのほとんどの使い方を知らずにいます。

この記事では、私はFigma Makeにおける重要な３つの制限事項と、それを解決するための実践的なコツを共有します。

課題１：プロンプトの書き方のガイダンスが乏しい

よくあるAIチャットボットのように、Figma Makeもあなたが何を作りたいと思っているのかを聞き取り、その見た目や機能についての情報を要求してきます。ただの空白な入力フィールドが与えられ、そこにプロンプトを入力することができます。

このようなアプローチはChatGPTのようにユーザーが何を求めているのかがわからないような多用途なツールの場合は効果的なUIですが、Figma Makeの場合はユーザーが何を作ろうとしているのかを予測することは不可能ではありません。
しかしFigma Makeを使っていても完全に何のヒントも、あなたのプロンプト入力を補助するような構造も存在していません。
このことはあまりに大きな問題を生み出します。あなたがプロンプトの記述とリライトに多くの時間を割いてしまうということです。

これらの解決方法

最初のプロンプトの品質はツールがデザインを生み出す際の方向性を定義するものです。
一旦Figma Makeが何かを生成したら、その方向性を後からプロンプトで修正していくのは非常に困難です。
そのため最初のプロンプトは慎重に入力すべきです。その際にTOKENフレームワークのようなものを用いてプロンプトを最大限に磨き上げましょう。
"TOKEN"とは以下のようなものです。

• T - Task
  AIに本当にやってもらいたいことは何ですか？ゴールは具体的にしましょう。

• O - Output
  最終成果物のどのようなものを想定していますか？フォーマットの具体化レベル（ワイヤーフレームなのか、モックアップUIなのか、コンポーネントリストなのかなど）を定義しておきましょう。

• K - Key design elements
  機能や見た目の要素で必要なものは何でしょうか？これはナビゲーションパターンかもしれませんし、キーコンポーネント、コンテンツのブロック、ブランディングエレメンツかもしれません。

• E - Expected behaviors
  ユーザーがエレメントに接する際に、それらはどのような振る舞いをすべきでしょうか？ステータスやトランジション、フィードバック、エッジケースやインタラクションのルールを定義することが特にダイナミックで複雑なUIにおいては必要となるでしょう。

• N - Notable constraints
  AIの制限の中でも尊重すべきものはなんでしょうか？プラットフォームのガイドラインやアクセシビリティ、要求、技術的な制限、ブランドルール、時間や対応範囲の境界線などでしょう。

以下にTOKENを用いて作ったサンプルプロンプトを記載します。

Task:
Design a high-fidelity mobile app screen for a food delivery app
focused on quick reordering and tracking active deliveries.

Output:
Produce a polished iOS-style UI screen suitable for handoff,
including layout, components, typography, and color usage. The result
should look production-ready (pixel-perfect layout, not a wireframe).

Key design elements:
- Top app bar with current delivery status
- Restaurant card with logo, rating, and estimated delivery time
- Primary CTA button: “Reorder”
- Active order tracker with step indicators (Confirmed → Preparing → On the way → Delivered)
-Bottom navigation with Home, Search, Orders, Profile
- Clean, modern visual style with clear hierarchy and generous spacing

Expected behaviors:
- The “Reorder” button should stand out as the primary action
- Active delivery status should be visually emphasized and easy to scan
- Order tracking steps should clearly indicate the current stage
- Bottom navigation should feel persistent and accessible

Notable constraints:
- iOS mobile screen (optimized for iPhone 16 screen size)
- Follow Apple Human Interface Guidelines
- Ensure accessible color contrast (WCAG AA)
- Use system-like typography and familiar mobile patterns

しかしあなたは最初からプロンプトを記述する必要はありません。実際上記のTOKENの内容をChatGPTやClaudeに記載して、作ろうとしているもの（例えばSaaSプロダクトなど）を明確化させることで、AIツールが制作を始めるための最初のプロンプトを生み出すことができます。

さらにその代わりに、Greg Huntoonが作ったChatGPTのフリーアプリであるMake Prompt Assistantを使うこともできます。

このツールはFigmaのデザインを動くプロトタイプに変えてくれるような明快なプロンプトを作成することを手助けしtげ食っるものです。
ただ唯一の難点は、ChatGPTの過去のモデルである5.1にのみ適用されているという点です。（最新モデルは5.2）
下にMake Prompt Assistantがあなたの意図を表現するために作った簡単なプロンプトです。

Task: Build a responsive finance app dashboard screen that summarizes a user’s money at a glance and helps them take quick actions.



Context: Post-login “Home/Dashboard” for a personal finance app (tracking balances, spending, bills, and investments).



Elements:

- Top app bar: app name/logo, search, notifications, user avatar

- Summary strip: Total Net Worth, Cash, Credit Card Debt (3 compact stats)

- Primary chart card: “Spending this month” with time-range toggle (Week/Month/Year)

- Category breakdown: donut/pie + list (Top categories with amounts + %)

- Accounts list card: bank accounts/credit cards with balance, last updated, status pill

- Upcoming bills card: due date, merchant, amount, “Pay” action

- Investments card: portfolio value, daily change, mini sparkline, “Trade” action

- Quick actions row: Add transaction, Transfer, Pay bill, Set budget

- Recent transactions list: merchant, category icon, date, amount (income/expense)



Behavior:

- Time-range toggle updates chart + totals; animate transitions subtly

- Clicking a stat or card opens its detail view (use hover/pressed states)

- Recent transactions supports filtering (All/Income/Expenses) and search

- Empty/loading states: skeletons for cards; helpful empty prompts (e.g., “Link an account”)



Constraints:

- Desktop-first dashboard with responsive collapse to tablet; 12-col grid; cards use consistent padding and 16px radius; accessible contrast; light + dark mode.



System_Tags: #dashboard #personal_finance #web_app

課題２：ツールによって一貫性のない生成物が生み出される

Figma Makeに関する一つのよくあ批判として、このツールが決定論的ではないということが挙げられます。
簡単にプロンプトの内容をご開始、結果としてデザイナーが意図していなかった生成物が作成されます。
たとえば、プロンプトの中に以下のようなパディングのルールを記載したとします。

そうすると作られたUIでは一貫性のない余白のルールが適用されてしまうのです。

不幸なことに、これは新しい問題などではなく、あらゆるAIツールで起こり得ることです。この問題はハルシネーションとよばれています。Figma Makeが無視や誤解をしないようにするために以下の準備を行ってください。

• 現在のパディングのルール

• コンポーネントのルール（特に複雑なコンポーネントについて）

• デザインシステムの資産（全てではなく、その一部）

• アクセシビリティの制限（特にもしあなたがそれらをオリジナルのプロンプトで明示的に示していなかった場合）

これらの解決方法

複雑なUIを有するようなプロトタイプを生成する代わりに、小さく作り、特定の機能を見せるためのプロトタイプづくりにフォーカスするか、特定のアニメーション効果（マイクロアニメーションやトランジション）の検証を行うべきでしょう。

可能なら常に、テキストでの説明といっしょにビジュアルの事例も使うようにします。Figma Makeはあなたが参照するイメージ（素のPNGやJPGファイル）を提供し、Figmaで作成したデザインをソースとして取り込むとより効果的です。

・・・

課題３：慎重にプロンプトを打ち込む

あなたがFigma Makeでデザインを繰り返し生成しているとき、あなたはちょっとしたプロンプトの変化でレイアウトが全く別物になってしまうことに気づくはずです。
Figma MakeはコードエンジンというよりはMidjourneyに近い振る舞いをします。
つまり、あなたが繰り返しデザインを作る際に、それらを再活用するのではなく再生成を行うのです。
そしてより悪いことに、それは複数の世代にわたってデザインシステムから逸脱するリスクをはらんでいます。

これらの解決方法

もしあなたがプロンプトの感度による効果を最小限にしたいと思うなら、あなたはレイアウトについて過剰なまでに具体化させる必要があります。特に複雑なUIデザインを行っているのであればなおさらです。
さらに、各デザインのブラッシュアップの過程でもデザインの一貫性が担保されるようなかたちで指示を出す必要があります。

私は複雑なデザインをあなた自身で分割していくことを推奨します。
複雑なロジックで構成されたUIは、Figma Makeではなく手で作ってしまうほうが良いでしょう。

• マルチステップフロー（特定の機能ロジックで関連付けられたスクリーンやページの集合）

• UIの動作条件とエッジケース

• 現実の一貫性を元にした、複雑なデータのビジュアル化

以下のような場合はFigma Makeを使うことが適しています。

• ランディングページ

• マーケティング画面

• 簡単なCRUD（Create,Read,Update,Delete）のインターフェイス

• MVPのための高度なSaaS画面

感想：AIも万能じゃないからこそデザイナーとしての経験やキャリアの価値は失われない

AIが台頭してきていよいよデザイナーの仕事もなくなるぞ、と言われて久しいですが、やはりまだまだ複雑なデザインに関しては人が自分の手で作っていく必要があることがわかりました。

ただ、言い方を変えるとそれは今まで積み上げてきた経験値やスキルがAIによって一掃されるわけではなく、ずっとこれからも残り続けていくという希望的な意味合いも含んでいるように感じます。

どの業界でもそうかもしれませんが、このAIの煽りを受けるのはまだキャリアや経験が浅い初学者の人たちで、一定水準の経験がなければ一気にAIに代替される時代になっているということも言えます。
バナー、LP、YouTubeサムネ、ノベルティ、チラシ、、こういったそこまでスキルの熟練度が求められないクリエイティブ領域においてはそれがより顕著になるでしょう。

こういうことを考えると、やはりAIによって仕事がなくなるか否かは本人のポテンシャルやら努力以上に、自分が何に時間をかけてきたのか、あるいはどの時代に生まれたのか（AI登場以前に十分な経験が積めるだけの時間があったのか）などの運要素が強いような気がしています。

自分は本当に運よく、AIが来る前に１０年ほどデザインの領域に関われたし、比較的抽象度の高い課題を解く場面がキャリアの中でも多かったので恵まれていますが、本当にこの流れは残酷なものだなぁと考えさせられました。

熟練のデザイナーであるという自負がある人はAIを使う側に、そこまでではないという人は損切りをして自分のスキルセットの範囲を広げるか、思い切ったピボットが必要になるのかもしれません。
自分ももうAIに代替されるような抽象度の低い仕事からはなるべく手を引き、包括的なディレクションを行える仕事の割合を増やしていこうとしています。

一緒に頑張りましょう。

個人的に気になった海外記事を週数本メモしていますので、よければフォローおねがいします

▼X（Twitter）▼
https://twitter.com/yamashita_3

▼Webサイト▼

__________________________________________________________
#海外記事翻訳 #デザイン