Voogdfigma NPM

Note: This guide assumes that you have a Figma account as well as any relevant data (access token, file key, team id, project id) required in order to use this package. For more information about said data, please refer to the official documentation.

Change log can be found at the bottom of the file.

Getting started

Installing the package via NPM

npm i voogdfigma

Importing into your project

Javascript

const { Client } = require('voogdfigma');

const voogdFigma = new Client('ACCESS_TOKEN');

Typescript/ES6

import { Client } from 'voogdFigma';

const voogdFigma = new Client('ACCESS_TOKEN');

A closer look at the Client class

The client offers 5 public methods:

getDocument(key: String, callback?: (document?: Document, err?: Error) => void): Promise<Document> | void;

getProjects(teamId: String, callback?: (projects?: Project[], err?: Error) => void): Promise<Project[]> | void;

getProjectFiles(projectId: Number, callback?: (files?: File[], err?: Error) => void): Promise<File[]> | void;

getTeamStyles(teamId: String, keys?: String[], callback?: (styles: Styles[], err?: Error) => void): Promise<Style[]> | void;

exportAssets(key: String, options: ExportImagesOptions, callback?: (err?: Error) => void): Promise<void> | void;

Note: All methods can take in a callback function as a parameter or simply return a promise.

Usage Examples

Document, projects, and files

// Fetching a document (no callback)
client.getDocument('YOUR_FILE_KEY')
  .then((document) => {})
  .catch((err) => {});

// Fetching a document (with callback)
function logMyDocument(document, err) {
  const message = err || document;
  console.log(message);
}

client.getDocument('YOUR_FILE_KEY', logMyDocument);

Styles

// All styles accross every projects (no callback)
client.getTeamStyle('YOUR_TEAM_ID')
  .then((styles) => {})
  .catch((err) => {});

// All styles accross every projects (with callback)
function logMyStyles(styles, err) {
  const message = err || document;
  console.log(message);
}

client.getTeamStyle('YOUR_TEAM_ID', logMyStyles);

// For a more precise fetch, you can provide the key(s) of the file(s)
// on which the styles are defined.
// The call will then only return those present on given files.
client.getTeamStyle('YOUR_TEAM_ID', ['FILE_KEY_1', 'FILE_KEY_2'...])
  .then((styles) => {})
  .catch((err) => {});

Assets

const options = {
  assetRefs: [
    {
      // Node ID.
      id: '0:1',
      // Name the asset will hold on local disk
      exportAs: 'foobar'
    }
  ],
  outDir: './assets',
  format: 'PNG'
};

// Exporting an asset (no callback)
client.exportAssets('YOUR_FILE_KEY', options)
  .then(() => {})
  .catch((err) => {});

// Exporting an asset (with callback)
function notifyUserOfExportStatus(err) {
  const message = err || 'All assets have been exported!';
  console.log(message);
}

client.exportAssets('YOUR_FILE_KEY', options, notifyUserOfExportStatus)

Definitions

Some types may have been altered in order to make them more readable and relevant to this current project. Please refer to the built-in definition file.

Note: I would recommend writting a small function in which you would write the document data in a .txt file, then view its content through a JSON parser. You can then delete said function and continue on with your business.

const fs = require('fs');

function writeToFile(document, err) {
  if (document) {
    const data = JSON.stringify(document);
    fs.writeFile('./document.txt', data, (err) => {
      if (err) console.log(err);
    });
  } else {
    console.log(err);
  }
}

client.getDocument('YOUR_FILE_KEY', writeToFile);