From Figma to code: redesigning the process

We redesigned the public site ahead of tax season. I used the moment to change how we built it too: designing a landing page came to include its frontend.

Result

From Figma to frontend in 30–60 minutes per landing page

taxfyle.com was redesigned with this process

Role

Design system, page design, build-process design

Challenge

Redesign the site and shorten the design-to-deploy cycle

Key decision

Connect the design system to the code so the agent doesn't improvise

What the agent generates against the original design: the differences are minimal and cosmetic, not structural. What follows is how that's achieved.

Context

The public site carried a style from five years earlier, already abandoned across the rest of the brand, and the landing pages needed conversion optimization ahead of tax season. The expected path was the usual one: Figma, handoff, and a developer rebuilding every already-designed screen from scratch.

The bet

Static pages, no backend and no client tax data: the safe place to experiment. And Figma MCP, Cursor and Claude Code were already mature.

I set out not just to create the Figma file, but to build every new component in code and connect the two versions.

Decisions

I based the system on shadcn for its design-code parity. It existed both as a Figma library and as working components. It didn't speed up design or code on their own: it sped up the correspondence between them.

Ownership of the code, not just the pixel. I learned enough to demand correct naming, good separation and zero redundancy. I avoided giving Cursor full independence: I always verified the output.

Code Connect + MCP. Every Figma component was tied to its real file in the repository. The agent doesn't interpret a similar-looking button: it imports the system's. The design system went from documentation to contract.

The process

It starts by building every component twice. The Figma variants (default, secondary, destructive) are exactly the code's. Without that correspondence there's nothing to connect.

With both versions linked by Code Connect, Dev Mode stops handing off loose CSS and instead hands off the real component's import. The handoff shifts from "replicate these styles" to "use this component".

That's what lets the agent reuse instead of rebuild: on the generated page, the card isn't assembled from scratch, it imports the one that already existed.

That reuse only happens when working on the real repository. Against v0, Lovable or Figma Make, Cursor uses the existing components instead of rewriting styles already defined in the system.

What's left is making the result consistent, not just lucky. I set a prompt structure with a single source of truth, import rules, guardrails, and a self-audit by the agent before delivering.

Result

I designed the landing page in Figma, requested the rebuild via MCP, and within 30 to 60 minutes had the frontend working with its interactions.
A senior developer validated the output: there were adjustments, but their build work shrank to a minimum and shifted to performance, tagging and integrations.
Defined KPI: development hours saved per landing page, against the average for an equivalent frontend task. I left Taxfyle before the consolidated figures were in.
It was adopted as the process for the public site redesign. Every landing page in the project was designed and deployed with it.

Looking for someone who understands the business,
designs with evidence and ships it working?

Let's talk.

/aldo-huapaya