Skip to content

Instantly share code, notes, and snippets.

@PavelLaptev

PavelLaptev/import-Figma-tokens.js

Created May 31, 2019 20:26
Show Gist options
  • Save PavelLaptev/760e3ffe54f4ed883c9548cd8734ff18 to your computer and use it in GitHub Desktop.
Save PavelLaptev/760e3ffe54f4ed883c9548cd8734ff18 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. PavelLaptev created this gist May 31, 2019.
    166 changes: 166 additions & 0 deletions import-Figma-tokens.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,166 @@
    import { RGBToHEX } from "./RGB-to-HEX";
    import { toCamelCase } from "./to-camel-case";
    import { downloadJSON } from "./download-JSON";

    /////////////// Get Functions ///////////////
    /////////////////////////////////////////////
    ////////////////// Spacers //////////////////

    const getSpacers = (stylesArtboard) => {
    let spacers = {};

    const spacersAtrboard = stylesArtboard.filter((item) => {
    return item.name === "Spacers";
    })[0].children;

    const spacersGroup = spacersAtrboard.filter((item) => {
    return item.name.includes("$");
    })[0].children;

    spacersGroup.map((item) => {
    const spacerObj = {
    [item.children[0].name.toLowerCase()]: `${
    item.absoluteBoundingBox.height
    }px`
    };

    return Object.assign(spacers, spacerObj);
    });

    return spacers;
    };

    ////////////////// Palette //////////////////

    const getColors = (stylesArtboard) => {
    let palette = {};

    const paletteAtrboard = stylesArtboard.filter((item) => {
    return item.name === "Palettes";
    })[0].children;

    const palettesGroups = paletteAtrboard.filter((item) => {
    return item.name.includes("$");
    });

    palettesGroups.map((item, i) => {
    let currentColors = {};

    item.children.forEach((item) => {
    Object.assign(currentColors, {
    [item.name]: RGBToHEX(
    item.backgroundColor.r,
    item.backgroundColor.g,
    item.backgroundColor.b
    )
    });
    });

    const paletteObj = {
    [item.name.substr(1)]: currentColors
    };

    return Object.assign(palette, paletteObj);
    });

    return palette;
    };

    ////////////////// Spacers //////////////////

    const getGrids = (stylesArtboard) => {
    let grids = {};

    const gridsAtrboard = stylesArtboard.filter((item) => {
    return item.name === "Grids";
    })[0].children;

    const gridsArr = gridsAtrboard.filter((item) => {
    return item.name.includes("$");
    });

    gridsArr.map((item) => {
    const gridObj = {
    [item.name.substr(1)]: {
    columns: item.layoutGrids[0].count,
    sideMargin: `${item.layoutGrids[0].offset}px`,
    gutter: `${item.layoutGrids[0].gutterSize}px`,
    breakpoint: `${item.absoluteBoundingBox.width}px`
    }
    };

    return Object.assign(grids, gridObj);
    });

    return grids;
    };

    ////////////////// Typography //////////////////

    const getFonts = (stylesArtboard) => {
    let fonts = {};

    const fontsAtrboard = stylesArtboard.filter((item) => {
    return item.name === "Fonts";
    })[0].children;

    const fontsGroup = fontsAtrboard.filter((item) => {
    return item.name.includes("$");
    })[0].children;

    fontsGroup.map((item) => {
    const fontObj = {
    [toCamelCase(item.name)]: {
    fontFamily: item.style.fontFamily,
    postscriptFontFamily: item.style.fontPostScriptName,
    fontSize: `${item.style.fontSize}px`,
    fontWeight: item.style.fontWeight,
    lineHeight: `${Math.ceil(item.style.lineHeightPx)}px`,
    letterSpacing:
    item.style.letterSpacing !== 0
    ? `${item.style.letterSpacing}px`
    : item.style.letterSpacing
    }
    };

    return Object.assign(fonts, fontObj);
    });

    return fonts;
    };

    ///////////////// Main Function /////////////////
    /////////////////////////////////////////////////

    const fileID = "your file id"
    const figmaToken = "your Figma token"

    export const importFigmaTokens = async (e) => {
    e.preventDefault();
    const result = await fetch(
    `https://api.figma.com/v1/files/${fileID}`,
    {
    method: "GET",
    headers: {
    "X-Figma-Token": figmaToken
    }
    }
    );
    const figmaFullStructure = await result.json();
    const figmaArtboards = figmaFullStructure.document.children[0].children;

    // JSON
    const tokeensJSON = {
    grids: {},
    spacers: {},
    colors: {},
    typography: {}
    };

    Object.assign(tokeensJSON.spacers, getSpacers(figmaArtboards));
    Object.assign(tokeensJSON.colors, getColors(figmaArtboards));
    Object.assign(tokeensJSON.grids, getGrids(figmaArtboards));
    Object.assign(tokeensJSON.typography, getFonts(figmaArtboards));

    downloadJSON(tokeensJSON, "design-tokens");
    };