In order to keep design and implementation in sync Liquid uses so-called design tokens. These tokens are [hosted on Figma][liquid tokens 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][liquid tokens 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
Here is an example illustrating how to invoke the command mentioned above:
# npm 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>" # pnpm FIGMA_API_KEY=<your-api-key> pnpm exec 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](https://tailwindcss.com/docs/presets) file from `@emdgroup-liquid/liquid/dist/css/tailwind-preset.js`, it will look for a token file in your project root. <ld-notice headline="Note" mode="warning"> 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. </ld-notice> <docs-page-nav prev-href="guides/tailwindcss-integration/" next-title="Testing" next-href="guides/testing/"></docs-page-nav> [liquid tokens on figma]: https://www.figma.com/file/JcDMeUwec9e185HfBgT9XE/Liquid-Oxygen?node-id=2615%3A28396