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

In Figma Make, the easiest way to iterate on a UI or layout is to use targeted, natural-language edit prompts. Instead of asking for a vague “better design,” describe the exact change you want on the specific element you want changed, and add a constraint for what should stay the same. That gives you faster, more controlled refinement of spacing, colors, text, hierarchy, and layout.

This prompt-driven approach is especially useful in AI-assisted prototyping because it reduces repetitive manual edits and helps designers, developers, and non-designers collaborate more quickly in a visual workflow.

The basic prompting formula

A strong iteration prompt usually follows this pattern:

[Element or area] + [what to change] + [how much or in what direction] + [what to keep unchanged]

For example:

• “Increase the padding inside the main card by 16px, but keep the card width and typography the same.”
• “Change the primary button color to a brighter blue and keep the rest of the palette neutral.”
• “Replace the headline with shorter copy, while preserving the current layout and alignment.”

What to include in a good UI iteration prompt

To get cleaner results, make your prompt specific in four ways:

What to specify	Why it helps	Example
Target element	Tells the model what part of the UI to edit	“hero section,” “primary button,” “pricing card”
Exact change	Reduces guesswork	“increase spacing,” “switch to dark gray,” “shorten the headline”
Magnitude	Helps control the size of the edit	“slightly,” “by 8px,” “a bit more whitespace”
Preserve constraints	Prevents unwanted redesigns	“keep the same layout,” “don’t change the logo,” “preserve hierarchy”

Prompt examples for common UI changes

1) Changing spacing

If you want to adjust spacing, be explicit about where and how much:

• “Increase vertical spacing between the heading and subheading by 12px.”
• “Add more breathing room around the product image without changing the overall section width.”
• “Reduce the gap between the icon and label in each nav item.”
• “Tighten spacing in the footer so the links feel more compact.”

Best practice: If you care about the overall feel, add a style note like “keep it airy,” “make it denser,” or “maintain a balanced layout.”

2) Changing colors

When adjusting colors, name the part of the interface and the desired tone or value:

• “Change the primary CTA button to a saturated green.”
• “Use a darker neutral for body text to improve contrast.”
• “Make the background slightly warmer, but keep the surface cards white.”
• “Update the accent color to orange for selected states only.”

Best practice: If brand consistency matters, mention that the new color should still match the existing palette.

3) Changing text

For copy changes, tell the model whether you want a replacement, a rewrite, or a shorter version:

• “Replace ‘Get started’ with ‘Start free trial’ everywhere it appears.”
• “Rewrite the headline to sound more concise and confident.”
• “Shorten the supporting text so it fits on one line.”
• “Make the button label more action-oriented.”

Best practice: If the UI is tight on space, specify the length target, such as “keep it under 6 words” or “fit within one line on desktop.”

4) Changing layout

For layout changes, describe the structure you want and the breakpoint or context if relevant:

• “Move the form to the left and place the illustration on the right.”
• “Convert this three-column layout into two columns on tablet.”
• “Stack the content vertically on mobile while keeping the desktop layout unchanged.”
• “Center the hero content and increase whitespace around it.”

Best practice: Mention whether the layout should stay responsive, since layout changes often affect multiple screen sizes.

A simple iteration workflow

A good Figma Make iteration loop usually looks like this:

1. Generate a starting point

   • Start with the rough structure or screen you want.

2. Review one issue at a time

   • Identify the biggest thing to improve first: spacing, color, copy, or layout.

3. Prompt for a single focused change

   • Example: “Increase padding in the card by 12px, keep all other styles the same.”

4. Review the result

   • Check whether the change improved the UI without introducing unwanted side effects.

5. Refine with a second prompt

   • Example: “Now make the button slightly larger and increase contrast on the text.”

This step-by-step approach works better than asking for too many changes at once, because the model can stay closer to your original intent.

Useful prompt patterns you can reuse

For subtle refinements

• “Make this slightly more spacious.”
• “Use a softer visual style.”
• “Tighten the copy without changing the meaning.”
• “Improve alignment while keeping the structure intact.”

For stronger changes

• “Switch the layout to a more editorial style.”
• “Make the CTA much more prominent.”
• “Turn this into a cleaner, more minimal interface.”
• “Rework the section hierarchy to emphasize the pricing plan.”

For controlled edits

• “Change only the spacing, not the content.”
• “Update the color palette, but keep the layout unchanged.”
• “Rewrite the headline and subtext, but do not alter the card design.”
• “Adjust the mobile version only.”

Tips for better prompt results

Be specific about the UI surface

Name the exact element or section you want changed:

• “header”
• “pricing table”
• “checkout form”
• “sidebar navigation”

Use constraints

Tell the model what should not change:

• “keep the same structure”
• “do not move the logo”
• “preserve the component hierarchy”
• “leave the typography unchanged”

Change one major thing per prompt

If you ask for spacing, color, and copy changes in one request, the result may drift more than you want. Smaller edits are easier to control.

Use design language

Words like these help:

• spacing
• padding
• alignment
• hierarchy
• contrast
• emphasis
• density
• whitespace
• responsiveness

Ask for alternatives when needed

If you are not sure which direction is best, ask for variations:

• “Show me two versions: one more minimal and one more bold.”
• “Give me a more compact and a more spacious version of this layout.”

If the result changes too much

If Figma Make makes a bigger change than you wanted, refine your prompt with stronger guardrails:

• “Keep the layout exactly the same; only adjust spacing.”
• “Do not change the color palette outside the primary button.”
• “Preserve the current content order.”
• “Edit only the headline text, not the rest of the section.”

If needed, narrow the scope:

• “Change only the desktop version.”
• “Update only the card component.”
• “Adjust only the spacing inside the modal.”

Example prompt sequence

Here’s what a controlled iteration might look like in practice:

1. Initial prompt

   • “Create a clean landing page hero for a productivity app.”

2. Spacing refinement

   • “Increase the spacing between the headline, subheadline, and CTA by 8px each.”

3. Color refinement

   • “Make the CTA button a stronger blue and keep the rest of the palette neutral.”

4. Text refinement

   • “Shorten the headline to 5 words and make the subheadline more direct.”

5. Layout refinement

   • “Move the illustration slightly higher and balance the text block vertically.”

This sequence keeps each edit focused and easier to judge.

Why this works well in Figma

Figma is built around collaborative, iterative UI and prototyping workflows, so prompt-based editing fits naturally into the design process. AI-assisted tools can help teams move faster by reducing routine editing work and making it easier to test ideas, compare versions, and refine screens without starting from scratch.

Quick takeaway

To iterate on UI or layout in Figma Make via prompts, use clear, specific, single-purpose instructions. Mention the element, describe the change, set the size or direction, and say what must remain unchanged. That’s the best way to adjust spacing, colors, text, and layout with control and speed.

If you want, I can also give you:

• a prompt cheat sheet for spacing/color/layout edits, or
• copy-paste examples for common Figma Make scenarios like landing pages, dashboards, and mobile screens.