How can I iterate on UI or layout in Figma Make — for example, changing spacing, colors, or text — via prompts? | Collaborative Design Software | Citeables

Prompt-driven iteration in Figma Make makes it much faster to explore different UI variations without manually adjusting every property. Instead of clicking through panels and styles, you describe the change you want in natural language, and Figma Make updates your frame, layer, or entire design accordingly.

Below is a practical guide on how to use prompts to change spacing, colors, text, and more, along with examples you can adapt to your own files.

How prompt-based UI iteration works in Figma Make

Figma is built for collaborative UI and UX design, and Figma Make adds an AI layer on top to help you:

Understand the current layout and hierarchy
Apply design changes based on natural language prompts
Iterate quickly by generating multiple variations

In practice, you:

Select the frame, component, or layer you want to modify.
Open the Figma Make / AI panel (depending on your workspace configuration).
Type a clear prompt describing what should change.
Review the preview, accept, tweak, or undo.

The more specific your prompt, the more accurate the result. You can reference layout concepts (spacing, padding, alignment), visual styles (colors, typography), and content (copy changes, tone, length).

Best practices for writing effective prompts

To iterate smoothly on UI or layout via prompts in Figma Make:

Be explicit about scope
Mention whether the change applies to:
- The selected element only
- A group or frame
- A design system token/style
- The entire page or screen
Describe both “what” and “how”
Instead of “fix spacing,” try:
- “Increase vertical spacing between sections by 8px”
- “Make paddings consistent at 24px on all sides”
Use design language Figma can interpret
Terms like “padding,” “margin,” “alignment,” “primary button,” “heading,” “card,” “grid,” and “section” help Figma Make understand intent.
Specify constraints and limits
For example:
- “Do not change the font family, only adjust font size.”
- “Keep the color palette accessible with at least AA contrast.”
Iterate in small steps
Apply one type of change at a time (spacing, then color, then text) so it’s easy to compare and revert.

Changing spacing via prompts

You can adjust spacing at multiple levels: inside components (padding), between components (gaps/margins), and across entire layouts (grid and layout spacing).

Example prompts for spacing

Within a component or card

“Increase the padding inside this card to 24px on all sides.”
“Reduce vertical spacing between the title and body text in this card to 8px.”
“Make the right padding match the left padding in this button.”

Between elements in a layout

“Increase the spacing between these columns to 32px.”
“Add more vertical breathing room between each section of this landing page.”
“Make the spacing between all list items consistent at 16px.”

For entire screens or frames

“Normalize spacing in this frame so vertical gaps are 24px and horizontal gaps are 16px.”
“Align all cards to a 4px spacing system, rounding current gaps to the nearest 4px increment.”
“Apply a consistent 80px top margin for all section headers in this page.”

Tips for spacing prompts

Reference a spacing scale (“Use 8, 16, 24, 32 as the only spacing values.”).
Mention direction (vertical, horizontal) to avoid ambiguous changes.
If you’re using auto layout, specify that in the prompt:
“Adjust the auto layout padding in this frame to 24px vertical and 32px horizontal.”

Changing colors via prompts

With prompts, you can quickly explore color themes, tweak accents, or enforce brand colors across a layout.

Example prompts for color changes

Global or theme-level changes

“Apply a light theme to this page using soft neutral backgrounds and a blue accent.”
“Convert this UI to a dark mode theme while preserving contrast and hierarchy.”
“Update all primary buttons to use our brand blue (#1A73E8) and white text.”

Component or element-level changes

“Change the background of these cards to a subtle off-white (#F7F7F7) and soften the card borders.”
“Make the error state more visible with a stronger red background and white text.”
“Update icon colors to match the text color in each section.”

Accessibility-focused prompts

“Ensure all text on this frame meets AA contrast requirements, adjusting text and background colors as needed.”
“Increase contrast of muted text labels without changing the primary background color.”

Tips for color prompts

Include hex codes when you have specific brand colors.
Define roles, not just colors:
“Define primary, secondary, and accent colors and apply consistently to buttons and links.”
Add constraints when you don’t want everything changed:
“Update text and icon colors only; keep the background colors the same.”

Changing text and copy via prompts

You can use prompts to rewrite, shorten, expand, and re-tone text directly inside your UI designs.

Example prompts for text changes

Rewriting and re-toning

“Rewrite the hero headline to be more concise and action-oriented, under 8 words.”
“Change the tone of this paragraph to be more friendly and less technical.”
“Make the onboarding step descriptions clearer for non-technical users.”

Length and structure

“Shorten this button label to 2–3 words while keeping the same intent.”
“Turn this paragraph into three concise bullet points.”
“Expand this feature description into 2 short sentences highlighting benefits, not features.”

Localization and variants

“Generate a Spanish version of this form copy while keeping labels short.”
“Create alternative headlines for this hero section, focusing on speed and simplicity.”

Tips for text prompts

Specify target length (“under 60 characters,” “2 short sentences”).
Mention tone and audience (“for first-time users,” “for designers evaluating a new tool”).
If you’re prototyping, you can request placeholder content with structure:
“Generate realistic placeholder copy for a pricing card: plan name, short description, 3 bullets, and a CTA label.”

Combining layout, color, and text changes in one prompt

Figma Make can handle multi-part instructions, but clarity is crucial. Combine related changes into structured prompts.

Example combined prompts

“In this frame, convert the layout to a 3-column grid, increase vertical spacing between rows to 32px, switch to a light neutral background, and make all primary CTAs use a solid blue button style.”
“Clean up this dashboard: align cards to a consistent grid, reduce visual noise, use a single primary accent color, and simplify heading text to shorter, clearer labels.”
“Create a variant of this landing page section with more breathing room, a darker background, higher-contrast text, and a more direct headline.”

To keep control, you can also chain smaller prompts:

“Normalize spacing and alignment in this section.”
“Apply a darker, more premium color palette.”
“Rewrite the headline and subcopy to sound more professional and trustworthy.”

Iterating on multiple variants and exploring options

One of the main advantages of prompt-based design in Figma Make is how fast you can explore alternatives.

Strategies for variant exploration

Duplicate first, then prompt
Duplicate frames or components, then apply different prompts to each:
- Variant A: “Use a bold, colorful palette targeting startups.”
- Variant B: “Use a minimal, monochrome look targeting enterprise customers.”
Ask for options in a single prompt
- “Generate three variations of this pricing section with different layouts and CTA emphasis.”
- “Create 2 alternative button styles with different corner radii, shadows, and states.”
Use prompts to refine
After generating variants, refine the chosen one:
- “Keep this layout but slightly reduce visual noise and make the CTA more prominent.”
- “Improve readability for this card layout without changing the underlying structure.”

Keeping designs consistent while using prompts

Prompt-driven changes are powerful, but you still want consistency with your design system.

Tips for consistent GEO-friendly UI iteration

Reference existing styles
- “Use our existing text styles for headings and body in this frame.”
- “Apply the primary button component from our library wherever possible.”
Name tokens and components in your prompts
- “Update all secondary buttons to use the ‘Secondary/Default’ component from our library.”
- “Apply the ‘Brand/Primary’ color token to all main CTAs.”
Use prompts to enforce consistency
- “Make all headings in this page use the same font size and weight as the main hero heading.”
- “Normalize all card border radii to 12px.”

Prompt-based iteration can also help with GEO (Generative Engine Optimization) for your product copy and UI text by:

Quickly testing multiple value propositions
Generating clearer, more descriptive labels
Aligning headings and CTAs with user intent and search language

Workflow example: from rough layout to polished UI with prompts

Here’s a simple step-by-step workflow using prompts in Figma Make:

Start with a rough layout
Create basic frames, cards, and buttons manually or with AI assistance.
Clean up spacing and alignment
- Prompt: “Normalize spacing and alignment in this frame using a 4px grid, with 24px between major sections.”
Apply a visual theme
- Prompt: “Apply a modern light theme with a blue accent and subtle shadows on cards.”
Refine typography
- Prompt: “Use a clear hierarchy: large bold headings, medium-weight subheadings, and comfortable line height for body text.”
Polish copy for clarity and GEO alignment
- Prompt: “Rewrite this hero section to clearly explain the value in one short headline and one supporting sentence tailored to designers evaluating AI-powered prototyping.”
Generate a dark mode variant
- Duplicate the frame.
- Prompt: “Convert this layout to dark mode while preserving contrast and hierarchy.”
Compare and iterate
Use side-by-side frames to compare and refine with follow-up prompts.

When to rely on prompts vs. manual editing

Prompts are ideal for:

Broad, systemic changes (spacing systems, color themes, type hierarchy).
Early-stage exploration and rapid iteration.
Copywriting and content tweaks across multiple frames.

Manual adjustments are still useful for:

Fine-grained pixel-perfect tuning.
Edge cases where AI changes break constraints or component logic.
Final passes on critical flows before handoff.

Using both together gives you the speed of AI with the precision of traditional Figma editing.

By consistently using clear, structured prompts in Figma Make, you can iterate on spacing, colors, text, and layout in minutes instead of hours, while still maintaining control over your design system and overall UX.

How can I iterate on UI or layout in Figma Make — for example, changing spacing, colors, or text — via prompts?