First Draft: Turn a Prompt into an Editable Design

Staring at an empty canvas is the slowest part of design. First Draft removes it. You type a sentence describing the screen you want, and Figma generates a real, editable layout in a minute or two: frames, text, buttons, and structure you can immediately start moving around. It grew out of Figma's earlier "Make Designs" feature and is now the main way to go from idea to something on the page.

This is the single most useful native AI feature for most people, designer or not. In this lesson you will learn how to run it, how to write a prompt that gets a usable result, and, just as importantly, where it stops being helpful.

What You'll Learn

• How to launch First Draft and pick the right output style
• How to write a First Draft prompt that produces a usable layout
• How to iterate when the first result is not quite right
• The honest limits of First Draft so you do not fight it

The prompt-to-design pipeline

Before the steps, here is the shape of what happens. First Draft is not magic; it is a pipeline, and knowing the stages tells you where you can steer it.

The key word is the last box. First Draft gives you a starting point, not a finished product. The value is that you edit a real layout instead of building one from nothing.

Step by step

1. Open First Draft. Start a new file or frame, then open Figma's generative starting point (the AI or Actions entry point covered in the last lesson) and choose First Draft. Depending on when your account was set up, this may be presented through Figma's AI agent, but the flow is the same.
2. Choose an output style. Figma typically lets you pick between a lower-fidelity wireframe and a more designed look, and between an app screen and a website. Pick the one closest to your goal. Wireframes are great for thinking; a designed look is better for showing stakeholders.
3. Write your prompt. Describe the screen in one or two clear sentences. Be specific about the purpose, the key elements, and who it is for.
4. Generate and wait. Figma builds the layout on the canvas. Give it a moment.
5. Edit like any Figma file. The result is fully editable. Move frames, change text, swap colors, delete what you do not need.

Writing a prompt that works

The difference between a vague result and a great one is the prompt. Weak prompts describe a category; strong prompts describe a specific screen with specific parts.

Weak: "A dashboard."

Strong: "A dashboard screen for a personal budgeting app. Show a total balance at the top, a spending-by-category bar chart, a list of recent transactions, and a button to add a new expense. Clean and friendly, aimed at first-time budgeters."

Use this simple recipe:

• What screen it is (a dashboard, a signup page, a product detail screen)
• For what product and audience (a budgeting app for beginners)
• Key elements it must contain (balance, chart, transaction list, add button)
• A tone word or two (clean, friendly, minimal, bold)

Try a few real prompts to feel the difference:

• "A mobile onboarding screen for a meditation app. A calming headline, a short subtitle, an illustration area, and a large Get Started button."
• "A pricing page for a small SaaS tool with three plan cards, a monthly and yearly toggle, and a FAQ section below."
• "A restaurant homepage with a hero photo area, a short intro, a menu highlights section, and a Reserve a Table button."

Iterating on the result

The first draft is rarely the last. You have three ways to improve it:

• Reprompt. Run First Draft again with a sharper or expanded prompt. Add the detail that was missing, such as "include a search bar in the header."
• Edit directly. Because the output is native Figma, you can just fix it by hand. Change copy, resize, restyle, rearrange. Often faster than reprompting for small tweaks.
• Mix and match. Generate two or three versions from slightly different prompts, then combine the best parts into one screen.

A good workflow is: prompt to get 80 percent of the structure, then edit by hand for the last 20 percent. Do not keep reprompting hoping for perfection.

The honest limits

First Draft is a fast starting point, not a production-ready deliverable. Keep these limits in mind so you use it well:

• It does not know your design system. By default it will not perfectly match your brand's exact components, spacing, and tokens. Expect to restyle.
• Content is placeholder-quality. The text and images are stand-ins to show structure. Replace them with real content.
• Accessibility and polish are on you. Contrast, semantics, real states, and edge cases still need a human pass.
• It is best for early stages. Use it for exploration, first drafts, and getting unstuck, not for the final pixel-perfect handoff.

Treat it like a talented intern who sketches fast. You direct, you refine, you approve.

Try it now

Open a new file and generate one screen from this prompt: "A profile settings page for a fitness app with an avatar, editable name and email fields, notification toggles, and a Save Changes button." When it appears, change three things by hand: the headline text, one color, and the button label. You just ran the full prompt-to-design loop.

Key Takeaways

• First Draft turns a written prompt into an editable Figma layout in a minute or two.
• Pick the output style (wireframe or designed, app or site) that matches your goal.
• Strong prompts name the screen, the product and audience, the key elements, and a tone.
• Improve results by reprompting, editing directly, or combining versions.
• First Draft is a starting point: it does not match your design system, and content and accessibility still need a human pass.