With First Draft, you can transform ideas into editable wireframes or designs in a couple of minutes. This helps you explore a wider range of design possibilities quickly and reduces the amount of effort needed to create early explorations from scratch.

How it works

Figma AI uses Figma-built wireframing and design libraries as the foundation for generating designs.

Each library has a set of building blocks—or stacks of components—that are used to piece together your design based on the description you provide.

The libraries excel at generating designs that match common design patterns on websites and mobile apps. But, you might find things go awry when generating concepts from outside these design frameworks.

The following prompts typically generate strong outputs:

• A checkout page for a store that sells BBQs
• A food delivery app for pet food
• A marketing website for a content strategy consultancy

Figma AI might struggle with these prompts, as they don’t use design patterns common to websites or mobile apps:

• A book layout for a novel
• A birthday party invitation
• A flyer in the shape of a fish

Once you’ve generated a design, you can make changes to it using another prompt, or with a collection of style controls.

Make a first draft

1. Click Actions in the toolbar.
2. Select First Draft.
3. If needed, click Library to make a website or mobile app wireframe or basic design. If you don’t choose a library, Figma AI will select the one best suited to the prompt.
4. Enter a prompt, like: ‘A pricing page for a developer tools startup’, or click one of the available suggestions.
5. Click Make it.
6. Preview different themes by clicking the thumbnails underneath the prompt.
7. If you’re happy with the design, close the actions menu. If you’d like to refine it further, click Make changes.

Make changes to the design

You have two options for modifying your design when you click Make changes:

• Use a prompt to describe your changes
• Use the style controls to customize the color, typography, spacing, and border radius

You can switch back and forth between each option while making changes to a single design.

Use a prompt to customize the design

Using a prompt, you can modify the theme, content, or structure of your design. Here are some examples:

Theme

• Use a watermelon theme
• Try a different color scheme
• Make this more vibrant

Content

• Change the settings icon to a gear
• Make this about audiobooks rather than podcasts
• Change the names of the customers in the customer testimonial section

Structure

• Add another section under Top of the Charts called Trending in Germany
• Move the Featured section below the nav bar

Use style controls to customize the theme

Adjust the theme using the style controls gives you control over the color, border radius, spacing, and typography of the design.

Color

Click or to toggle between light and dark mode. You can also apply a new color to the theme by choosing one of the preset colors or clicking the color wheel to choose your own color.

Border radius

Drag the slider to increase or decrease the border radius for eligible objects.

Spacing

Drag the slider to increase or decrease the spacing between items.

Typography

Click title, body, or label to select a group of text elements to change. Then, click a new font to preview it in the design.