Skip to content

AIExplore

How to Use Figma AI for First Draft Explorations

Use Figma First Draft to turn website and mobile app ideas into editable explorations, then refine with Make changes prompts and style controls.

Figma First Draft turns a plain language idea into editable website or mobile explorations in a couple of minutes. Official First Draft help places the tool in Actions on paid plans with can edit access. Figma built libraries supply common patterns. As of the May 2026 agent rollout notes, the agent is becoming a newer entry point for this exploration flow while First Draft remains documented in Actions. Confirm live access on help.figma.com. Start at /explore/figma-ai.

This guide covers library choice, pattern friendly prompts, theme previews, and Make changes refinement. For conversational follow up see /blog/how-to-use-figma-agent-for-conversational-design. For realistic copy after the draft see /blog/how-to-use-figma-ai-to-replace-placeholder-content.

When First Draft is the right job

Use First Draft when you need many early directions for screens that follow common website or mobile app patterns. Skip it for book layouts, novelty flyers, or any job that must start on your design system components.

Step by step workflow

1. Open Actions and choose First Draft

Optionally click Library for website or mobile wireframe or basic design. If you skip Library, Figma AI picks one suited to the prompt.

Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: Setup File: paid plan draft or shared file with edit access Tool: Actions → First Draft Library: mobile app basic design Goal: subscription settings exploration. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "Setup File: paid plan draft or shared file with edit access Tool: Actions → First Draft Library: mobile app basic design Goal: subscription settings exploration" that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "Setup File: paid plan draft or shared file with edit access Tool: Actions → First Draft Library: mobile app basic design Goal: subscription settings exploration" requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.

2. Write a pattern friendly prompt

Official help examples succeed with checkout pages, delivery apps, and marketing sites. Weak prompts ask for unusual formats outside those frameworks.

Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: Prompt card Surface: mobile app Screen: subscription settings Primary action: manage plan Theme: light Locks: single column, clear cancel path. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "Prompt card Surface: mobile app Screen: subscription settings Primary action: manage plan Theme: light Locks: single column, clear cancel path" that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "Prompt card Surface: mobile app Screen: subscription settings Primary action: manage plan Theme: light Locks: single column, clear cancel path" requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.

3. Make it, preview themes, then Make changes

Click Make it, preview theme thumbnails, then Make changes with prompts or style controls for color, radius, spacing, and typography. Duplicate frames before alternate riffs.

Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: Make changes Prompt: make cancel path more visible without adding a modal Style: increase spacing slightly Compare: duplicate frame before second theme. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "Make changes Prompt: make cancel path more visible without adding a modal Style: increase spacing slightly Compare: duplicate frame before second theme" that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "Make changes Prompt: make cancel path more visible without adding a modal Style: increase spacing slightly Compare: duplicate frame before second theme" requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.

Practical First Draft prompts

Pricing page

Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: A pricing page for a developer tools startup. Three tiers, monthly toggle, FAQ, primary CTA above the fold.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "A pricing page for a developer tools startup. Three tiers, monthly toggle, FAQ, primary CTA above the fold." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "A pricing page for a developer tools startup. Three tiers, monthly toggle, FAQ, primary CTA above the fold." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.

Checkout

Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: A checkout page for a store that sells outdoor grills. Sticky order summary, guest checkout, mobile web.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "A checkout page for a store that sells outdoor grills. Sticky order summary, guest checkout, mobile web." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "A checkout page for a store that sells outdoor grills. Sticky order summary, guest checkout, mobile web." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.

Food delivery

Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: A food delivery app for pet food. Browse, cart, and checkout screens, friendly tone, mobile app pattern.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "A food delivery app for pet food. Browse, cart, and checkout screens, friendly tone, mobile app pattern." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "A food delivery app for pet food. Browse, cart, and checkout screens, friendly tone, mobile app pattern." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.

Marketing site

Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: A marketing website for a content strategy consultancy. Hero, services, case study teasers, contact CTA.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "A marketing website for a content strategy consultancy. Hero, services, case study teasers, contact CTA." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "A marketing website for a content strategy consultancy. Hero, services, case study teasers, contact CTA." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.

Onboarding

Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: Mobile onboarding for a budgeting app. Three steps, progress indicator, primary Continue button.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "Mobile onboarding for a budgeting app. Three steps, progress indicator, primary Continue button." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "Mobile onboarding for a budgeting app. Three steps, progress indicator, primary Continue button." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.

Settings

Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: Mobile subscription settings. Plan name, renewal date, payment method, cancel path, light theme.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "Mobile subscription settings. Plan name, renewal date, payment method, cancel path, light theme." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "Mobile subscription settings. Plan name, renewal date, payment method, cancel path, light theme." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.

SaaS empty state

Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: SaaS projects empty state with illustration slot, short explanation, and Create project button.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "SaaS projects empty state with illustration slot, short explanation, and Create project button." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "SaaS projects empty state with illustration slot, short explanation, and Create project button." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.

Profile

Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: Mobile profile screen with avatar, display name, plan badge, and edit profile CTA.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "Mobile profile screen with avatar, display name, plan badge, and edit profile CTA." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "Mobile profile screen with avatar, display name, plan badge, and edit profile CTA." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.

Search results

Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: Website search results for a knowledge base. Filters on left, result cards, clear no results state.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "Website search results for a knowledge base. Filters on left, result cards, clear no results state." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "Website search results for a knowledge base. Filters on left, result cards, clear no results state." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.

Team admin

Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: B2B admin members table with invite button, role column, and empty invite state.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "B2B admin members table with invite button, role column, and empty invite state." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "B2B admin members table with invite button, role column, and empty invite state." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.

More copyable examples

Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: Course catalog Education app course catalog with cards, difficulty chips, and enroll CTA.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "Course catalog Education app course catalog with cards, difficulty chips, and enroll CTA." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "Course catalog Education app course catalog with cards, difficulty chips, and enroll CTA." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.
Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: Booking Salon booking flow: service list, time picker, confirm screen, mobile app pattern.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "Booking Salon booking flow: service list, time picker, confirm screen, mobile app pattern." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "Booking Salon booking flow: service list, time picker, confirm screen, mobile app pattern." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.
Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: Support hub Help center home with search, topic cards, and contact support link.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "Support hub Help center home with search, topic cards, and contact support link." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "Support hub Help center home with search, topic cards, and contact support link." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.
Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: Analytics overview Product analytics overview with KPI cards and a simple chart placeholder, desktop web.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "Analytics overview Product analytics overview with KPI cards and a simple chart placeholder, desktop web." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "Analytics overview Product analytics overview with KPI cards and a simple chart placeholder, desktop web." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.
Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: Wishlist Ecommerce wishlist with product cards, remove actions, and move to cart CTA.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "Wishlist Ecommerce wishlist with product cards, remove actions, and move to cart CTA." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "Wishlist Ecommerce wishlist with product cards, remove actions, and move to cart CTA." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.
Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: Notifications Mobile notifications list with unread markers, timestamp, and mark all read.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "Notifications Mobile notifications list with unread markers, timestamp, and mark all read." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "Notifications Mobile notifications list with unread markers, timestamp, and mark all read." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.
Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: Compare plans Website compare plans table for a VPN product, three columns, feature checkmarks.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "Compare plans Website compare plans table for a VPN product, three columns, feature checkmarks." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "Compare plans Website compare plans table for a VPN product, three columns, feature checkmarks." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.
Scenario:
A realistic figma-ai workflow is being prepared for Use Figma AI for First Draft Explorations using figma-ai. The starting requirement is: Local events Community events app list with date, venue, and RSVP button, mobile pattern.. The work should be tested on a representative input first so the result can be reviewed before the same process is applied to the full project or production workload.

Objective:
Create a production-ready result for "Local events Community events app list with date, venue, and RSVP button, mobile pattern." that directly supports the article use case. The output should be specific, reviewable, and reproducible rather than a generic demonstration. Keep the requested goal as the primary outcome and avoid adding unrelated features, assumptions, or unsupported capabilities.

Inputs:
Use the actual source material required for this task, together with the intended audience, destination, format, and quality requirements. Specify relevant files, text, URLs, structured data, reference assets, dimensions, language, tone, timing, model or generation settings, credentials, field mappings, or integration values when they apply. Keep secrets out of the example and use the product's supported credential or configuration mechanism.

Workflow:
1. Start with one representative input that contains the important characteristics of the real workload.
2. Configure figma-ai specifically for the requested task and make the important settings explicit.
3. Run the first pass and inspect the result against the objective.
4. Correct only the settings or source material responsible for a failed requirement instead of changing everything at once.
5. Validate the intermediate result before passing it to the next step.
6. When the result meets the requirements, save the successful configuration so the same process can be repeated consistently.
7. If this is a multi-step workflow, verify each handoff and keep a clear fallback or review path for failures.

Requirements:
The example must use supported functionality only. Do not invent product features, pricing, limits, integrations, model names, API behavior, or unavailable settings. Preserve important source data and formatting. Validate required fields before processing, handle empty or invalid input explicitly, prevent accidental duplicate processing where relevant, and stop or route the item for review when a required step fails. For credentials, use the supported secure configuration rather than placing secrets directly in the content.

Expected output:
The final result should directly satisfy the "Local events Community events app list with date, venue, and RSVP button, mobile pattern." requirement and be understandable without guessing what was supplied or configured. A successful run should produce the intended output in the requested format, with the important values and workflow decisions clear enough to reproduce the result. If the workflow can fail, the expected behavior should also make the failure visible and provide a clear next action instead of silently producing an incomplete result.

Tips

  • Prefer website and mobile app patterns
  • Pick Library when you already know website vs mobile
  • Finish Make changes before closing Actions
  • Duplicate frames to compare themes
  • Align to your design system after choosing a direction
  • Confirm paid plan and edit access before shared file work

Verification notes

First Draft facts come from official Use First Draft with Figma AI help. Agent rollout notes say the agent is becoming a newer exploration entry point. Confirm UI labels in your account. When plan access, seat rules, or credit behavior differ from memory, open help.figma.com and your AI balance. Limits change, so do not promise client timelines from outdated screenshots.

Keep a short session log beside the file: tool used, selection, prompt, and the one change you will try next. That habit turns four variants or parallel agent threads into learning instead of noise.

When Actions are missing, check whether an admin disabled Figma AI for the workspace before rewriting prompts. Access problems look like prompt problems until you confirm settings.

Treat the first AI pass as a sketch. Compare against your spacing grid, type styles, and accessibility targets before inviting stakeholders.

If you collaborate, store winning prompts on a shared page next to the library link. Reuse the skeleton and change only product nouns or channel constraints.

Separate exploration files from production libraries. Explore freely in drafts, then rebuild keepers with real components before handoff.

Close each session by naming frames clearly and discarding dead ends. A clean page saves time when someone asks for the pricing riff from Tuesday.

Prefer concrete product language over vague vibes alone. Screen type, primary action, and one constraint outperform a pile of adjectives.

Confirm AI credit balance and reset date before large image or agent batches. Shared credits power many Figma AI surfaces.

Stay inside website and mobile app patterns when you need reliable First Draft output. Book layouts and novelty shapes are weaker fits per official help.

Duplicate frames before alternate Make changes passes so you can keep two themes side by side for critique.

Remember First Draft cannot yet generate from your own design system. Budget time to swap stacks for real components after you pick a direction.

First Draft is fastest when your brief sounds like a product screen, not a poster. Name the audience action, the platform, and one hierarchy rule before you click Make it.

Theme thumbnails are for direction, not final brand. Once you like a structure, stop chasing color variants and start aligning spacing and type to your real styles.

If Make changes fights you, select only the section you want to alter. Official help notes that selecting parts of the draft scopes the prompt to those elements.

When the agent is available in your file, use First Draft or agent exploration for the first wide pass, then switch to component rebuilding as soon as stakeholders pick a direction.

Document the prompt that produced the keeper frame. Teams lose hours recreating a checkout exploration that existed only in chat memory.

Budget a cleanup block after every First Draft session: replace placeholder strings, rename layers, and swap invented buttons for library components before review.

If a prompt asks for a fish shaped flyer or a novel page layout, change the brief. Official First Draft guidance warns those formats sit outside the libraries strengths.

Paid plan and can edit access are required for First Draft. If the tool is missing, check plan, seat, and admin AI settings before rewriting the prompt.

Keep First Draft pages separate from production component libraries. Exploration noise should not land in the file engineers open for specs.

When comparing themes, judge hierarchy and task completion first. Color delight is secondary until the primary action is obvious.

If stakeholders love a draft, schedule a rebuild workshop the same week. Delay is how invented stacks become accidental source of truth.

Use Make changes structure prompts to move sections before you rewrite every string. Structure first, content second, polish third.

Common mistakes

  • Treating First Draft as production ready
  • Prompting novelty formats outside common UI patterns
  • Closing Actions before finishing style or prompt changes
  • Expecting your private design system as the generation library
  • Generating ten unrelated screens before choosing a direction
  • Skipping accessibility checks after a pretty theme preview

Related Figma AI articles: /blog/how-to-use-figma-agent-for-conversational-design, /blog/how-to-use-figma-ai-to-replace-placeholder-content, and /blog/how-to-use-figma-ai-to-rewrite-translate-and-shorten-text. Return to /explore/figma-ai for the broader guide set.

Related articles