First Draft using AI in Figma

Figma First Draft: Create AI Designs and Add Interactions

Key takeaways

• Generate app and website designs from a simple prompt.

• Explore visual directions without building every layout from scratch.

• Know when manual edits are quicker than another AI prompt.

• Check for inconsistent fonts and missing reusable styles.

• Use Add interactions to connect screens, then test the prototype.

A blank canvas can be a bit of a hurdle. You know you need an event listing, a checkout page or a form, but sometimes you just want something useful to start with. That is where Figma First Draft gets exciting.

It is a bit like working with a template, except you describe what you need and Figma’s AI generates a design for you. Is it going to do all the design work? No. Is it a very cool way to get a project moving? Absolutely.

Open First Draft and choose your starting point

Start in a new, blank Figma design file. In the Design workspace, open Actions from the bottom toolbar and search for First Draft. In the version used here, it appears under Design Tools and is a paid feature.

Before entering your prompt, choose the kind of output you want:

• Basic app: a more visually developed app design.

• App wireframe: a simpler starting point focused on structure.

• Basic site: a more visually developed website design.

• Site wireframe: a lower-fidelity website layout.

Think about whether you want images and visual styling at this stage, or whether you mainly need to work out the layout. That is the practical difference between starting with a higher-fidelity design and a lower-fidelity wireframe.

Generate a music event app with a simple prompt

For this example, choose an app and describe an event listing app for music. Click Make it, and give the AI a moment to do its thing.

The result is a music events screen with artist listings, event cards and concert imagery. Mine came back with names such as Coldplay, Taylor Swift, Ed Sheeran and Billie Eilish. Not exactly my personal line-up, but there is an app layout sitting on the canvas. That is pretty impressive.

The images are generated too. They can take a little longer to appear than the surrounding layout, so give them time to finish before judging the result.

You can use the same approach for a more specific screen, such as a checkout page for a music event app. The useful part is getting a concrete design to work with rather than starting with an empty frame.

A generated screen is not a working app

Open the result in the prototype player and try it out. It looks like an app, but initially it is mostly a mock-up. There is not much interactivity.

Visual completeness and functional completeness are different things. First Draft gives you the former as a starting point. You still need to inspect the layout, refine the design and connect the appropriate interactions.

Customise colours, corners, spacing and fonts

Once the first design exists, you can explore its visual direction using the available styling controls. This is one of the nicest parts of the workflow: you can quickly try alternatives without manually changing every individual element.

• Colours: switch between colourways to explore dark, light and more colourful treatments.

• Corner radius: try heavily rounded corners or remove the rounding for a boxier look.

• Spacing: open up the layout and see how a roomier arrangement feels.

• Fonts: experiment with different typefaces.

This feels familiar if you have used templates before. You are not accepting the first result as the final design. You are using it to find a direction, then making it your own.

Use follow-up prompts, but know when to edit manually

You can also ask First Draft to change the design. For example, I tried asking it to add a large hero area.

It produced a version of that idea, but not quite the one I had in my head. That is the tricky bit. A prompt can describe what you want, yet the result may still need adjusting.

For many small changes, I would simply make the edit myself. Use prompting when it saves work, not when it turns a quick adjustment into several rounds of explaining. The more comfortable you are with Figma, the easier that judgement becomes.

Check what First Draft has not built

A polished-looking screen can hide quite a lot of unfinished work. In this example, checking the document showed that it had not created a reusable asset library or styles for the design.

That matters when you want to develop the idea beyond one attractive screen. There is still work to do connecting the design to styles, Auto Layout and variables.

First Draft becomes more useful as your Figma skills improve. You can take the generated result, understand how it is put together and turn it into something more consistent and useful. It is not a substitute for learning the tool or developing your UX design judgement.

Generate a second screen, then check consistency

Next, try creating an event detail screen to go with the music listing. Return to First Draft and describe the new screen you need.

In my example, I prepared an empty frame for it, but First Draft created a separate new frame instead of filling the one I had made. So do not assume it will use your intended destination.

More importantly, the new screen did not automatically inherit the same typography. One design used Public Sans, while the other used Outfit.

They belonged to the same general app idea, but they were not a fully consistent set of screens. You need to check the fonts, colours and other visual decisions rather than assume the AI has matched them.

What I would love is to request a straightforward terms and conditions page or a trustworthy-looking checkout page and have it automatically adopt the existing design’s styles. That is the direction I am excited about, but it is not what this example delivers.

For now, think of First Draft primarily as idea generation followed by your own refinement.

Connect the screens with Add interactions

There is another useful AI feature alongside First Draft: Add interactions. Once you have the listing and detail screens, you can ask Figma to connect them.

1. Select the two screens you want to connect.

2. Open Actions and choose Add interactions.

3. Let Figma add the prototype connections.

4. Select the starting screen and press Play.

5. Test the route to the detail screen and the route back home.

In this example, the generated navigation worked: I could move from the listing to the detail screen and return home. That is a handy shortcut compared with starting every connection manually.

Still, test what has been added. The successful connections here demonstrate a basic route through the design, not a complete, fully functioning app.

Use AI as a starting point, just as you would a template

The way I am using First Draft is similar to the way I use templates. If I need a starting idea for a form or a common screen, it can help me get past the blank canvas quickly.

Traditional templates remain an option too. In the browser version of Figma, open the Figma menu, choose Home, and browse the available templates and community resources.

Neither route removes the need for design skills. Both give you something to evaluate, adapt and improve.

That is the exciting part of these AI features. They shortcut some of the initial work, while your knowledge lets you take the result further. Generate a draft, have a play with the styling, check what is missing, and then make it properly yours.

Key terms

First Draft

Figma’s AI-driven feature for generating an initial app or website design from a text prompt. It provides a starting layout rather than a finished product.

Wireframe and fidelity

A wireframe focuses on a screen’s structure with less visual detail. Higher-fidelity designs include more developed styling and imagery.

Hero area

A large, prominent section near the top of a screen. In this example, it was an addition requested through a follow-up prompt.

Add interactions

An AI feature that adds prototype connections between selected screens. Test those connections in the prototype player to check the navigation.

Styles, Auto Layout and variables

Figma features used to make designs more consistent and manageable. They are part of the work needed to take a generated draft further.

FAQs

Is Figma First Draft a paid feature?

In the version used for this example, First Draft is a paid feature. Look for it through Actions under Design Tools, or search for its name.

Does First Draft automatically match existing styles?

Do not assume it will. The separately generated screens in this example used different fonts, so checking and correcting visual consistency was still necessary.

Can First Draft create an interactive prototype?

The initial result is mainly a visual mock-up. Use Add interactions to create connections between screens, then open the prototype player and test the routes.

Do I still need to learn Figma?

Yes. Figma skills help you refine layouts, fix inconsistencies, make precise edits and connect the result to styles, Auto Layout and variables. First Draft is more useful when you can confidently improve what it generates.