Stop pushing pixels, Convert Figma Designs To React Components Quickly

There are a couple of different ways to export designs from Figma to React components.

Historically the handoff between designers and frontend developers has been a bit of a pain point. Designers would create designs in Figma, or other tools like Photoshop and then developers would have to recreate the designs in code. This process was time-consuming and error-prone and required a lot of back and forth between the two teams.

While I wouldn't necessarily say that is a solved problem modern design tools like Figma make it much easier to stay in sync due to their component-based workflows and ability to automatically generate fairly usable HTML and CSS or even tailwind if that’s your thing.

The quickest way to export to react is now built right into Figma.

A small cottage industry sprung up around the need to export designs from Figma to react components. At the recent Figma config conference, the Figma team announced that they were working on a built-in solution to this problem. This is great news for designers and developers alike as it will make it much easier to stay in sync.

1. Open the Figma file and enter developer mode

If you don’t have one handy you can use this example file: https://www.figma.com/community/file/1277695349952347784

The new developer mode is available in the upper right-hand corner of the Figma interface.

3. Select the component you want to export

If your component is nested inside of other components you can cmd-click to quickly select it by passing its parent components.

4. Click the copy code button

In the right-hand sidebar, you'll see export options

4. Disrupt

Magic presto you have quickly generated JSX you can add to your codebase

There is also a VS code plugin

If you'd prefer to stay in your editor of choice there is also a VS code plugin that will allow you to export components from figma to react. You can find it here: https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension

It’s fairly handy and the interface is convenient if you’re low on screen real estate but provides essentially the same functionality as the built-in figma export.

I'm hoping in future versions they make it more convenient to export images etc. as this takes a couple more clicks than I'd like.

CoderOne recently published a great video on the new export feature and vs code plugin which you can find here:

Limitations

This process is obviously a one-way export - I’m not sure if I’m the only one who wants this but my ideal workflow would be bi-directional. For example If I refactor some CSS or make some visual changes to the site this would be reflected in Figma.

You also won't get automatic updates if the design changes so this works for workflows where the design is fairly static but if you are iterating quickly on the design you'll need to re-export the component multiple times.

3rd party solutions

There are a couple of 3rd party solutions that will allow you to export designs from figma to react components. I haven't used any of these but they offer more advanced solutions.

1. Quest AI: a full stack AI-enhanced solution

Quest AI is more opinionated but also much more fully featured than the built-in Figma export. It can export deployable Next.js sites or individual react components with ai AI-generated logic for submission forms etc. If you don't have a Figma file yet it can also generate components from a napkin sketch. It’s a very ambitious and interesting project, and because it’s making decisions about the full process from design to deployment it might not it everyone's workflow but I'm excited to see where they go with it.

• Figma plugin: https://www.figma.com/community/plugin/862039267149408972/Figma-to-React-from-Quest
• website: https://quest.ai/

2. Anima: Simple but better

Anima is actually a plugin integrated into the Figma developer mode I mentioned earlier but is a bit more fully featured than the built-in export. It can export full components and pages instead of just JSX and lets you open your components in code sandbox which is pretty convenient. My one gripe is that it doesn't seem to support Tailwind out of the box which is my preferred CSS framework but otherwise looks like a really polished version of the built-in export options and is definitely worth taking a look:

• Figma plugin: https://www.figma.com/community/plugin/857346721138427857/Anima---Figma-to-React%2C-HTML-(React%2C-HTML-in-DevMode)
• website: https://www.animaapp.com/

3. Copy cat: happy medium?

If I’m being honest it was mostly the cat logo that drew me to this one but it looks like a pretty solid option that could strike a good balance between the simplicity of anima and the full stack approach of Quest. It does not integrate with Figma developer mode but instead has its own interface for exporting components inside Figma. The thing I liked most about it is apparently it works with your existing components / frameworks when generating code so seems like it is less opinionated than quest which kinda just wants to do everything for you.

• website: https://www.copycat.dev/figma-code

Conclusion

Right now Figma has the best export options of any of the new wave of online design tools. Really excited to see where Figma goes with the dev mode and how it evolves over time. I think it will be a huge time saver for designers and developers alike and will help to keep teams in sync. I'm also excited to see how the 3rd party solutions evolve and how they differentiate themselves from the built-in export. Thanks for reading!