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 the active GraphVersion. 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 transactional product graph and agent workflow. Its CLI and portable skills publish validated GraphVersions, produce query projections, and verify live builds with independent Persona Missions and runtime evidence. It is not a UI tool, headless CMS, app builder, or uselamina.ai. Compare Figma to code to Lamina when you need durable product knowledge in a local graph, 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-27

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 validated graph knowledge and verification evidence help.

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: GraphVersion projection 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: GraphVersion defines pay preconditions. product findings 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	Transactional product graph + agent workflow
Primary output	UI components from frames	Validated GraphVersion plus query projections
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	Validated GraphVersion plus query projections
Post-build verification	Visual diff to frames	Independent Persona Missions with runtime evidence
Repo and stack fit	Teams with Figma in the loop	CLI plus portable skills in any repo and stack
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	GraphVersion projection guides behavior rules
3	Agent implements visual components	Agent enforces resolved 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 GraphVersion 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, durable outputs, and provenance-marked legacy examples. Updated when major tools change positioning.

Install Lamina with your agent.

Copy the repository-matched prompt. Your agent installs the standalone CLI, adds every Lamina skill for your active agent, configures supported passive rules, checks the setup, and tells you when to start a fresh session with /lamina-init.

Skills work across coding agents. Passive setup currently supports Codex, Claude Code, and Cursor.

Cursor
Claude Code
Codex
Gemini
Pi
and more

Install manually on macOS/Linux4 shell commands

Run these in your project, then start a fresh agent session. On Windows, use the PowerShell installer in the copied agent prompt.

curl -fsSL https://github.com/aryaniyaps/lamina/releases/latest/download/install.sh | sh

npx skills add aryaniyaps/lamina --skill '*' -a <active-agent> -y

lamina setup --agent <codex|claude-code|cursor>

lamina doctor --json