Figma MCP × Cursor

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.

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

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 × Cursor — Design-to-code pipeline

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.

Role

Designer & systems engineer

Year

2025 – 2026

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.


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.

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.

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.


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

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

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.

More Projects

Avnzor product detail page — bilingual Hydrogen storefront

Avnzor

Two-phase engagement: a no-code-friendly Shopify Plus theme rebuilt into a fully accessible, bilingual Hydrogen storefront for a GCC health & beauty brand doing 5,000+ orders/month.

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.

My Stack daily schedule — a shopper's supplements grouped into morning, midday, evening, bedtime and workout slots, each with one-tap Log all

My Stack

A routine builder on the Avnzor storefront — five time slots, automatic placement, and a classifier deciding what even counts as routine-able.

Avnzor product detail page — bilingual Hydrogen storefront

Avnzor

Two-phase engagement: a no-code-friendly Shopify Plus theme rebuilt into a fully accessible, bilingual Hydrogen storefront for a GCC health & beauty brand doing 5,000+ orders/month.

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.

My Stack daily schedule — a shopper's supplements grouped into morning, midday, evening, bedtime and workout slots, each with one-tap Log all

My Stack

A routine builder on the Avnzor storefront — five time slots, automatic placement, and a classifier deciding what even counts as routine-able.

Creating Since 2010

Twitter

LinkedIn

Currently looking for product design and design engineering roles in the Washington, DC area. If you’re building something where the design system and the code are the same problem — I’d like to hear about it.

hello@molham.ae

© Molham.Works 2026

Back to top

Creating Since 2010

Twitter

LinkedIn

Currently looking for product design and design engineering roles in the Washington, DC area. If you’re building something where the design system and the code are the same problem — I’d like to hear about it.

hello@molham.ae

© Molham.Works 2026

Back to top

Creating Since 2010

Twitter

LinkedIn

Currently looking for product design and design engineering roles in the Washington, DC area. If you’re building something where the design system and the code are the same problem — I’d like to hear about it.

hello@molham.ae

© Molham.Works 2026