Figma MCP × Cursor

A manifest-driven design-to-code workflow: Figma tokens flow into production-ready Next.js components with built-in accessibility and agent-ready testing.

Figma MCP (@sethdouglasford/mcp-figma)
Code Connect
Cursor
Next.js 14
Style Dictionary
Storybook 9 + a11y addon
Playwright
Vitest
Chromatic
TypeScript

Built a production-quality mobile-first e-commerce demo that proves a complete design-to-code pipeline — Figma design tokens flow directly into Tailwind config via Style Dictionary, components are scaffolded from Figma specs via Code Connect and Cursor, and every interactive element ships with a stable data-agent-id, ARIA live region announcements, and a manifest-driven Playwright test suite. No hardcoded selectors. No accessibility retrofits. No handoff gap.

Industry

Design Systems · E-commerce · Developer Tooling

Stack

Figma MCP (@sethdouglasford/mcp-figma) · Code Connect · Cursor · Next.js 14 · Style Dictionary · Storybook 9 + a11y addon · Playwright · Vitest · Chromatic · TypeScript

Links

Read the full case study

The design-to-code gap is where quality goes to die. This project closes the loop: tokens flow from Figma to Tailwind config, components are scaffolded via Code Connect and Cursor, and every interactive element ships with a stable test contract.

The Problem

The design-to-code handoff is where quality degrades at every step. Designers export assets. Engineers interpret them. Tokens drift between the Figma file, the codebase, and a Notion doc — and none of them agree. Accessibility gets noted in a comment and retrofitted after the fact, if at all. Tests use CSS class names that change on the next refactor.

This isn't a process failure — it's an architecture failure. The typical handoff has no single source of truth for tokens, no machine-readable contract between the design component and the React component, and no test layer aware of what the component is supposed to do. Each abstraction layer introduces a new version of the truth.

How I Framed It

Three connected systems had to close the loop simultaneously.

Token pipeline — Style Dictionary pulls primitives from Figma and generates Tailwind config. One canonical value for each color, spacing step, and font size, living in exactly one place.

Component contract — Figma Code Connect maps each design component to its React counterpart. Cursor uses the Figma Dev Mode MCP server as live context — pulling the spec, not interpreting a screenshot.

Agent integration — every interactive element gets a stable data-agent-id, a manifest entry defining its expected success event, and an ARIA live region announcement. Playwright reads the manifest at runtime. No hardcoded selectors.

The framing: design tokens are not a styling concern. They are the shared language between design and engineering. Everything else flows from treating them that way.

Key Decisions

Style Dictionary over manual token management

Context: Tokens can be a Figma variables export, a hand-maintained JSON file, or a pipeline tool.

Choice: Style Dictionary with a Figma MCP sync step. One npm run tokens:build generates Tailwind config, CSS custom properties, and Storybook theme tokens from the same source. Token drift becomes physically impossible.

Trade-off: Adds a build step. Mitigated by a watch mode during active design work.

Manifest-driven testing over selector-based tests

Context: Most Playwright tests use hardcoded CSS selectors or role queries. When components refactor, tests break.

Choice: Central manifest. Each component adds an entry — data-agent-id on the element, signalSuccess(eventName) in the handler, announce() to the ARIA live region. Playwright reads the manifest at runtime. The test has no knowledge of implementation, only intended behavior.

Trade-off: Requires discipline to maintain manifest entries. A component shipped without one is invisible to the test suite. Enforced by code review and Storybook a11y addon checks.

Cursor + Figma MCP over manual scaffolding

Context: Most AI tools work from text prompts. A Figma MCP server exposes the actual design spec as structured data — layer names, token values, constraints.

Choice: Cursor with @sethdouglasford/mcp-figma as live context. Scaffolding a new component means pointing Cursor at the Figma URL — it reads the spec, maps to the token system, and generates a TypeScript component with correct classes, semantic HTML, and agent-id placeholders. First draft is 80–90% accurate.

Trade-off: Requires Figma components to be well-named and properly tokenized. Poorly organized Figma files produce poor MCP output — pipeline quality depends on upstream design system quality.

Single deployment for Next.js + Storybook

Context: Teams typically deploy Storybook separately. Two deployments, two URLs, two truths.

Choice: Single Vercel deployment. The build script runs next build, then storybook build, then moves the static Storybook into public/storybook/. Middleware rewrites /storybook/* to the static files. One domain, one SSL cert, one versioning history.

Trade-off: Longer build time (two builds). Worth it for the canonical-URL property — a story link lives forever alongside the app it documents.

How I Framed It

Three connected systems had to close the loop simultaneously.

Token pipeline — Style Dictionary pulls primitives from Figma and generates Tailwind config. One canonical value for each color, spacing step, and font size, living in exactly one place.

Component contract — Figma Code Connect maps each design component to its React counterpart. Cursor uses the Figma Dev Mode MCP server as live context — pulling the spec, not interpreting a screenshot.

Agent integration — every interactive element gets a stable data-agent-id, a manifest entry defining its expected success event, and an ARIA live region announcement. Playwright reads the manifest at runtime. No hardcoded selectors.

The framing: design tokens are not a styling concern. They are the shared language between design and engineering. Everything else flows from treating them that way.

Key Decisions

Style Dictionary over manual token management

Context: Tokens can be a Figma variables export, a hand-maintained JSON file, or a pipeline tool.

Trade-off: Adds a build step. Mitigated by a watch mode during active design work.

Manifest-driven testing over selector-based tests

Context: Most Playwright tests use hardcoded CSS selectors or role queries. When components refactor, tests break.

Trade-off: Requires discipline to maintain manifest entries. A component shipped without one is invisible to the test suite. Enforced by code review and Storybook a11y addon checks.

Cursor + Figma MCP over manual scaffolding

Context: Most AI tools work from text prompts. A Figma MCP server exposes the actual design spec as structured data — layer names, token values, constraints.

Trade-off: Requires Figma components to be well-named and properly tokenized. Poorly organized Figma files produce poor MCP output — pipeline quality depends on upstream design system quality.

Single deployment for Next.js + Storybook

Context: Teams typically deploy Storybook separately. Two deployments, two URLs, two truths.

Trade-off: Longer build time (two builds). Worth it for the canonical-URL property — a story link lives forever alongside the app it documents.

What Shipped

A mobile-first Next.js 14 application demonstrating the full pipeline alongside a Storybook component library mounted at /storybook from the same deployment. Every component has Figma Code Connect parity, token-mapped Tailwind classes, and a manifest entry.

The project deliberately overshoots a single homepage. The app/ directory houses 21+ Figma-derived surfaces — PLP, hero variants, bento, three layoutGrid iterations, mobile-home, an animated globe, sleep, benefits, USPs, spotlight, promo demos. Each one is an experiment in how fast can a new surface ship when the system underneath does its job?

The shopping cart system includes a slide-over drawer with real-time quantity management, ARIA announcements for every cart action, and full manifest coverage. The AI-powered Best Seller Carousel integrates Gemini for product summaries with drag-safe add-to-cart interactions.

Manifest at a Glance

The manifest currently defines 14 stable agent actions across four flows. Every one is the contract between design intent, the React component, the screen-reader announcement, and the Playwright test:

Welcome mat — welcome.start · welcome.submit · welcome.dismiss

PLP — plp.cart-button · plp.add-to-cart · plp.qty-change

Search — search.submit

Cart drawer — cart.opened · cart.close · cart.qty-decrease · cart.qty-increase · cart.remove-item · cart.view-cart · cart.continue-shopping

Adding a 15th action means adding one entry to public/agent/manifest.json, one data-agent-id to the component, and one signalSuccess() call in the handler. No test code change required.

Result

By the numbers: Zero hardcoded selectors in the Playwright suite — 100% manifest-driven. WCAG 2.1 AA compliance baked in at component level, not audited after. One token build command syncs Figma → Tailwind → Storybook theme. 5-step Figma-to-code workflow documented end to end.

What I'd Do Differently

I'd set up Chromatic from the start rather than adding it mid-project. Visual regression testing is most valuable when you have a baseline from the first component — retrofitting it means the first few weeks of component evolution aren't covered. The investment is trivial; the opportunity cost of starting late is not.

What's Next

This pipeline is now the baseline for every new project. The agent integration layer — manifest-driven testing, ARIA live regions as a component API — is being adapted for the Avnzor Hydrogen storefront. The next iteration will add Figma variable syncing for multi-brand token management, so the same component library can serve different brand expressions from a single set of components.

Manifest at a Glance

Welcome mat — welcome.start · welcome.submit · welcome.dismiss

PLP — plp.cart-button · plp.add-to-cart · plp.qty-change

Search — search.submit

Cart drawer — cart.opened · cart.close · cart.qty-decrease · cart.qty-increase · cart.remove-item · cart.view-cart · cart.continue-shopping

Adding a 15th action means adding one entry to public/agent/manifest.json, one data-agent-id to the component, and one signalSuccess() call in the handler. No test code change required.

Result

What I'd Do Differently

What's Next

Manifest at a Glance

Welcome mat — welcome.start · welcome.submit · welcome.dismiss

PLP — plp.cart-button · plp.add-to-cart · plp.qty-change

Search — search.submit

Cart drawer — cart.opened · cart.close · cart.qty-decrease · cart.qty-increase · cart.remove-item · cart.view-cart · cart.continue-shopping

Adding a 15th action means adding one entry to public/agent/manifest.json, one data-agent-id to the component, and one signalSuccess() call in the handler. No test code change required.

Result

What I'd Do Differently

What's Next

More Projects

Bouguessa

A luxury fashion house rebuilt on Shopify Plus with an AI-powered dev stack.

Shedd — Dubizzle / OLX Group

Brand, design system, and end-to-end mobile UX for a women's preloved-fashion marketplace.

Paint Protection Film

High-Performance Films for Advanced Protection

Get Wedge

Get your slice of the market

Avnzor

Two-phase engagement: a no-code-friendly Shopify Plus theme rebuilt into a fully accessible, bilingual Hydrogen storefront for a 1,300-order/month GCC health & beauty brand.

Pulse

A live operations dashboard connecting Shopify, Algolia, and the warehouse into one command center for a GCC health & beauty brand.

ARES — Snap Inc.

Designing the design system behind Snap's AR for enterprise.

Mumzworld — Design System

Faster design and development cycles for the GCC's largest mother & baby e-commerce.

Odeem — Luxury Leather UX Strategy

A UX audit and design strategy for Odeem, a Dubai-based luxury leather goods label by Emirati designer Fatma AlOtaiba.

Avnzor taxonomy rebuild — revenue density inversion across catalog categories

Avnzor — Product Taxonomy Rebuild

A catalog diagnosis for a GCC health & beauty retailer whose product structure had stopped matching its business.

Measmerize

End-to-end product design and marketing site for an AI sizing tool used by Prada, Moncler, and 30+ luxury brands.

Bouguessa

A luxury fashion house rebuilt on Shopify Plus with an AI-powered dev stack.

Shedd — Dubizzle / OLX Group

Brand, design system, and end-to-end mobile UX for a women's preloved-fashion marketplace.

Paint Protection Film

High-Performance Films for Advanced Protection

Get Wedge

Get your slice of the market

Avnzor

Two-phase engagement: a no-code-friendly Shopify Plus theme rebuilt into a fully accessible, bilingual Hydrogen storefront for a 1,300-order/month GCC health & beauty brand.

Pulse

A live operations dashboard connecting Shopify, Algolia, and the warehouse into one command center for a GCC health & beauty brand.

ARES — Snap Inc.

Designing the design system behind Snap's AR for enterprise.

Mumzworld — Design System

Faster design and development cycles for the GCC's largest mother & baby e-commerce.

Odeem — Luxury Leather UX Strategy

A UX audit and design strategy for Odeem, a Dubai-based luxury leather goods label by Emirati designer Fatma AlOtaiba.

Avnzor — Product Taxonomy Rebuild

A catalog diagnosis for a GCC health & beauty retailer whose product structure had stopped matching its business.

Measmerize

End-to-end product design and marketing site for an AI sizing tool used by Prada, Moncler, and 30+ luxury brands.