figma-tokens-to-tailwind-variables

Usage

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

Install

yarn add figma-tokens-to-tailwind-variables

or

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.