Figma Tokens integration
Clapy partners with the team of Figma Tokens, a plugin that helps to design on Figma using design tokens.
For example, let’s say you have defined your colors, fonts, spacings… using Figma Tokens. When generating code with Clapy, tokens will be extracted seamlessly and included in the output project as CSS variables, in
/* ... */
Components will use those variables following the Figma Tokens configuration, e.g.:
When a style doesn’t have a variable defined, it falls back to the Figma values, e.g.:
Clapy embeds a fork of Style Dictionary to generate the variables, which is useful to generate a fully working project. But you’re free to setup your own pipeline generating variables from Figma Tokens, and include them in the target project. The components will refer to those variables following the Style Dictionary and Figma Tokens standards.