Skip to main content
Question

Importing Figma components into React using the Figma API


Jason_Sparks

Has anyone had much success importing Figma components into React using the Figma API (rather than depending on 3rd party plugins).

To be able to import them into code and override properties and switch variants would be amazing. Is this documented anywhere?

This topic has been closed for replies.

4 replies

Gleb
  • Power Member
  • 4708 replies
  • March 13, 2023

There is no such thing as “import Figma into code” because Figma doesn’t provide any code for components (the code doesn’t exist in the first place so there is nothing to import). You always need to process them in some way to turn them into actually usable React code. And that’s exactly what third-party tools do.


Jason_Sparks

Thanks for the quick reply. I did read that you can use these imports in React. import { fetchFile, fetchNodes } from 'figma-api'; import { generateComponent } from 'react-figma'. I just wondered if anyone had this working?


Gleb
  • Power Member
  • 4708 replies
  • March 13, 2023
  1. import is simply a keyword in JS to use a library in the current file. So the first statement allows you to use figma-api library, the second one is for react-figma library. Importing a library is very different from importing a component.

  2. figma-api library is just a simplifying wrapper for making API calls to Figma REST API. It doesn’t provide any extra functionality for working with React. Clarified this just in case. Also it seems like you are using it not as documented so it might not work depending on your setup.

  3. Not sure which react-figma package you are using, but the only one I could find is not a code generator and it doesn’t have a function you are trying to import from it. It does exactly the opposite: generates Figma nodes from React code.


Jason_Sparks

ah yes…I see…it does the opposite of what I want! Still for Figma to have a feature like Framer’s URL import/handshake that would be amazing.


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