figma-calculations
TypeScript icon, indicating that this package has built-in type declarations

0.1.81-alpha • Public • Published

Disclaimer:

APIs are subject to change as we continue to make progress. The source code will eventually be open-sourced.

Figma Calculations

Figma calculations is a library that takes in a Figma file and returns a few actionable statistics to drive adoption and consistent usage of your design system.

You can use this library from either the cloud or a local Figma plugin.

If you don't want to write your own code, try it out in this playground

Features

  • Get percent of partial and full Text, Color style matches
  • Get percent of Style Library Adoption in a file
  • Calculate Team Level Breakdown of Adoption

Usage

import { FigmaCalculator } from "figma-calculator";

const figmaCalculator = new FigmaCalculator();

// used to fetch styles and components
figmaCalculator.setAPIToken("FIGMA API TOKEN");

const doWork = async () => {
  const files = await figmaCalculator.getFilesForTeams([
    "TEAM_ID_1",
    "TEAM_ID_2",
  ]);

  const allFileNodes = [];
  for (const file of files) {
    // optional: if not in figma plugin environment, load a file with this
    await figmaCalculator.fetchCloudDocument("MY_FILE_ID");

    // load up any style libraries
    await figmaCalculator.loadComponents("TEAM ID");
    await figmaCalculator.loadStyles("TEAM ID");

    const pageDetails = {
      teamName: file.teamName,
      projectName: file.projectName,
      pageName: '',
      documentName: '',
      processedNodes: [],
    };

    // run through all of the pages and process them
    for (const page of figmaCalculator.getAllPages()) {
      // recursively run through and process the notes
      const processedNodes = figmaCalculator.processTree(page);

      // log out the text linting results and suggestions
      if (check.checkName === "Text-Style" && check.matchLevel === "Partial") {
        console.log(check.suggestions);
      }

      pageDetails.pageName = file.pageName;
      pageDetails.documentName = file.docuemntName;
      pageDetails.processedNodes = processedNodes;
    }
  } 
    
  const allProcessedNodes = allFileNodes.map(
    (details) => details.processedNodes
  );

  // some aggregate calculations
  const totalAdoption = figmaCalculator.getAdoptionPercent(allProcessedNodes);
  const textStylePercents =
    figmaCalculator.getTextStylePercentaget(allProcessedNodes);
    
    
  const teamBreakdown = figmaCalculator.calculateTeamPercents(allFileNodes);
};

How we calculate adoption

Read our blog post (to-be-published) on how we calculate design adoption.

Readme

Keywords

none

Package Sidebar

Install

npm i figma-calculations

Weekly Downloads

50

Version

0.1.81-alpha

License

ISC

Unpacked Size

175 kB

Total Files

47

Last publish

Collaborators

  • heyraviteja
  • protodave