Design token file

[nickelliott71]

I realise that Fluent is built for Microsoft Apps, but the company I work for are looking at adopting Fluent to help them scale faster. However they have specific theming requirements.

They are able to change the design token values within the Figma UI Toolkit (such as the colour ramp), but we would like to be able to have a synch between the values in Figma and Git (using something like Figma Tokens Studio). This would require the format to be exported using the latest W3C Design Token Spec. Are there any plans - or does anyone know any ways already - for Fluent to follow this specification, so designers can manage the tokens in their space and seamlessly synch this up with code? Otherwise, it's a very manual process between design and dev.

Thanks in advance!

[tombohub]

Hi, I am not sure what's the format of W3C design token spec, but fluentui team decided on current token structure, which is flat object, for the performance reasons. I don't think have any plans to change that.

You can learn about their work in these videos: https://learn.microsoft.com/en-us/shows/fluent-ui-insights/

especially styling and griffel for your interest

[nickelliott71]

The W3C design token spec is simply a JSON format, so that design decisions can be handled centrally and used in all sorts of applications (not just web sites). You can easily export this JSON file from Figma, and even create PR in Git automatically. I'd just be keen to understand if there is a way to import the values from this file into Fluent so it can create the themes as needed.

[tombohub]

I haven't encounter any tool that can map W3C tokens to fluent ui tokens, but it seem like a good idea.