Skip to main content

Export / Import react component

  • December 23, 2022
  • 2 replies
  • 1350 views

Joey7

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.

This topic has been closed for comments

2 replies

Jason_Sparks

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.


  • 0 replies
  • June 11, 2023

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings