figma-design-tokens

Use this package to output defined styles in your figma document.

Currently you can select too output CSS (css classes and css-variables) or typescript files or javascript files to be used with styled-components like Emotionhttps://emotion.sh/docs/introduction. See example of output further below.

There is also an tailwindcss options, for generate typography that matches the tailwind configuration. Set the formatAs to tailwindcss. Tailwindcss support is a WIP. Currently only support for typography.

• Currently working with Text styles, Color styles and Effects Styles from figma.
• Remember to export your styles in figma as a team library.

How to use

• Add your figma API Token in a environment ".env" file or add it to the constructors config

    FIGMA_TOKEN=ADD_YOUR_TOKEN_HERE

or

    figmaApiToken: 'ADD_YOUR_TOKEN_HERE'

• Create a .mjs file, could be design-tokens.mjs

// Example
// design-tokens.mjs
import { GenerateDesignTokens } from 'figma-design-tokens';

new GenerateDesignTokens({
    figmaFileId: 'YOUR_FILE_ID',
    figmaTeamId: 'YOUR_TEAM_ID',
    nodesList: [
        { nodeId: '1:1', lookFor: 'colors' },
        { nodeId: '1:2', lookFor: 'typography' },
        { nodeId: '1:3', lookFor: 'effects' },
    ],
    // formatAs: 'tailwind', // Side note: output will be in a .js file
    // Optionals:
    // fileExportType: 'css',
    // distFolder: 'design/tokens',
    // customFluidFontSizeFunction: (fontSize: number) => `${fontSize}rem`,
    // figmaApiToken: 'your token'
    // ignoreMissingTokens: boolean,
});

• Open terminal and run following command in root folder node src/design-tokens.mjs
• Optional: You could add it under your scripts in package.json. e.g.

"scripts": {
    "get-design-tokens": "node src/design-tokens.mjs"
}

Tailwind Typography example

   const tokens = require('./design/tokens/design-token-typography-0-007.js');

   /** @type {import('tailwindcss').Config} */
    module.exports = {
      theme: {
        fontSize: {
          ...typographyTokens,
        },
      },
    };

Output example

Color ts file

Filename: design-token-effects-1-1-colors.ts

/**
 *
 * @example backgroundColor: green100;
 */
export const green100 = 'rgba(12, 39, 42, 1.00)';

/**
 *
 * @example backgroundColor: green60;
 */
export const green60 = 'rgba(53, 79, 82, 1.00)';
...

Color CSS file

Filename: design-token-effects-1-1-colors.css

:root {
    --green40: rgba(96, 123, 126, 1);

    --green100: rgba(12, 39, 42, 1);

    --green60: rgba(53, 79, 82, 1);

    ...
}

Typography TS file

Filename: design-token-effects-1-2-typography.ts

export const displayH1 = {
    fontSize: '40px',
    fontFamily: 'Roboto Flex',
    fontWeight: '100',
    letterSpacing: 'normal',
    lineHeight: '1.2',
    textTransform: 'none',
};

export const bodyBold = {
    fontSize: '16px',
    fontFamily: 'Roboto Flex',
    fontWeight: '600',
    letterSpacing: 'normal',
    lineHeight: '1.375',
    textTransform: 'none',
};
...

Typography CSS file

Filename: design-token-effects-1-2-typography.css

.displayH1 {
    font-family: 'Roboto Flex';
    font-size: 40px;
    font-weight: 100;
    letter-spacing: 0em;
    line-height: 1.2;
    text-transform: none;
}

.bodyBold {
    font-family: 'Roboto Flex';
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0em;
    line-height: 1.375;
    text-transform: none;
}
...

Effects ts file

Filename: design-token-effects-1-3-effects.ts

/**
 *
 * @example boxShadow: dropshadowLarge;
 */
export const dropshadowLarge = '0px 3px 14px 4px rgba(0, 0, 0, 0.25)';

/**
 * @example boxShadow: dropshadowSmall;
 */
export const dropshadowSmall = '0px 9px 24px 6px rgba(0, 0, 0, 0.12)';
...

Effects CSS file

Filename: design-token-effects-1-3-effects.css

:root {
    --dropshadowLarge: 0px 3px 14px 4px rgba(0, 0, 0, 0.25);

    --dropshadowSmall: 0px 9px 24px 6px rgba(0, 0, 0, 0.12);
    ...
}

Typescript interfaces

All typescript interfaces is not entirely accurate. I hope Figma, will add typings them self in the future.

Prettier VS Code

Remember to add the following to your .vscode/settings.json file:

    "prettier.configPath": ".prettierrc.json"

Credits

Big thanks to my former workplace IMPACT COMMERCE https://impactcommerce.com, who gave me time to look into this.