figlift — from a Figma file to an Astro and Sanity site

The problem

Moving a design from Figma to a website usually means copying it by hand: colours, fonts and spacing section by section, then comparing the result by eye. Inconsistencies in the file, such as a colour typed in by hand instead of a variable, only show up in the code.

figlift is my tool that turns a link to a Figma file into an Astro site with its content in Sanity. Code fetches, measures and compares, an agent in Claude Code builds the components, and the decisions the design can’t answer are made by a person.

The file audit

Before any code is written, figlift fetches the file through the Figma API and checks it against 30 rules in 11 categories, from variables and typography to components, content and accessibility. The result is a score from 0 to 100 and one of three routes: the file is ready to build, needs tidying, or goes back to the designer.

Where the design doesn’t settle a question, such as a font outside Google Fonts or a colour without a variable, figlift asks it, with a recommended answer. The answers go into a decisions file that the later stages read.

The foundation and the project

The file and the decisions produce tokens (colours, fonts, spacing, radii, animation timings) and classes in the Client-First system, and from them a style guide on a page of its own. Nobody edits the tokens by hand: a change goes through the configuration, and figlift generates them again.

Then figlift sets up the project: Astro and Sanity from a ready template, a private repository, a Sanity project with its Studio, and a Cloudflare Worker at a test address kept out of search engines. Every project has its own resources and shares nothing with another. The Studio has a live preview from the start: clicking a text on the page opens its field in the CMS.

The sections

figlift writes a build plan and a brief for every section: classes, tokens, texts, images with their crops and component variants. From the brief it generates a skeleton: an Astro component, a Sanity block and the starting content. Agents build the sections, three or four at a time, with the model chosen per section: a faster one for simple layouts, a stronger one for interactions and the hero.

Interactions follow the conventions in the design: arrows next to a row of cards make a carousel, a plus and minus next to questions make an accordion. States Figma doesn’t show, such as hover or focus, aren’t added silently: the agent proposes them for approval. The mobile version follows the mobile frames when the file has them. When it doesn’t, the agent designs it by the rules and shows it for approval.

The comparison with Figma

Every section is compared with the Figma render: pixel by pixel, and the position of every element within 4 px. The threshold is 90%. A section below it goes back for fixes, up to three times, and then into the report.

Text set in a font outside Google Fonts is left out of the comparison until I have the font files. That way the score never claims an accuracy it didn’t measure.

Content in the CMS

Every section is a block in Sanity, and repeated elements, such as testimonials or the team, are collections. Texts in the site’s main language go into the CMS exactly as they are in Figma. The second language is a draft translation, marked in the Studio for review. Every image has an alt text decision: a description in every language, or marked as decorative.

The results

On a real file (a home page, 11 sections, designed for desktop only) the sections stage, with the content model and the Sanity seed, took 42 minutes. Agents built ten sections in three batches in 18 minutes. Polishing the interactions and the mobile version took 28 minutes, partly at the same time.

The site at its test address in Lighthouse: on mobile 98 for performance and 100 for both accessibility and best practices, on desktop 100 in all three. The home page weighs 271 KB on mobile.

Every figlift bug found on a real project gets a test first and a fix second. Today the tool has 449 automated tests.

What’s next

figlift is in beta today. In the runs so far I built home pages with it, because that is the scope I set for the tests, not because the tool stops there: the same process covers every page in the file. The next step is forms that store submissions in the CMS.

Who it’s for

I built figlift for my own work: to turn Figma designs into websites faster and more predictably. In time it will be available to others too: to designers, developers and agencies that move designs from Figma to websites and want to work this way, with a file audit at the start, a CMS from day one and a comparison with the design instead of a check by eye. The form it will take is still open.