[Tracking]: Enable non-local color and text styles

[six7]

We need to be able to enable color and text style usage for styles that are non-local.

Currently, the plugin looks in the local file if there's any styles that match the name of a token. If not, it will apply the raw value.

In order for theming to work for files outside of the local style document, we need to store the style ID for each token.

Features this enables:

• Use style tokens in files that do not contain local styles but have remote styles enabled via library
• Swap styles by changing themes

We are currently working on implementing this.

Tasks that need to be done for a release

• [x] When creating styles, save style id for current theme for all created tokens
• [x] When importing styles, save style id for current theme for all imported tokens
• [x] Give users a way to attach styles to a theme without importing or creating it
• [x] When switching themes, swap style id with the one matching the applied token
• [x] Show saved style id's in the themes dialog
• [x] Allow users to delete a saved style id in a theme

Currently, this is what the plugin's logic is for determining whether to apply a style or a hex value:

1. there's a local style that exists that we can apply with the same name as the token
2. otherwise, apply hex value

Long term, we want the following logic when deciding on what to apply on a style-able layer:

1. theme has a style id for the current token that we can use
2. token itself has a style id that we can use (e.g. on the $extensions property)
3. there's a local style that exists that we can apply
4. does it have a style applied currently? yes: 4/Y/a) if the value of the currently applied style matches the token value, don't do anything 4/Y/b) if the value of the currently applied style doesn't match the token value, set hex and set a backup_styleid on the layer (the current style) no: 4/N/a) if there's a backup_styleid on the layer that matches the token value, apply that 4/N/b) if there's no backup_styleid on the layer, apply raw hex

Tasks that we can do as a follow-up

• [ ] Allow users to save a style id on each individual token
• [ ] When changing theme, don't just look for applied tokens but also swap any applied styles if we find a match in our saved style id's

[nachosdesign]

Hey @six7 👋 awesome work with this plugin man, it's 🔥 At my work, all of our styles are kept in non-local libraries. Is there any way currently to swap non-local styles (ala Themer)?

[six7]

Thanks @nachosdesign ❤️

Currently not, but I hope to tackle this problem soon! Themer-like functionality would be great.

[matko13]

Needed this asap!

[Vanals]

Looking forward to it :)!

[volkansenol]

Hello @six7 Is there anything update with this issue? We are using always shared style in any project. This thing is hustle for us.

[denis-strong]

And i thought it's all my fault and I set it up incorrectly. Multi-theming is my number one issue.

[six7]

Actively working on this feature, it won't make it for the next release but hopefully for the one after that 🙏

[kmiters]

Any ETA when this will be ready? I'm starting a new project that I would love to use Figma Tokens for but without a synch between remote token values in separate files I will need to pass again.

[rbosker]

@kmiters Currently we're beta testing the non-local styles, which will be released in the upcoming release. Estimated ETA is at the end of this week.

[six7]

We shipped this today with version 114. We plan to do a followup milestone sometime in the future, we'll be tracking work for that in this issue: https://github.com/six7/figma-tokens/issues/1160

Closing this tracking issue as completed now.