louizo / figma-js

Little wrapper (+ types) for the Figma API

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
});

Or 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
});

Or if you need to use a https proxy agent:

import * as Figma from 'figma-js';
import { HttpsProxyAgent } from 'https-proxy-agent';

const token = '12345';
const proxyAgent = new HttpsProxyAgent(process.env.https_proxy);

const client = Figma.Client({
  accessToken: token,
  httpsAgent: proxyAgent,
  proxy: false
});

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

• @jemgold (Airbnb)
• @chrisdrackett