How to design test variants in Figma using Claude + Figma MCP - from hypothesis to dev-ready in under 20 minutes per variant

By MoreConversions · From our database of 1,000+ A/B tests

What this is

This is the workflow we use to compress the design phase of an A/B test from "wait 3 days for the designer" to "20 minutes from hypothesis to dev-ready Figma file."

You give Claude:

1. A hypothesis (one sentence)
2. Read access to your Figma file via Figma's official MCP
3. Brand guidelines (one PDF or one Figma library file)

Claude returns:

• A full variant designed in your Figma file (component-aware, brand-aligned)
• An annotated rationale doc explaining each design decision against the hypothesis
• A QA checklist run through (contrast, tap targets, copy length limits, brand compliance)
• The exact CSS / React code for the variant (extracted via Figma's get_code tool - ready to paste into your A/B testing platform)

The point: designers stop being the bottleneck on the testing program. They review and approve, they don't draft from blank.

30-second TL;DR

1. Install:        Figma's official MCP server (one line, Dev/Full seat required)
2. Import:         Use html.to.design plugin to pull the live page into Figma
                   at mobile + desktop viewports (this is your Control)
3. Set up:         A "Variants" page + clean component library
4. Run:            The 5-prompt design sequence (brief → variant → annotate → QA → export code)
5. Review:         Designer or strategist signs off (5-10 min)
6. Hand off:       Code + Figma frame to dev (or to yourself, see the dev playbook)

Time per variant: 15-25 minutes (after one-time setup). Cost: zero beyond Claude usage.

Why design with Claude (not "instead of a designer" - "instead of waiting for one")