I’m working on a React project and wondering if there’s a method to automatically generate Figma designs from my existing components. Let’s say I have some Vue.js card components that display user profiles with avatars, names, and description text. These purple card elements are currently rendered in my web application, but I want to find a way to export them directly into Figma format. The goal is to allow designers on my team to take these components and use them in their Figma workspace without having to recreate everything from scratch. Is there any API, plugin, or JavaScript library that can handle this kind of component-to-design conversion? I’ve been searching for solutions but most tools seem to work the other way around (Figma to code). Any suggestions would be really helpful.
Try the html-to-figma plugin - it converts rendered HTML/CSS straight into Figma layers. Works pretty well for basic components, though you’ll have to clean up the mess of extra layers it creates afterward.
I’ve dealt with this exact problem at my previous company. We tried a few approaches that worked pretty well. Chromatic or similar visual testing tools can capture component snapshots that you can manually import into Figma as starting points. There’s also a browser extension called Figma Capture that converts DOM elements to Figma layers - though you’ll need to do each component manually. Another route is setting up your component library with precise CSS measurements and design tokens, then sharing those specs with your design team so they can recreate components accurately. We ended up with a hybrid workflow where developers provided detailed component specs alongside working prototypes. Made it way faster for designers to rebuild in Figma while keeping everything consistent. Not automated, but cuts recreation time significantly compared to starting from scratch.
The Figma REST API does support creating design elements programmatically, but you’re looking at serious dev work to map React props to Figma’s vector format. I tried this last year and got simple buttons and cards working by parsing computed styles and recreating them as Figma rectangles, text layers, and fills. Ran headless Chrome to grab CSS properties, then used Figma’s API to build the design objects. It works, but complexity explodes fast - shadows, gradients, and fancy layouts become a nightmare. For your purple card components, I’d go semi-automated instead. Use browser dev tools to extract exact dimensions, colors, and typography, then script basic Figma shapes. Won’t be perfect, but it’ll save your designers tons of time vs eyeballing everything.
Unfortunately, there’s no easy way to auto-convert React components into Figma design files. React renders DOM elements while Figma uses vector-based design objects - they’re just built differently. Instead, take screenshots of your rendered components and import them into Figma as reference images. Some developers use Puppeteer to automate taking screenshots for various component states. You could also document your components visually using Storybook, allowing designers to reference those when recreating elements in Figma. The reverse process (Figma to code) is much more common as design specs naturally translate to code requirements. Extracting design intent from existing code is challenging. Ideally, establish a workflow where designs are created in Figma first and then implemented in React, ensuring consistency with shared design tokens for colors, spacing, and typography.
This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.