Figma integration
Figma is where we design the site: pages, components and the variables behind colours, type and spacing. Framer and Webflow have official Figma plugins that copy layers and styles into the builder, and on Astro or Next.js we build from Dev Mode, the exported variables and Figma’s MCP server, which hands the same design context to a coding agent like Claude Code. We set up the file so the handoff works, then build every page properly on the platform.
| Complexity | Medium |
|---|---|
| Method |
|
| Typical setup | 1 to 3 days |
| What we do | We structure the Figma file for the platform, move variables and components across, and rebuild the pages responsively. |
| Category | Design and handoff |
Setup by platform
How we set up Figma
Framer
- Native
Framer’s own Figma plugin, Figma to HTML with Framer, copies selected frames and pastes them onto the Framer canvas as editable layers. We then set up stacks and breakpoints in Framer and swap the static pieces for real components.
Framer developmentWebflow
- Native
The free Figma to Webflow plugin and app, made by Webflow Labs, sync Auto Layout frames as components, Figma variables as Webflow variables, and text and effect styles as classes. Every frame has to use Auto Layout, custom fonts are uploaded to Webflow first, and variants do not carry over.
Webflow developmentAstro
- API
There is no plugin, so we build from Dev Mode and Figma’s MCP server, which gives a coding agent like Claude Code or Cursor the layout, components and variables of a selected frame. Figma exports variable modes to JSON, and we turn that file into CSS custom properties so the light and dark themes match the design.
Astro developmentNext.js
- API
The same Dev Mode, MCP and variables workflow as Astro. When the site shares a React component library with your product, Code Connect maps each Figma component to its code, and the MCP server passes those real imports and usage snippets to the agent instead of generated markup.
Next.js development
Use cases
What teams use it for
Component handoff
Buttons, cards and navigation built as Figma components first, so each one maps to one component in the build, not a pile of one-off layers.
Tokens to CSS variables
Colours, type and spacing defined once as Figma variables, exported and turned into CSS custom properties instead of retyped by hand.
Build with an AI agent
Claude Code or Cursor reads a frame through Figma’s MCP server, with its layout, variables and linked components, and drafts the page in your codebase. We review every change before it ships.
Before you add it
What to watch out for
Limits
Auto Layout is not a responsive site
Auto Layout frames sync into Webflow as flexbox, but a desktop frame does not say how it should stack on a phone. We design the key breakpoints in Figma and check every one after import.
Data layer
Imported layers need cleanup
In Webflow, each Figma layer name becomes a class name, and pasted layers keep Figma’s nesting. We name layers before syncing, then tidy the structure and set semantic HTML tags by hand.
Limits
Fonts and font licences
The Figma to Webflow plugin does not move font files, and Framer asks you to check fonts after pasting. A licence for desktop design does not always cover the web, so we check it before launch.
FAQ
Questions about Figma
Can you turn our Figma file straight into a website?
Partly. The Framer and Webflow plugins copy layers and styles across, which speeds up the first pass. Breakpoints, CMS, interactions and real components are still built on the platform, so expect a careful rebuild, not a one-click export.
Do our developers need a paid Figma seat?
For Dev Mode, yes. It needs a Full or Dev seat on a paid plan and is not available on Starter.
Someone with a View seat can still inspect properties and measurements, copy code and export assets, which is often enough for a small marketing site.
What is Code Connect, and do we need it?
Code Connect links Figma components to the matching components in your codebase, so Dev Mode shows the real code. It needs a Dev or Full seat on a Professional, Organization or Enterprise plan, and Professional allows one active library and one framework.
It pays off when a React component library is shared between the site and a product. For a standalone marketing site we usually skip it.
Can an AI agent build the site from our Figma file?
It can draft it. Figma’s MCP server gives agents such as Claude Code, Cursor and VS Code the variables, components and layout of a frame. With Code Connect it also passes your real component imports, so the code uses your library instead of generic markup. The remote server runs on Figma’s side, so no desktop app is needed.
Full and Dev seats on the Professional plan get up to 200 calls a day; View and Collab seats get 20 a month. We use it to speed up the first build and still review every page by hand.
Keep exploring
Services
Other integrations
- StorybookA workshop for building, testing and documenting UI components on their own, outside the pages.
- LoomScreen and camera walkthroughs embedded on landing pages, case studies and help pages, plus async design reviews.
- After EffectsMotion designed in After Effects and shipped to the site as Lottie for vector animation, or as video for everything else.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call