In order to keep design and implementation in sync Liquid uses so-called design tokens. These tokens are hosted on Figma. They include global variables such as colors, spacings etc. and end up as CSS custom properties in autogenerated CSS files which you eventually import in your own code.
In some cases you might want to access the "raw" design tokens or even use your own design tokens in your project. Both is possible with Liquid.
Maybe you don't want to use the Tailwind preset which is bundled with Liquid and want to build your own config from scratch. Or you are using something other than Tailwind for the same purpose. In such cases you might want to access Liquid's design tokens (colors, spacings etc.) as "raw data". You can do so by importing the bundled design token file under
You have at least two options:
Copy and overwrite the
design-tokens.json and / or the CSS files with your own manually.
Copy Liquid's token file on Figma, adjust it to your needs and auto-generate your
design-tokens.json and a
liquid.globals.css file with values from your own Figma token file by running a command from the
@emdgroup-liquid/liquid package using
Note: You should not change the structure of the Figma token file nor the naming of elements within the file. You should only alter the element values.
Here is an example illustrating how to invoke the command mentioned above:
FIGMA_API_KEY=your-api-key npx @emdgroup-liquid/liquid apply-design-tokens --path "src/your/output/path" --figma-file "https://www.figma.com/file/<figma_id>/<file_name>?node-id=<node_id>"
As you can see, the command is invoked with
npx. It uses an environment variable
FIGMA_API_KEY, which you will have to provide in order to be able to fetch data from the Figma API, and executes the
apply-design-tokens task. It also uses two application parameters:
--figma-file, which is the URL to your Figma token file, and
--path, which is the output path that points to a directory in your project where you would like to save the generated CSS file containing the CSS custom props. The command will save the
design-tokens.json file in the root of your project. When you
require the Tailwind CSS preset file from
@emdgroup-liquid/liquid/dist/css/tailwind-preset.js, it will look for a token file in your project root.
Note: Asset loading (including fonts) is not taken care of automatically when you use custom design tokens, so you will have to take care of that yourself.