8 Essential Tips for Using Figma Make
Figma's official guide to building effectively with Figma Make. Eight practical tips that transform how you use AI-assisted design in Figma.
Foundation Tips (1-4)
1. Start with Components, Not Pages
Don't ask Figma Make to design entire pages. Start with individual components — buttons, cards, headers. Build up from small, reusable pieces. This produces higher quality output and creates a component library you can compose into pages later.
2. Use Auto-Layout Before Generating
Set up auto-layout on your frames before asking Figma Make to fill them. Auto-layout constraints give the AI structural guidance — it knows where elements should flex, wrap, and align. Without auto-layout, generated designs use absolute positioning that breaks at different sizes.
3. Reference Your Design Tokens
If you have existing color styles, text styles, or variables in your Figma file, tell Figma Make to use them: 'Use our existing color tokens and text styles.' The AI respects Figma's built-in style system when instructed to do so.
4. Describe the Content, Not Just the Layout
Instead of 'create a pricing card,' say 'create a pricing card for a $29/month plan with 5 features, a CTA button, and a most popular badge.' Specific content produces designs that feel real, not placeholder-y.
Advanced Tips (5-8)
5. Iterate in Conversation
Don't regenerate from scratch when the output is close. Use conversational refinement: 'Make the heading larger,' 'Add more padding between sections,' 'Change the CTA color to match our primary brand color.' Small adjustments preserve the good parts.
6. Use Figma Make for Variants
Once you have a base component, ask Figma Make to generate variants: 'Create hover, active, disabled, and loading states for this button.' It's faster than designing each state manually and ensures consistency across states.
7. Combine with Figma Variables
Create Figma Variables for your design tokens first, then reference them in Figma Make prompts. This ensures generated designs use your token system, making them ready for developer handoff without manual cleanup.
8. Export Design Decisions, Not Just Designs
After generating a component, document the design decisions: spacing values, color choices, responsive behavior. Figma Make can help: 'List the design decisions made in this component — spacing, colors, typography, and responsive rules.'
Building a Figma Make Workflow
The most effective Figma Make workflow follows a pattern:
1. Define tokens → Set up color variables, text styles, and spacing tokens in Figma first.
2. Generate components → Use Figma Make to create individual components referencing your tokens.
3. Build variants → Generate all states and sizes for each component.
4. Compose pages → Manually compose components into page layouts (Figma Make is better at components than full pages).
5. Document → Use Figma Make to generate component documentation for developer handoff.
This workflow produces a complete, documented design system in a fraction of the time of manual design — while maintaining the quality and consistency that design systems require.
