Use Figma's First Draft to Skip the Blank Canvas

What This Does

You describe a screen in plain language, and Figma builds an editable first-pass layout using real UI components instead of a blank frame. It's a starting point for early exploration, not a finished design, but it turns the worst part of wireframing (staring at an empty page) into an editing task.

Before You Start

• You have Figma open with a file you can edit
• Your seat is on a paid Figma plan, since Figma's AI tools are a paid-plan feature. Check figma.com/pricing for which tiers currently include First Draft. If you don't see an Actions or sparkles icon in your toolbar, ask whoever manages your team's Figma billing whether AI features are turned on for your org
• A rough idea of the screen or flow you want, even a one-sentence description is enough

Steps

1. Find the AI feature

Look for Actions in the Figma Design toolbar (it may show as a sparkles icon, or open with Cmd+K on Mac / Ctrl+K on Windows). Click it, then select First Draft. Figma has been shifting some of this generative flow into a newer "Figma Agent" entry point during 2026, so if First Draft isn't listed by name, look for Agent or a similarly labeled generative option in the same Actions menu.

2. Tell it what you need

You can pick a Library first (website wireframe, mobile app wireframe, or a more finished "basic" style) or let Figma choose based on your prompt. Then type what you want, something like a login flow, a settings page, or a pricing table, and click Make it. Figma will offer a few theme thumbnails to preview before you commit to one.

3. Review and use the result

Treat the output as a rough layout, not a shipped design. Check whether the component choices, spacing, and hierarchy actually fit your product, then click Make changes if you want another pass while the Actions panel is still open. Once you close it, the generated frame behaves like any normal set of Figma layers, so make any further edits by hand from there.

Real Example

Scenario: You're kicking off a three-screen mobile onboarding flow for a fitness app and don't want to spend the first twenty minutes placing default buttons.

What you type/do: In the First Draft prompt, type "A mobile onboarding flow with 3 screens: welcome, permissions request, and account creation," then pick the mobile app wireframe library and click Make it.

What you get: Three linked frames with a welcome screen, a permissions prompt with placeholder copy, and a signup form, built from generic UI components. None of it is final, but you now have something to restructure instead of a white page.

Tips

• Use First Draft for the first fifteen minutes of a project, not the last. It's built for low-fidelity exploration, and it shows.
• Vague prompts get vague layouts. "A settings page" works less well than "a settings page for a subscription app with account, billing, and notification sections."
• If a generated screen leans on a component that doesn't exist in your team's design system, swap it for your real component before sharing the file with anyone else. First Draft doesn't know your library's naming conventions.

Tool interfaces change. If a button has moved, look for similar AI/magic/smart options in the same menu area.