Runroom implementation of Figma design tokens
MIT License
Originally inspired on: figma-tokens.
npm install @runroom/design-tokens --save-dev
Then execute:
npx design-tokens
: If you want to sync with figma.You can specify a different config file name using the parameter --config-file=FILENAME
. For
example:
npx design-tokens --config-file=myfile.{json,js}
Add a config file on the root directory of your project. This repository uses the standard config file naming
by cosmiconfig.
By default, the config file name should be use designtokens
as module name, like .designtokensrc.json
or .designtokensrc.js
, also as a package.json
entry with the key designtokens
.
If you want to use a different name for your config file, you can use the parameter --config-file=FILENAME
when you
execute the command.
You can find a template for your config file here.
figmaApiKey
: Your figma unique Api key to perform the auth on figma's API
figmaProjectId
: Your figma project ID (Can be found in your's project URL, after the figma.com/file/FIGMA_ID/..)
figmaPages
: An object with the figma pages you want to sync. The key is the name of the page and the value is an
array of the figma frames that contains the tokens
outputDir
: The source where will be stored the package's output
figmaThemes
: An array of the name of the themes you want to sync. This option is only available for color tokens, and
we take as theme the first block of the name. For example: dark-primary
or dark-background-secondary
will be dark
.
styleDictionary
: The style dictionary config
The themes are generated in the same file as the tokens, but if you want to extract the themes to a different file with
the selector [data-theme="THEME_NAME"]
, you can add the following config to the css files, in the style dictionary
config, how you can see in the config template:
{
"destination": "variables-themes.css",
"format": "css/variables-themes"
}
Expanding the design tokens in your project is a straightforward process. Here's how you can add new Figma tokens:
Create a Figma Frame:
Update the Configuration:
designtokens.config.json
or similar).pages
array. This ensures that your project recognizes theDefine Token Information:
src/designTokensPages.ts
. This entry should include the name of the page andCreate a Token:
src/tokens
directory, create a new TypeScript file with a method that returnDesignTokensGenerator
.Define Token Types:
src/types/figma
directory, define types that reflect the structure of the new tokens in Figma.src/types/designTokens
directory, define types specific to how the tokens will be used.Add Token to Style Dictionary:
src/styleDictionary/styleDictionary.ts
file.This project is under the MIT license.