From frame to live template
Design hand-offs are where most website projects slow down. Specs get lost, spacing drifts and the build never quite matches the file. With the Figma integration, the agent reads your design directly and builds templates that use the components and tokens you already have.
Connect a Figma file once and you can ask for any frame by name — or simply paste a link into the chat. There is no export step, no annotated PDF and no “final_v4” handover document. The agent pulls the actual node tree: exact spacing values, type styles, colours, auto-layout rules and component variants, then implements from those numbers rather than estimating them by eye.
That precision is the point. A designer should not have to review a build three times to get a 24-pixel gap right, and a developer should not have to interpret intent from a flattened screenshot.
How it works
- Connect Figma from Settings → Integrations, or drop a .fig or Markdown spec into the chat.
- Ask for a frame: “Build the pricing page from Pricing v3.”
- The agent maps layers to existing components and only creates new ones where nothing matches.
- A staging preview is shared with a side-by-side comparison against the frame.
- Approve, request changes in plain language, or roll back.
What the agent picks up from your file
- Colour, type and spacing tokens — mapped to your existing design tokens
- Auto-layout, so responsive behaviour matches the design
- Component variants and states (hover, active, disabled)
- Images and icons, exported and optimised for the web
- Copy, which lands as editable CMS fields rather than hard-coded text
We used to lose a week between design sign-off and a staging link. Now the designer shares the frame in the morning and we’re reviewing the build after lunch.
Staying in control
Everything the agent builds from Figma follows the same rules as any other change: it lands on staging, it’s scoped to the permissions of the person who asked, and it waits for approval before going live.
Availability
Figma design integration is included on Growth, Scale and Enterprise plans.
Frequently asked questions
Can the agent edit or overwrite our Figma files?
No. Figma access is strictly read-only. The agent can open frames, read values and render a PNG of the design as a visual target, but it cannot create, move, rename or delete anything in your file. Your designers’ work is never touched.
How close to the design is the result?
Because the agent implements from exact node values rather than from a screenshot, spacing, type and colour match the frame precisely where your tokens allow it. The staging preview includes a side-by-side comparison so you can check it yourself, and any drift is a plain-language correction away.
What if we do not use Figma?
Drop what you have into the chat instead — an exported HTML file, a Sketch or XD export, a Markdown spec, or even annotated screenshots. The Figma connection makes the process smoother and more exact, but it is not a requirement for getting a design built.
Does messy file structure matter?
It affects accuracy rather than feasibility. Named frames, intact components and real auto-layout give the agent far more to work with than detached groups and layers called “Rectangle 47”. A quick tidy before the first build pays for itself, and the agent will tell you which parts of a file it found ambiguous.
Will the copy be editable afterwards?
Yes. Text from the design lands as CMS fields, not hard-coded markup, so your editors can change headlines and body copy without going near the template or asking for another build.
