figma-development-kit

OAuth2

demo | src

Quick start

Download callback.html and add it to your project. Make sure you add the url of the callback file to your Figma developer settings page. Learn more by reading the Figma OAuth2 setup guide.

Directly use in browser

<script src="https://unpkg.com/figma-development-kit@^1/dist/fdk.umd.js"></script>

const figmaApi = new fdk.FigmaApi({
  clientId: '<FIGMA_CLIENT_ID>',
  clientSecrete: '<FIGMA_CLIENT_SECRETE>',
  /* e.g. http://localhost:5000/callback.html or https://www.my-awesome-project.com/callback.html */
  redirectUri: '<PATH_TO_CALLBACK_FILE>', 
});

figmaApi.getOAuth2Token().then(token => {
  console.log(token);
});

Import as an ES6 module

/* in source code */
npm install --save figma-development-kit

import { FigmaApi } from 'figma-development-kit';

const figmaApi = new FigmaApi({
  clientId: '<FIGMA_CLIENT_ID>',
  clientSecrete: '<FIGMA_CLIENT_SECRETE>',
  redirectUri: '<PATH_TO_CALLBACK_FILE>',
});

figmaApi.getOAuth2Token().then(token => {
  console.log(token);
});