Use First Draft with Figma AI
Note: Figma’s AI features are currently free while in beta, but usage limits may apply. When made generally available, we’ll update you on pricing.
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.
Tip: It’s not possible to generate designs using your own design system, although we hope to make that functionality available soon.
Make a first draft
- Click Actions in the toolbar.
- Select First Draft.
- 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.
- Enter a prompt, like: ‘A pricing page for a developer tools startup’, or click one of the available suggestions.
- Click Make it.
- Preview different themes by clicking the thumbnails underneath the prompt.
- 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
Note: Once you close Actions, you won’t be able to make changes to the design using First Draft libraries. Instead, you can keep editing your design by modifying its properties—just like with any other 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.
Tip: Want to compare different riffs? Duplicate the selected frame using Control D on Windows or Command D on MacOS and then keep making changes.
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
Tip: Select one or more parts of the design to only apply the prompt to the selected elements.
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.
Tip: Something not working as expected? Check out our guide to Troubleshooting AI tools in Figma Design →