Interlace

Designers hand code to developers and get pixels back, then the round-trip starts: screenshots, comment threads, "can you make the padding match?" Interlace closes part of that gap inside Figma by importing CSS and rendering it as editable native nodes instead of flattened images.

A TypeScript Figma plugin that parses CSS and resolves styles into Figma's object model: units (px, rem, vw), colors, gradients, flexbox layout, box-shadow and filter blur, and typography. Element creators map <img>, <video>, <button>, and <input> variants (text, checkbox, radio, range, color) to native nodes, with plugin-data persistence and static-image fallbacks where a live element cannot exist.

The plugin runs inside the Figma editor. A resolver layer owns the CSS semantics, a creator layer owns Figma node construction, and the two meet at a typed boundary. The build pipeline is esbuild with React JSX widgets in watch mode, ESLint, and tsc type-checking, so the plugin stays a plain TypeScript package with no heavy framework. A companion Next.js app with Tailwind and Zustand hosts the editing experience and gives the design system a place to live outside the plugin.

The web app and the plugin started in one repo but never shared much code, and the shared abstractions were the resolver shapes. I would extract the resolver layer into a standalone package first and let both sides consume it.