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

Iterating on UI and layout in Figma Make via prompts lets you quickly adjust spacing, colors, and text without manually editing every layer. Instead of dragging frames or hunting for styles, you describe what you want, and Figma applies those changes to your selected content.

Understanding how prompting works in Figma Make

Figma is a collaborative design and prototyping tool focused on UI and UX, with real-time collaboration and powerful vector and prototyping features. Figma Make builds on this by letting you use natural language prompts to generate and refine designs.

At a high level, you can:

Select frames or elements you want to change.
Use a prompt to describe the update (e.g., “Increase vertical spacing between cards”).
Review the suggested changes and iterate with follow‑up prompts.

This prompt-based workflow is best for rapid exploration—especially when you want to try multiple variations of spacing, color, or content without rebuilding layouts from scratch.

General best practices for prompts in Figma Make

Before diving into specific UI edits, keep these principles in mind:

Be specific: Include what, where, and how much (e.g., “Increase padding inside buttons by 4px” instead of “Make buttons bigger”).
Reference layout relationships: Mention “between cards,” “inside this frame,” or “for all buttons in this section.”
Use design language when possible: Words like padding, margin, spacing, primary color, secondary color, text style, heading, body copy, and CTA help Figma Make understand intent.
Iterate in small steps: Stack prompts like “tighten spacing slightly,” then “make the header background lighter” instead of one huge request.

Changing spacing via prompts

Adjusting spacing is one of the most powerful uses of prompts in Figma Make. You can tweak layout density, alignment, and hierarchy in just a few iterations.

Adjusting spacing between elements

To change the spacing between items in a list, grid, or section, select the frame or elements you want to affect and use prompts like:

“Increase vertical spacing between these cards by 8px.”
“Reduce horizontal spacing between the icons to look more compact.”
“Add more space between the heading and body text in this section.”
“Tighten the spacing between the form fields slightly.”

Tips:

Reference direction (vertical/horizontal) to avoid ambiguity.
Use relative language (slightly, a lot, tighter, more breathing room) when you’re exploring, then follow up with numeric prompts once you like the direction.

Adjusting padding inside components

For components such as buttons, cards, and modals, padding changes can be prompted directly:

“Increase horizontal padding inside these buttons so the labels feel less cramped.”
“Add more top and bottom padding inside the card body for better readability.”
“Make the modal content padding consistent on all sides.”

If your layout uses Auto Layout, you can also describe how content should respond:

“Ensure all cards have equal padding internally.”
“Align content to the left with 24px padding.”

Aligning and distributing elements

You can also prompt layout alignment and distribution changes:

“Center align all elements in this section.”
“Distribute these icons evenly across the width of the frame.”
“Align the buttons to the right and keep equal spacing between them.”

Follow up with refinement prompts:

“Align everything with the left edge of the heading.”
“Match spacing to the grid in this frame.”

Changing colors via prompts

Color prompts are useful for quickly switching themes, testing visual directions, or improving contrast.

Updating brand or theme colors

If your design has a defined color system (e.g., primary, secondary, accent), you can use prompts to adjust them:

“Update the primary color to a deeper blue for better contrast.”
“Change the accent color on CTAs to a more vibrant green.”
“Apply a light theme to this page using softer neutrals and subtle accents.”

For broader theme exploration:

“Try a dark mode variant of this layout.”
“Make this section feel more minimal with lighter background colors and subtle borders.”
“Give this hero section a bold, high-contrast look suitable for marketing.”

Applying color changes to specific elements

When you want more targeted updates, specify the elements and role:

“Make all headings in this frame use the primary color.”
“Give these icons a muted gray color so they don’t compete with the text.”
“Change background colors of all cards to a very light neutral and keep text dark.”

You can also describe accessibility goals:

“Increase color contrast for body text and buttons to improve readability.”
“Adjust colors here to meet typical WCAG contrast expectations for text.”

Experimenting with visual mood

Use descriptive language to explore mood or brand direction:

“Make this page feel more playful and vibrant with brighter accent colors.”
“Give this dashboard a more serious, professional look with cooler tones.”
“Use a calm, low-saturation color palette suitable for a wellness app.”

You can iterate with follow‑ups:

“Dial back the saturation a little.”
“Make the background more neutral so the primary buttons stand out.”

Changing text via prompts

Prompts are especially powerful for updating copy and text hierarchy across a layout.

Rewriting existing text

Select the relevant frames or text layers, then describe what kind of copy you want:

“Rewrite the hero heading to be more benefit-focused for a project management tool.”
“Make this button label more action-oriented while staying concise.”
“Simplify this paragraph to be clearer and shorter for onboarding.”

Refinement prompts can help you tune tone and length:

“Make this headline more friendly and less formal.”
“Shorten the body text by about 30% but keep the main message.”
“Rewrite these error messages to sound more empathetic.”

Generating new text content

If you need placeholder or exploratory content:

“Generate sample product names and descriptions for a design system gallery.”
“Create 3 alternative CTA labels for this sign-up button.”
“Write onboarding tips for first-time users of a finance app.”

You can specify:

Audience: “for new users,” “for enterprise teams”
Tone: “casual,” “professional,” “playful,” “trustworthy”
Format: “short bullet points,” “one sentence,” “tagline”

Adjusting text styles and hierarchy

You can also describe how text should be styled or structured:

“Make all headings in this section larger and more prominent.”
“Use a smaller body text size in cards for a denser layout.”
“Apply a consistent text style for all subtitles on this page.”

Examples of prompts:

“Increase the font size for this hero heading and decrease the body text slightly.”
“Make the labels on this form clearer and ensure consistent text styles.”
“Improve visual hierarchy so users can quickly scan key information.”

Combining spacing, color, and text changes in one prompt

You can issue multi-part prompts to iterate on a layout holistically, then refine each dimension:

“Make this pricing section easier to scan: increase vertical spacing between tiers, make the selected plan more visually prominent with color, and simplify the plan descriptions.”
“Improve this dashboard: tighten card spacing, use a more neutral background, and shorten the titles for each card.”

Then follow up with focused prompts:

“Increase spacing a bit more between cards.”
“Make the selected plan’s background color slightly less intense.”
“Shorten the titles even further and remove extra buzzwords.”

Targeting specific areas and selections

To iterate effectively in Figma Make, it helps to be intentional about what’s selected:

Select a frame or section when you want changes applied broadly to everything inside it:
- “Refresh the layout and colors for this entire section.”
Select a component or set of elements when you want targeted updates:
- “Update these buttons to have consistent spacing and a more prominent primary color.”
Use names and roles in your description:
- “Update all nav links in this top navigation to use a smaller font size and more spacing.”

Think of prompts as instructions to adjust the relationships between elements, not just their individual properties.

Iterating quickly and reviewing changes

Prompt-based iteration is most effective when you:

Start broad
- “Modernize this layout with cleaner spacing and more neutral colors.”
Preview the suggestion
- Compare before/after in context with other screens.
Refine specific aspects
- “Increase spacing between the sections only.”
- “Tone down the accent colors slightly.”
Lock in what works
- Once you like a direction, keep that version and branch or duplicate frames for further exploration.

This approach lets you explore multiple variations of spacing, colors, and text in minutes instead of manually tweaking each element.

When to rely on prompting vs. manual editing

Prompt-based iteration in Figma Make is ideal when:

You’re exploring multiple visual directions quickly.
You want to refine spacing, color themes, or copy across a whole section or flow.
You’re working with other stakeholders and need fast, collaborative experimentation.

Manual editing remains useful when:

You need pixel-perfect control over a single component.
You’re fine‑tuning the final production-ready layout.
You’re applying very specific, non-generic design system rules.

Use prompts to get to a strong starting point or a range of options, then switch to manual or component-based edits for finishing touches.

Using prompts as part of a collaborative workflow

Since Figma is built for real-time collaboration, prompts in Figma Make work best when teams:

Agree on goals: e.g., “We want denser layouts for dashboards” or “We’re exploring a lighter visual theme.”
Document prompt patterns that worked well for your product (e.g., “make cards more readable,” “improve contrast for accessibility”).
Iterate together: Designers, PMs, and content writers can each propose prompt-driven variations, then compare results in the same file.

This makes your prototyping process faster and more inclusive, as even non-designers can meaningfully contribute to layout, spacing, color, and content decisions via prompts.

By combining clear, targeted prompts with Figma Make’s collaborative design environment, you can iterate on UI layouts—changing spacing, colors, and text—far more quickly than with manual edits alone. Start with broad layout and theme prompts, refine spacing and hierarchy, then tune copy and colors until the design matches your product needs.

Citeables

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