Non-local styles: M2

[six7]

Now that we shipped support for non-local styles in version 114, we should plan ahead for the next iteration of this feature.

Tasks for M2

• Allow users to save a style id on each individual token
• Allow users to set style name 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 #1204
• When renaming a token, ask to rename any local styles (in addition to the Remap tokens functionality we have) #1194
• When deleting a token, ask to delete any local styles #1195
• In the Styles Actions, add a new "Sync styles" option which renames Styles according to their connected tokens (via Themes), deletes any styles that are not referenced, and creates new styles that do not exist yet #1196

If you've used non-local styles and have any feedback for us, leave your feedback in this issue 🙏

[lmjabreu]

What's the best resource to understand how to use non-local styles?

I was a developer for 10 years or so, now I deal with design systems, and I'm quite confused by this plugin 😅

In the immediate future, my team would benefit from being able to switch themes, just colour styles to being with.

I'd expect to be able to use this plugin in this way:

1. Run the plugin in the file containing the source colour styles
2. Import the styles so we can manipulate them into themes
   1. Import local colour styles: Styles > Import (local) Styles
   2. Save to GitHub (optional)
   3. Create a set or theme: e.g. duplicate original set containing Light + Dark themes, rename the new set to Light, delete dark colour styles in that set (e.g. Dark/Actionable/...). Rename the original set to Dark and delete light colour styles (e.g. Light/Actionable/...)
3. Toggle between sets or themes, applying them to the chosen scope
   1. Open Figma Tokens in the current or new file
   2. Toggle between Light and Dark theme
   3. Update the chose scope, e.g. currently select frame

The plugin seems to:

1. Have long-winded processes: e.g. creating a theme requires one step to create and name, another one to attach local styles
2. Confusing vocabulary, in the example above, local styles means styles from the currently active set, not the local file. Styles > Import Styles does import local file styles, but the local keyword is missing.
3. Opaque mechanics and error handling: toggling settings such as "ignore first part of the token name for styles" is referring to a process that's internal to the plugin, i.e. style names are converted into tokens, even if you never use tokens. Updating the selection styles may yield no changes, then user must understand why themselves, rather than being able to consult a log (e.g. no styles updated, couldn't find matching token/style with the name Actionable )

I paid for the Pro subscription so I'd like to help improving this plugin if possible. :)

[six7]

@lmjabreu best would be to check out https://docs.figmatokens.com/styles/non-local-styles

I have a feeling though that what you want will be covered by #1204

And thanks a ton for the feedback, this helps us shape it further 🙏

[lmjabreu]

@six7 I'll check that out, does look helpful 🙏

#1204 seems super relevant.

Happy to provide feedback on-demand and get my team to do the same. Thanks for all your hard work on this, much appreciated 🙇‍♂️

[six7]

Closing this epic as complete and the unfinished tasks as not planned (for now)