Customize figma-token-engine's rendering of design tokens

[amazingrando]

The issue—customizing figma-token-engine's rendering of design tokens

Prior to the installation of the figma-token-engine package the only way to get design tokens from Figma was for a designer to push them from Figma. This package allows us to pull design tokens directly from Figma using their API. Once the tokens are pulled we then transform them into CSS and JSON.

The problem is that we need to modify the default output from figma-token-engine to get the tokens correct. We need to convert pixels values to rems for the sizing, spacing, borderRadius, breakpoint, and fontSize tokens. We also need to append "px" to the end of the borderWidth tokens. You can see these transformations in ./src/tokens/tokensTransform.js.

Additional Context

Using figma-token-engine

• Running the command npm run token-engine:fetch will pull down the raw tokens as tokens-studio.json.
• Then, based on the config at .tokens.config.json...
• It creates src/components/tokens/tokens.css and src/components/tokens/tokens.json.

Rendering tokens without figma-token-engine

• The designer in Figma pushes the tokens to src/tokens/figma.tokens.json
• Run npm run tokens:build and this will:
  • Transform the tokens from Figma's token format to the universal Style Dictionary format.
  • Output the properly formatted tokens using the script at ./src/tokens/tokensTransform.js.

Desired outcome

I want to be able to use figma-token-engine to pull and transform design tokens from Figma so that developers do not have to wait on designers to export tokens.