Figma api example code

Fetch data from a Figma file

This code sample makes a request to the Figma API to retrieve data from a Figma file and logs the response to the console[3]:

js
(async () => {
  const response = await fetch('https://api.figma.com/v1/files/FILE_KEY', {
    headers: {
      'X-Figma-Token': 'YOUR_API_TOKEN'
    }
  })
  const json = await response.json()
  console.log(JSON.stringify(json, null, 2))
})()

Replace `FILE_KEY` with the key of the Figma file you want to access, and `YOUR_API_TOKEN` with your Figma API personal access token.

Convert a Figma file to React components

The Figma to React Converter project demonstrates using the Figma REST API to convert a Figma document to React Components[4]. It uses the following API endpoints:

- `GET /v1/files/:file_key` to retrieve the JSON tree from a Figma file
- `GET /v1/images/:file_key` to fetch images for nodes that can't be directly represented by divs

To run the converter, you'll need Node.js, a Figma API personal access token, and the file key of the Figma file you want to convert. Then run:

bash
node main.js FILE_KEY YOUR_API_TOKEN

This will generate React components from the top-level frames in the Figma file whose names start with `#`.

Figma API examples on CodeSandbox

CodeSandbox provides an online playground with various examples of using the Figma API[5]. You can view and fork the examples to experiment with them. Some examples include:

- Using the Figma API to fetch data from a file
- Generating React components from a Figma file
- Implementing a Figma design system in React

To run the examples, simply click on one in the list to open it in CodeSandbox. The examples are pre-configured with the necessary dependencies and code to get you started.

These examples demonstrate how to leverage the Figma API to build integrations that interact with Figma files, extract data, and generate code from Figma designs. The key steps are obtaining a Figma API personal access token, making authenticated requests to the API endpoints, and processing the JSON data returned.