How to use figma-js - 10 common examples

To help you get started, we’ve selected a few figma-js examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github primer / octicons / .github / actions / figma / entrypoint.js View on Github external
outputDir: './build/',
  scale: '1'
}

for(const arg of process.argv.slice(2)) {
  const [param, value] = arg.split('=')
  if(options[param]) {
    options[param] = value
  }
}

if(!FIGMA_TOKEN) {
  throw Error('Cannot find FIGMA_TOKEN in process!')
}

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

// Fail if there's no figma file key
let fileId = null
if (!fileId) {
  try {
    fileId = FIGMA_FILE_URL.match(/file\/([a-z0-9]+)\//i)[1]
  } catch (e) {
    throw Error('Cannot find FIGMA_FILE_URL key in process!')
  }
}

console.log(`Exporting ${FIGMA_FILE_URL} components`)
client.file(fileId)
github primer / figma-action / entrypoint.js View on Github external
outputDir: './build/',
  scale: '1'
}

for(const arg of process.argv.slice(2)) {
  const [param, value] = arg.split('=')
  if(options[param]) {
    options[param] = value
  }
}

if(!FIGMA_TOKEN) {
  throw Error('Cannot find FIGMA_TOKEN in process!')
}

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

// Fail if there's no figma file key
let fileId = null
if (!fileId) {
  try {
    fileId = FIGMA_FILE_URL.match(/file\/([a-z0-9]+)\//i)[1]
  } catch (e) {
    throw Error('Cannot find FIGMA_FILE_URL key in process!')
  }
}

console.log(`Exporting ${FIGMA_FILE_URL} components`)
client.file(fileId)
github braposo / figma-graphql / src / utils.js View on Github external
const Figma = require("figma-js");
const { get, matching, all, has } = require("shades");
const pickBy = require("lodash/pickBy");

const client = Figma.Client({
    personalAccessToken: process.env.FIGMA_TOKEN,
});

const { file, fileImages, comments, postComment, teamProjects, projectFiles } = client;

const getFigma = (fn, id, params) =>
    new Promise((resolve, reject) => {
        const isParams = params ? { ...params } : null;

        // eslint-disable-next-line
        console.log("fetching", id);
        fn(id, isParams)
            .then(({ data }) => resolve(data))
            .catch(reject);
    });
github braposo / figma-graphql / src / utils / figma.ts View on Github external
requestType: RequestType;
    id: string;
    params?: FileParams | FileImageParams | PostCommentParams;
    noCache?: boolean;
};

type FigmaResponse =
    | ProcessedFile
    | FileImageResponse
    | Comment
    | CommentsResponse
    | TeamProjectsResponse
    | ProjectFilesResponse;

// Initialise FigmaJS Client and import all necessary functions
const client = Client({
    personalAccessToken: process.env.FIGMA_TOKEN,
});

const { file, fileImages, comments, postComment, teamProjects, projectFiles } = client;

const mapTypeToFunctionWithParams = {
    [RequestType.File]: file,
    [RequestType.Images]: fileImages,
    [RequestType.PostComment]: postComment,
};

const mapTypeToFunction = {
    [RequestType.File]: file,
    [RequestType.Comments]: comments,
    [RequestType.Projects]: teamProjects,
    [RequestType.ProjectFiles]: projectFiles,
github inthepocket / hubble-scripts / lib / parser / index.js View on Github external
blurs: getBlursFromArtboard(primitivesPage.layers),
        fonts: response.meta.fonts,
        assets: null,
        version: response.meta.appVersion, // Sketch Application Version
        fileType: FILE_TYPES.SKETCH,
        response,
      };
    } catch (err) {
      throw new Error(err);
    }
  } else {
    try {
      const { token, exportAssets } = flags;
      if (!token) throw new Error('Please add a Figma API authorization token');

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

      const primitivesPage = data.document.children.find(i => i.name.toLowerCase() === 'primitives');

      if (!primitivesPage) {
        throw new Error(`
          No primitives page found, skipping exporting of tokens.
          Please see https://github.com/inthepocket/hubble-sketch-plugin/wiki/Artboard-formatting#primitives-page on how to structure your Figma file.
        `);
      }

      const response = flattenChildren(data.document);

      let assets = null;
      if (exportAssets) {
        assets = await retrieveImageUrls(client, file, response);
github souporserious / unicon / packages / unicon / src / get-svgs-from-figma.js View on Github external
function setFigmaToken(token) {
  client = Figma.Client({ personalAccessToken: token })
}
github six7 / figma-assets-generator / src / index.js View on Github external
fileId,
      documentId,
      fileExtension,
      personalAccessToken,
      output,
      scale,
    } = options || config;

    output = output || 'assets';
    fileExtension = fileExtension || 'svg';
    scale = scale || '1';
    personalAccessToken = personalAccessToken || process.env.FIGMA_TOKEN;
    if (!personalAccessToken) throw new Error('No token specified!');
    if (!fileId) throw new Error('No file id given');
    if (!documentId) throw new Error('No document id given');
    const client = Figma.Client({
      personalAccessToken,
    });

    let itemDocument = {};
    const items = [];
    let itemsWithUrls = [];

    const getFileInfo = async task => {
      const file = await client.file(fileId);
      itemDocument = file.data.document.children.find(
        doc => doc.id === documentId
      );
      if (!itemDocument.name) throw new Error('node id not found');
      task.title = `Found document ${itemDocument.name}`;
      return itemDocument;
    };
github vutran / dslint / src / figma.ts View on Github external
export async function getProjectData(projectKey: string) {
  if (!FIGMA_TOKEN) {
    throw new Error('Missing Figma Token');
  }

  const client = Client({ personalAccessToken: FIGMA_TOKEN });
  const { data } = await client.file(projectKey);

  return data;
}
github vutran / dslint / src / figma.ts View on Github external
export async function getStyle(styleKey: string) {
  if (!FIGMA_TOKEN) {
    throw new Error('Missing Figma Token');
  }

  const client = Client({ personalAccessToken: FIGMA_TOKEN });
  const { data } = await client.client.get(`styles/${styleKey}`);

  return data;
}

figma-js

A simple wrapper for the Figma API

MIT
Latest version published 9 months ago

Package Health Score

70 / 100
Full package analysis

Popular figma-js functions