Figma-tokens-to-tailwind-variables NPM

Usage

Use this package to convert exported Figma tokens JSON into valuable TailwindCSS data.

Install

yarn add figma-tokens-to-tailwind-variables

npm install figma-tokens-to-tailwind-variables

Usage

In your tailwind.config.js file.

/*
 * Change "figma-tokens.json" to point to
 * the location of your exported tokens file.
 */
import tokens from "figma-tokens.json" assert { "type": "json" };
import FigmaTokensToTailwindVariables from "figma-tokens-to-tailwind-variables";

const {
  Colors,
  FontSizes,
  FontFamilies,
  FontWeights,
  LineHeights,
  BoxShadows,
} = FigmaTokensToTailwindVariables(tokens);

export default {
  // ... Your other TailwindCSS configuration
  theme: {
    /*
     * NOTE: You can use color or font-family
     * variables inside of extend, but
     * I prefer to have my colors only.
     */
    colors: {
      ...Colors,
    },
    fontFamily: {
      ...FontFamilies,
    },

    extend: {
      fontSize: {
        ...FontSizes,
      },
      fontWeight: {
        ...FontWeights,
      },
      lineHeight: {
        ...LineHeights,
      },
      boxShadow: {
        ...BoxShadows,
      }
    }
  }
};

Other helpful snippets

Color variables

export default = {
  // ... Your other TailwindCSS configuration
  theme: {
    /*
     * NOTE: I use this in tandem with
     * @mertasan/tailwindcss-variables
     * to export CSS variables.
     * Variables are exported as
     * --color-NAME-NUMBER into the CSS :root
     * (eg --color-green-100: #E5F2EB)
     */
    variables: {
      DEFAULT: {
        color: {
          ...Colors,
        },
      },
    },
  }
  plugins: [
    require("@mertasan/tailwindcss-variables"),
  ],
};

Require vs import.

This can alternately be called in via require.

const tokens = require("figma-tokens.json");
const { default: FigmaTokensToTailwindVariables } = require("figma-tokens-to-tailwind-variables");
const { Colors } = FigmaTokensToTailwindVariables(tokens);

Options

The function FigmaTokensToTailwindVariables allows a secondary parameter with options:

import tokens from "figma-tokens.json" assert { "type": "json" };
import FigmaTokensToTailwindVariables from "figma-tokens-to-tailwind-variables";

const {
  ...
} = FigmaTokensToTailwindVariables(tokens, {
  // Place your options here
});

Option name	Default	Usage	Type
fontFamilyNamespace	`typography/font-family`	Defines the string-based search pattern that the processor searches for define font family names. Eg. a token with a variable name `typography/font-family/base` will return `FontFamily { 'base': value }`	String
fontSizeNamespace	`typography/size`	Defines the string-based search pattern that the processor searches for define font sizes. Eg. a token with a variable name `typography/size/h1-mobile` will return `FontSize { 'h1-mobile': VALUE }`	String
fontWeightNamespace	`typography/weights`	Defines the string-based search pattern that the processor searches for define font weights. Eg. a token with a variable name `typography/weights/base/bold` will return `FontWeights { base: { bold: VALUE } }`	String
lineHeightNamespace	`typography/line-height`	Defines the string-based search pattern that the processor searches for define line-heights. Eg. a token with a variable name `typography/line-height/heading` will return `LineHeights { heading: VALUE }`	String

Figma naming recommendations

Store groups of variables in collections and folders that can be easily found by their namespace (eg. all font size variables should fall under Typography/Font size/H1 or, better, typography/font-size/h1).
While the tokens processor sanitizes the value placed beyond the final slash (eg. tokens stored as Typography/Font Size/H1 Mobile will return as h1-mobile), we recommend adopting a lowercase formatting and using hyphens (-) instead of spaces.