Importing Figma components into React using the Figma API

REST API
1

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?

2

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.

3

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?

4

  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.

5

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.