Export / Import react component

Seeing as we already get a bunch of front-end code and CSS for our components in Figma,
I’d like to know if we can’t take it one step further, by exporting properly coded React components.

When we make our components in Figma, we do have the option to make various Variants. These variants could be translated to react as Props, States, or Hooks.
In general, the React component works in a similar fashion.
We create a Component in React that we can import to our pages and just make a few tweaks to it like changing the text inputted or any other property for that matter.

I do believe that by implementing this process, not only could we help speed up the developing process for the web devs, but also help the UI Designers feel more connected to the end result of the web and encourage them to make better design deliveries by enabling them the power of seeing how their changes can affect the code.

By allowing us to import React components, the teamwork between Front-end devs and Designers could increase significantly as they could share changes and design ideas with each other more easily.

1 Like

100% agree with this. Framer offers a ‘copy import’ option on it’s design components and then you can import them directly into React code, as ES Module URLs and override the properties and switch variants etc. This means I can make incredibly powerful prototypes by using React.

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.