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

Iterating on UI or layout in Figma Make via prompts lets you explore variations faster than you could by manually nudging pixels. Instead of clicking through properties one by one, you describe what you want to change—spacing, colors, typography, hierarchy—and let the system generate options you can refine.

Below is a practical guide to using prompts effectively for layout iteration, with examples you can adapt to your own files.

How prompt-based iteration fits into your Figma workflow

Figma is built for collaborative interface and UX design, and prompt-based changes in Figma Make extend that by:

Speeding up exploration: Quickly generate alternative layouts, color treatments, or type scales.
Keeping everything editable: Resulting frames, components, and styles stay in Figma, so you can tweak them like any other design.
Supporting collaboration: Teammates can review, comment on, and build on generated variations in real time.

Think of prompts as a fast “first pass” that you refine with your usual Figma tools.

General best practices for prompting in Figma Make

Before diving into specific UI properties, a few universal tips:

Be specific about the target: Mention the frame, section, or element: “hero section”, “primary CTA button”, “card layout”.
Describe the goal, not just the action: “Make this easier to scan” or “Improve visual hierarchy” plus details like spacing or typography.
Set constraints: Call out what must not change: “Keep brand colors”, “Don’t change font family”, “Don’t move the navigation”.
Reference tokens or styles when possible: “Use the brand spacing scale”, “Use our primary color token”.
Iterate in rounds: Use short prompt cycles: generate → review → refine with a follow-up prompt.

Iterating on spacing with prompts

Spacing is one of the easiest and most impactful aspects of layout to tune via prompts. You can adjust padding, gaps, and alignment for cleaner structure and better readability.

Prompts for global spacing adjustments

Use these when you want the overall layout to breathe more or feel more compact:

“Increase vertical spacing between all sections in this page to create a more airy layout, but keep the grid and alignment the same.”
“Tighten spacing across this mobile screen to fit above the fold, reducing vertical gaps by about 20% without overlapping elements.”
“Normalize spacing between cards in this grid so that horizontal and vertical gaps are consistent and aligned to a 4px baseline.”

Prompts for local spacing changes

Target specific components or regions:

“In this hero section, increase padding around the text block and CTA so the content feels more balanced and centered.”
“For these feature cards, add more internal padding and increase spacing between icon, title, and body copy for better readability.”
“Adjust spacing in this form so fields are evenly spaced and labels are consistently aligned with inputs.”

Spacing with constraints and design tokens

If your team uses a spacing scale:

“Refactor spacing in this layout to use our spacing tokens (4, 8, 12, 16, 24, 32). Snap all gaps and paddings to the closest token without changing the overall structure.”
“Reduce visual clutter by merging very small gaps into the nearest token value; avoid introducing new custom spacing values.”

Iterating on color via prompts

Prompts can help you explore new color treatments while staying within brand guidelines.

Adjusting colors while preserving brand

To keep your brand’s core palette:

“Apply a lighter, more minimal color treatment to this screen. Keep the brand primary and background colors, but reduce the number of accent colors.”
“Increase contrast for accessibility on text and buttons while staying within our brand palette and not changing the logo colors.”
“Switch this layout to a dark theme using brand-compliant dark-mode colors, maintaining the same hierarchy and emphasis.”

Exploring alternative color schemes

When you want variations:

“Generate three color variations for this pricing section: one with a soft, neutral palette, one high-contrast, and one with a bold accent for the primary plan.”
“Recolor these icons to use a monochromatic palette based on our primary color, reducing visual noise.”
“Make this dashboard visually calmer by toning down background tints and using color primarily for key data points and alerts.”

Color with accessibility and hierarchy in mind

Explicitly call out readability and emphasis:

“Improve the visual hierarchy using color: emphasize primary CTAs and key metrics, de-emphasize secondary actions and helper text.”
“Adjust text and background colors for WCAG AA contrast where possible, avoiding any changes to type size or layout.”

Iterating on text and typography via prompts

You can prompt Figma Make to refine the content itself (where supported) as well as how typography appears in the layout.

Editing the text content via prompts

For copy changes within your UI:

“Rewrite all headings in this section to sound more action-oriented and concise (max 6 words per heading). Keep product terminology the same.”
“Simplify body copy for this onboarding screen to a friendly, plain-language tone while preserving the same key messages.”
“Generate microcopy for error messages in this form, using clear, helpful language and no more than one sentence per error.”

Always follow up by reviewing copy for accuracy and brand tone.

Adjusting typography styles

Control size, weight, and hierarchy:

“Improve typographic hierarchy on this page: make headings more prominent, adjust subheadings for better grouping, and ensure body text remains at least 14px.”
“Convert all text styles in this screen to use our typography scale (H1, H2, H3, body, caption) without changing the font family.”
“Reduce typographic noise by limiting each screen to no more than three distinct text styles; consolidate similar sizes.”

Structuring text for readability

Combine content and layout instructions:

“Reformat this long block of text into a heading, short paragraph, and 3–5 bullet points for easier scanning.”
“Adjust line length and line height for body text in this article layout to be comfortable on desktop (around 60–80 characters per line).”

Combining spacing, color, and text changes in one prompt

You can ask Figma Make to handle multiple layout dimensions at once, as long as you specify priorities and constraints.

Examples:

“Polish this landing page layout:
- Increase spacing between sections for clearer separation
- Improve typographic hierarchy for headings and CTAs
- Use color to highlight the primary action and key benefits
  Keep the navigation, brand colors, and imagery unchanged.”
“Make this mobile onboarding flow more readable by:
- Increasing vertical spacing between cards
- Simplifying headings to a maximum of 5 words
- Using a softer background color for non-critical screens
  Don’t change button placement or text field order.”

If the result feels off, follow with a corrective prompt like “Undo color changes but keep the spacing improvements.”

Structuring prompts for different layout goals

Different layout objectives call for slightly different prompting strategies.

For clarity and usability

“Optimize this account settings screen for clarity: group related settings more tightly, add more spacing between different groups, and ensure labels are visibly linked to their controls.”
“Adjust layout to make the primary user task more obvious. Reduce emphasis on secondary links and highlight the main CTA.”

For visual hierarchy and emphasis

“Strengthen visual hierarchy on this page: make primary content more prominent, secondary content less dominant, and UI chrome more subtle.”
“Use spacing, typography, and color to guide the eye from top to bottom through the key steps.”

For responsiveness (desktop ↔ mobile)

“Reflow this desktop layout into a mobile layout: stack columns where necessary, adjust spacing to fit on a small screen, and ensure tap targets are at least 44px high.”
“Adapt this mobile screen into a desktop layout using a two-column design where appropriate, while maintaining the same information hierarchy.”

Workflow tips: iterating safely and efficiently

To get the most out of prompt-based iteration in Figma Make:

Work on duplicates: Before prompting, duplicate your frame or page so you can compare “before” and “after.”
Name variations clearly: Use consistent naming like Home / v1 – original, Home / v2 – more spacing, Home / v3 – dark theme.
Iterate in small steps: Change one dimension at a time (spacing, then color, then typography) when you need precise control.
Use comments for review: Ask teammates to comment directly on generated layouts, then refine with follow-up prompts or manual edits.
Manual fine-tuning: Treat the prompt output as a strong draft. Use Figma’s standard layout tools (Auto Layout, grids, styles) to polish alignment and details.

Example prompt templates you can copy

You can adapt these to your own projects:

“Improve this dashboard layout by increasing spacing between sections, aligning cards to a consistent grid, and using color only for primary metrics and alerts. Don’t change typography.”
“Make this checkout screen more compact without sacrificing readability: reduce vertical gaps between fields, tighten the order summary, and keep CTAs clearly separated.”
“Create a visually lighter variant of this hero section by softening background colors, increasing whitespace, and keeping the same headline and CTA text.”
“Refine typography on this product detail page: emphasize the product name and price, standardize body text to our base size, and ensure there are no more than three text styles.”

Using prompts in Figma Make to iterate on spacing, colors, and text helps you rapidly explore UI options while still leveraging Figma’s collaborative and vector-based design environment. Start with small, focused changes, keep constraints clear, and refine each iteration until it aligns with your product’s UX goals and brand standards.

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