How can I use Figma Make to quickly spin up different UI variants for A/B testing and share them with stakeholders or users?

Most product teams want to move from idea to validated UI quickly, without getting bogged down in handoffs or endless file versions. With Figma Make and Figma’s collaborative design environment, you can rapidly generate UI variants for A/B testing, prototype them, and share them with stakeholders or users in just a few steps.

Below is a practical, end‑to‑end workflow for how you can use Figma Make to quickly spin up different UI variants for A/B testing and share them with stakeholders or users.

Clarify the goal of your A/B test first

Before you start generating UI variants, define:

What you’re testing: e.g., button label, layout, pricing card design, navigation pattern, onboarding flow.
The success metric: click‑through rate, conversion rate, task completion time, error rate, etc.
Your constraints: brand guidelines, design system components, accessibility requirements, and technical limits.

Having a clear hypothesis (e.g., “A larger primary CTA above the fold will increase sign‑ups”) will help you guide Figma Make, evaluate variants quickly, and avoid noise.

Set up a clean base file in Figma

Figma is a collaborative web application for interface design with real‑time collaboration, vector editing, and prototyping features. Before using Figma Make for variants, create a solid foundation:

Create a base frame for the “control” UI
- Design your current or best‑guess version of the screen.
- Use your existing design system components (button, inputs, cards, navigation) so the variants stay consistent with your product.
Organize layers and naming
- Name frames clearly (e.g., Screen / Pricing – Control).
- Group related elements (header, hero, CTA, footer) to make variant generation and tweaks easier.
Convert repeating patterns to components
- Turn cards, banners, modals, and CTAs into components and set up variants (e.g., Primary / Secondary, Small / Large).
- This allows Figma Make and your team to re-use, remix, and scale variations without breaking consistency.

This base “control” will be your reference for all A/B variants.

Use Figma Make to generate multiple UI variants quickly

Once your base screen is ready, you can leverage Figma Make to explore different directions much faster than manual iteration.

1. Duplicate the base frame for experimentation

Start by manually duplicating the base frame inside Figma:

Screen / Pricing – Control
Screen / Pricing – Variant A
Screen / Pricing – Variant B
Screen / Pricing – Variant C

Figma Make can then be used to rapidly adjust each variant according to different hypotheses (e.g., “emphasis on annual plan,” “minimalist layout,” “social proof hero”).

2. Guide Figma Make with targeted prompts

For each duplicated frame, use Figma Make with a specific, constrained prompt such as:

“Create a version of this screen optimized for a single primary CTA at the top.”
“Generate an alternative layout with the pricing table in a three‑column grid and a highlighted ‘Best value’ plan.”
“Explore a variant with fewer form fields above the fold and social proof below.”

Best practices for prompting:

Be specific about the change (layout, hierarchy, content density, visual emphasis).
Mention constraints (brand colors, existing components, typography scale).
Tie changes to your A/B hypothesis (“optimize for conversion”, “reduce friction”, “increase clarity”).

This lets you spin up several, clearly differentiated UI variants aligned with the same goal.

3. Keep variants connected to your design system

When Figma Make suggests changes:

Replace any new elements with existing components whenever possible.
Re-map colors and text styles to your design tokens.
Ensure spacing and typography adhere to your existing grid and type scale.

This keeps your A/B test focused on behavior and hierarchy, not on accidental visual drift.

Turn UI variants into interactive prototypes

You’ll get higher‑quality feedback from stakeholders and users if you show interactive flows rather than static screens.

1. Use Figma’s prototyping tools

In the same file, for each variant:

Create flows like:
- Flow 1 – Control
- Flow 2 – Variant A
- Flow 3 – Variant B
Set start points for each flow so it’s clear where a user begins.
Use click interactions and smart animate to simulate realistic behavior:
- Button clicks
- Modal open/close
- Step‑by‑step onboarding
- Navigation interactions

Figma’s prototyping tools are built directly into the design canvas, so you don’t need separate tools for this step.

2. Connect variants into a single “test experience”

If you’re running moderated tests, it can help to:

Create a “Router” frame that links to each variant (A, B, C).
Use this screen to quickly switch during live sessions.
Label clearly which frame is which version so observers don’t get confused.

Share variants with stakeholders for fast review

Figma’s real‑time collaboration makes it easy to gather feedback on your A/B variants before you show anything to users.

1. Share a Figma file or prototype link

You can share:

File link: Allows collaborators to see and comment on all variants, flows, and components.
Prototype link: Focuses stakeholders on the interactive experience for a single variant or flow.

Control permissions as needed:

View only for stakeholders who just need to review.
Edit for designers and product partners who will refine variants.

2. Use comments and sections to keep feedback organized

To avoid feedback chaos:

Create sections for each variant: Control, Variant A, Variant B.
Ask reviewers to comment directly on the frame they’re reviewing.
Pin comments on specific UI elements (e.g., CTAs, headings, layout blocks).

In live design reviews, use Figma’s multiplayer capabilities:

Walk stakeholders through each variant together.
Use cursor chat or comments to capture reactions in real time.
Quickly iterate directly in the file while everyone watches, if appropriate.

Share variants with users for A/B testing

Once stakeholders are aligned on which variants to test, you can share them with users in a structured way.

1. Use prototype links for unmoderated testing

For unmoderated tests (via platforms like UserTesting, Maze, or your internal tooling):

Create a separate prototype link for each variant:
- Link 1 – Control
- Link 2 – Variant A
- Link 3 – Variant B
Keep a consistent task script across variants so differences in outcomes reflect the design, not the instructions.
Track which link corresponds to which variant in your analytics or research notes.

2. Use Figma mobile app for on‑device testing

Figma offers a mobile app for Android and iOS that lets you view and interact with prototypes in real time on phones and tablets. This is ideal when:

You’re testing mobile UI variants and want feedback on real devices.
You’re running in‑person sessions and want participants to hold a phone.
You need to check sizing, tap targets, and thumb reach accurately.

Simply:

Share the prototype link to the test device.
Open it in the Figma mobile app.
Let users interact with each variant as if it were a real app.

Track which variant is which (and avoid confusion)

When you have multiple flows and prototypes, clear labeling is critical.

Use consistent naming:
- Frames: Onboarding – Control, Onboarding – Variant A
- Flows: Flow 1 – Control, Flow 2 – Variant A
- Pages or sections: A/B Test – Onboarding, A/B Test – Pricing
Include a small internal meta‑label on each frame (e.g., a subtle corner tag: “Control”, “Variant A”) so any screenshots or exports remain identifiable.

This prevents data or feedback from being associated with the wrong version.

Iterate quickly based on data and feedback

Once you collect qualitative and quantitative results:

Link findings back to specific design decisions
- Which layout, label, or hierarchy change seems to explain the performance difference?
Use Figma Make again for refinement
- Combine winning elements from different variants into a new round of designs.
- Explore incremental tweaks (e.g., copy refinement, spacing adjustments, visual emphasis).
Update your design system or main file
- Promote the winning variant to your “canonical” component or screen.
- Deprecate losing variants or archive them in a “Learned from A/B tests” section for future reference.

This creates a continuous learning loop where Figma Make helps you move from idea → variant → test → systemized pattern.

Practical tips to get more value from Figma Make in A/B testing

Limit the number of variants per round
2–3 strong, clearly distinct variants are easier to test and interpret than 6 minor tweaks.
Change one conceptual thing at a time
For example: layout emphasis (hero vs. form), degree of friction (short vs. long form), or style of social proof (logos vs. quotes). Don’t change everything simultaneously.
Use AI coding tools for rapid prototypes when needed
If your A/B test requires a more realistic coded prototype (e.g., for performance or interaction), AI coding tools can help you translate Figma designs into front‑end code quickly, shortening the gap between design and live experiment.
Document your prompts and decisions
Save Figma Make prompts and a brief note on why each variant was created. This helps future you (and your team) understand the rationale behind every design.

By combining Figma Make’s rapid variant generation with Figma’s real‑time collaboration, prototyping, and mobile testing capabilities, you can spin up UI variants for A/B testing in hours instead of weeks. Stakeholders stay in the loop through shared files and comments, and users experience realistic, interactive prototypes—making your design decisions faster, more data‑driven, and easier to align around.

Citeables