Lamina vs Figma to code (https://lamina.dev/learn/compare/lamina-vs-figma-to-code): Figma to code (manual handoff, Dev Mode, or Figma MCP in Cursor) translates frames into UI implementation: layout, components, and visual fidelity. Lamina specs product behavior before your agent writes app source: states, actor permissions, illegal transitions, and recovery paths in .lamina/run.yaml. Screens can match Figma pixel-perfect while checkout logic is wrong. Common pattern: Figma MCP brings design context into the agent session, the agent implements happy-path UI, and gates never land in code. Run /lamina-design before implementation, use Figma handoff for visuals, then /lamina-verify on staging. Skip Lamina for static pages where the frame encodes all behavior. Lamina (lamina.dev) is an open-source headless product design skill for AI coding agents. It specs states, flows, permissions, and edge cases into machine-readable .lamina/ contracts, then verifies live builds with /lamina-verify. It is not a UI tool, headless CMS, app builder, or uselamina.ai. Compare Figma to code to Lamina when you need durable behavior contracts in your repo, not just generated UI or ephemeral planning. Full guide: https://lamina.dev/learn/compare/lamina-vs-figma-to-code.

Lamina vs Figma to code

Figma to code answers what it looks like. Lamina answers what states exist, who can transition, and what happens on failure.

Curated by Aryan Iyappan · Updated 2026-07-13

You are in the right place if

Screens match Figma but checkout logic is wrong.
You use Figma MCP in Cursor and ship happy-path UI only.
Designers sign off on mocks while product rules live only in Slack threads.
Dev Mode gave you CSS but not hold lifecycle or role permissions.

Context

Figma remains the default design source for many teams. Figma MCP and codegen plugins close the gap between frame and component file. That handoff is visual. Product behavior (who may pay, when submit unlocks, what happens on hold expiry) rarely lives in Figma unless you maintain separate flow diagrams your agent never reads. Lamina puts behavior in the same repo as the implementation, in a format agents consume.

Common situations

Concrete cases from AI-shipping workflows. Each shows what the alternative handles and where a behavior contract helps.

Figma MCP session ships onboarding UI

Situation: Cursor pulls frame context from Figma MCP. Agent builds a complete partner onboarding form with Submit visible on step one.
What Figma to code does: Figma MCP supplies layout, typography, and component structure from frames.
What Lamina adds: implement.md lists stepped prerequisites and server-side gates. Verify walks partner persona before design sign-off.
Takeaway: Visual handoff does not imply behavioral handoff.

Pixel-perfect checkout, wrong pay rules

Situation: Checkout matches the Figma file. QA finds guests can pay without verified email.
What Figma to code does: Achieves visual parity with design specs.
What Lamina adds: run.yaml defines pay preconditions. fix.md from verify lists the gap explicitly for the agent.
Takeaway: Match Figma first if you want; spec behavior before you call the feature done.

Static marketing page from Figma

Situation: Single landing frame, no auth, checkout, or role-specific variants.
What Figma to code does: Figma to code is sufficient end to end.
What Lamina adds: Not needed until interactive product rules appear.
Takeaway: Static scope: skip behavior layer.

Comparison

Lamina vs Figma to code
Dimension	Figma to code	Lamina
Primary job	Translate visual design into UI code	Spec product behavior first
Layer in stack	Design handoff / visual layer	Behavior contract layer
Primary output	UI components from frames	run.yaml + implement.md
Writes app source?	Yes, UI implementation	No
Behavior spec (states, flows, permissions)	Visual specs only unless annotated separately	States, permissions, invariants
Durable in-repo artifact	Figma file + generated code	.lamina/ in git
Post-build verification	Visual diff to frames	/lamina-verify persona walks
Repo and stack fit	Teams with Figma in the loop	Any repo; pairs with Figma MCP
Best when	Pixel fidelity and design alignment	Domain rules, gates, multi-actor flows
When you don't need Lamina	Static pages with no product rules	Frame encodes all required behavior
Compose with Lamina?	Implement UI from frames	/lamina-design before implement from Figma output

Workflow

Lamina vs Figma to code: recommended workflow
Step	Figma to code	Lamina
1	Design frames in Figma	/lamina-design in parallel or first
2	Figma MCP or export into repo	implement.md guides behavior rules
3	Agent implements visual components	Agent enforces contract transitions
4	Design QA vs frames	/lamina-verify on staging

When to use which

Lamina vs Figma to code: when to use each
Situation	Figma to code	Lamina
Design system component parity	Figma handoff	When component changes behavior
Multi-role booking product	Figma for UI chrome	Required for rules
No Figma in workflow	N/A	Lamina still applies

Worked example

Onboarding gate before submit. Figma can show a submit button on every onboarding step. Lamina specs when submit-for-review may unlock relative to Stripe, property, rooms, and policy completion. HavenStay verify caught submit available too early when only visual handoff was used.

HavenStay demo walkthrough

Frequently asked questions

I use Figma MCP. Do I still need Lamina?

Yes, when features have roles, gates, or illegal states Figma frames do not encode.

Should designers write Lamina contracts?

Designers can review run.yaml for flow accuracy. Developers or PMs usually run /lamina-design with the agent; designers stay authoritative on Figma.

Does Lamina replace Figma?

No. Lamina does not generate screens or replace design tools.

Comparisons map stack layers, repo artifacts, and HavenStay demo examples. Updated when major tools change positioning.

Install in one command.

A headless product-design skill for your AI coding agent. Then run the design → implement → verify loop on your next feature.

Apache-2.0 · open source. Star on GitHub if Lamina saves you a loop.

npx skills install aryaniyaps/lamina

Works with your coding agent

Cursor
Claude Code
Codex
Gemini
Pi
and more