TLDR - this doesn’t work
https://docs.tokens.studio/themes/themes-pro

My Next/React web application platform has a pretty sophisticated token pipeline

• Tokens are generated in Figma and recorded in Tokens Studio, where Figma is a participating member of the advisory board (DTGC format)
• Tokens are transformed by Style Dictionary (thanks Amazon!) into both Tailwind and JSON
  • JSON powers a slot styling API for cachable elements in HeroUI
  • Tailwind layer directives create a clean index of references for the slots
• Typescript uses branded types to tag data with processed/validated signatures throughout the system. I match the DTGC spec to increase type access between all DTGC-based systems and discriminated unions to handle the uniform interface between the branded DTGC types and systems like HeroUI and Tailwind.
• Yes, I’m a UX designer. I just also sling a little code

Tokens Studio properly inherits in the right order

• Global types carry core color, size, and other technical declarations
  • Scales are a global type that determine primary/secondary/accent/contrast colors (25-950) as a baseline), sourced from the raw color scales in colors.json
• Mode (light/dark) follows the system preference and declares globals with a caveat that all color is determined by the scales global (ex. {primary.400}) and not the raw color scales (eg. may-green.400)
• Semantic declares things like surfaces, borders, shadows, etc that a Figma designer would use day-to-day when branding the core components. It resolves to mode but without the light/dark attached (so it follows the system in code). This is our first thematic mode. All spiffy to here.
• Overrides is where Tokens Studio works but Figma goes sideways. Here I re-declare the scales by theme name. When a scale is selected (blue, purple, event name, whatever), and declared by a template, all of the color scales adapt without changing the scale values. This is the killer feature.
• Components matches HeroUI slot values and resolves to semantic.json (which resolves to mode and follows color overrides). This allows designers to declare a semantic scale and see how things re-color, and then make deeper token decisions as required with an ability to understand how inheritance affects all of the theme combinations across the system.

Except that it doesn’t work. Figma requires flat modes and selecting “light” and “purple” at the same time simply leaves it blue or, depending on how I flip the inheritance “light blue” or “dark purple”. Sure, I can write a Node application that manually flattens the theme and import that into JSON but the friction involved completely invalidates the point of Tokens Studio theme integration.

Of course, you wouldn’t KNOW this doesn’t work without a pro account. Want to see exactly how badly it fails? There’s a demo for that: https://www.figma.com/community/file/1245693386224897967

Convert the honest-to-god Tokens Studio multi-dimensional theme demo with complete and functional tokens into a Figma theme.

 

Dear Santa…. (and Figma)