Figit, an open-source library that turns HTML into fully editable Figma layers, launched on Hacker News on July 1, 2026. The pitch is refreshingly narrow: copy a design from the browser, paste it into Figma, and get real editable layers with live text, no plugin install and no manual rebuild. For designers who constantly rebuild web references by hand inside Figma, it removes one of the most tedious steps in the workflow.

What Happened

Figit arrived as a Show HN post introducing an MIT-licensed package, @figit/dom-to-figma, that walks a real DOM tree, reads computed styles, and produces exactly what Figma expects on paste. Text stays editable, and images, vectors, gradients, shadows, borders, and form placeholders all carry over. The project is on GitHub and, according to its authors, is already used in production by the design team at Sleek.

Why It Matters

Recreating an existing web page or component inside Figma is normally a manual chore: screenshot it, trace it, or rebuild every box from scratch. Figit collapses that into a single paste. Because it reads the actual computed CSS rather than guessing from a screenshot, spacing, colors, and typography land close to the source. That makes it useful for auditing a live site, building a design system from shipped UI, or handing developers a Figma file that matches what is really on screen.

Key Details

Figit works as a small developer API rather than a point-and-click app for now. You install it with pnpm add @figit/dom-to-figma, call createFigmaConverter() on a target element with a width and height, and write the result to the clipboard, then paste into Figma with the usual shortcut. The core clipboard payload is generated entirely client-side from the DOM. A hosted API and a Chrome extension for non-developers are listed on the Figit site as coming soon, with a waitlist open.

What to Do Next

If you live between code and Figma, clone the repo, run the converter on one component, and check how faithfully your styles transfer before wiring it into a real workflow. It pairs naturally with the broader push to move fluidly between design canvases and shipped code, a theme running through tools like the Figma design agent. For teams standardizing on a design system, pasting your production UI into Figma as editable layers is a fast way to start from what you already ship instead of a blank canvas.