Figma.js

A simple wrapper for the Figma API

Cool projects using this:

• figma-graphql
• figmint

Usage

Full documentation is available on the web, and most everything is typed with Typescript.

Creating a client

Quickest start is to grab a personal access token from your Figma account settings page

import * as Figma from 'figma-js';

const token = '12345';

const client = Figma.Client({
  personalAccessToken: token
});

Alternatively, if you're building an app with OAuth authentication, after you get back the OAuth access token…

import * as Figma from 'figma-js';

const token = '12345';

const client = Figma.Client({
  accessToken: token
});

Doing cool things

Once you have instantiated a client, have fun!

client.file('file-id').then(({ data }) => {
  console.log(data);
});

Just reusing types

All of the types in the Figma file format / API are exported.

import * as Figma from 'figma-js';

const textNode: Figma.Text = {
  // … this should autocomplete if your editor is set up for it!
};

Contributing

We used the typescript-starter repo for this - refer to its README for more detailed instructions.

Helpful development commands:

yarn watch
yarn docs
yarn docs:publish

Contributions welcomed

• generate types automatically
• add tests

Committing

yarn global add commitizen

# instead of git commit

git cz

Contributors

• @jongold (Airbnb)
• @chrisdrackett