Figma Token Scss Style Dictionary V3

Build pipeline that converts Figma Tokens Studio export into SCSS variables and utility classes.

When to use

• Project uses SCSS-based design system (e.g. with Ant Design overrides)
• Tokens are managed in Figma Tokens Studio and exported as a single JSON
• Need base/theme/semantic/component token layers with @import auto-wiring

Pipeline

1. Split — split-files.js reads monolithic tokens.json and fans out to tokens/{group}/{name}.json
2. Build — build.js runs Style Dictionary v3 with custom transforms and formats:
   • Glob source files by layer (base, theme, semantic, component)
   • Register transforms: hslhsl, typography/shorthand, border/shorthand, shadow/shorthand, size/px, size/letterspacing, type/fontWeight, color/hexrgba,