Enhancing Style Identification

I am 100% sure that whatever improvement on styles we need to do, has to be done in the style panel, to keep the responsibility in one place

That is a valid point.

The idea with this one was to augment the experience to make it easier to identify which layers might have a style applied and which ones don't. This would just serve as visual indication and not try to take away from the purpose of the style panel.

I understand, but this has to happen somewhere else, not in the navigator

Btw we do have that indication in collapsed panels of the style panel

and webflow does the same thing

its also a question of why you want to know what styles are applied without clicking on the element

if clicking on the element is acceptable to learn that info, then this info can be shown in the style panel

navigator will have a menu in the future, so we also need space for menu button

my question is: why do you need to know what styles are applied without clicking on an instance?

One use case in my mind is being able to quickly glance through the navigator and see if there are any layers which are simply using local styles or no styles vs which ones are using tokens available. From a design consistency standpoint, if I am collaborating with another developer, I want to ensure that they are utilizing reusable tokens vs creating one-off local styles.

Another example would be I am editing styles on another layer and I want to use the same styles or reference what styles are being used in another layer. With a quick glance I can just quickly look at the list of tokens applied on the layer and just add the same to the current layer without having to click back and forth.

But considering that the navigator will have a menu in the future, this might not necessarily be the way to go.

In other words:

1. know when instance uses local style to know what needs to be converted to tokens
2. know which instances have applied which token to add identical token

correct?

Pretty much

I don't see how you were going to solve the second, because you want to know actual token names on the instance

Additionally the problem with the first case is that in a lot of cases local styles are valid and should stay there. I don't recommend creating tokens for everything, only for reusable styles.

If you want to have the same tokens applied on a new instance that already are added to some other instance, we should be able to just copy all tokens from one instance to another instance, would that solve your problem 2?

As for the first case, search functionality could help finding all instances with local styles

For the use case, agreed that sometimes local styles are better than creating tokens. But going through the layers panel and having that indicator helps make the audit process quick to identify which layer might need to be reviewed and which probably is fine.
Search functionality could maybe help with that.

For the second use case, that's why there was an addition of an on-hover indicator to create a quick glance of what styles are applied to the layer. Having ability to copy all the tokens applied on a layer and paste it on another would also be a good approach to the problem. Similar to how Figma allows copying and pasting of style properties

A centralized token manager to see all the tokens created might also improve the workflow of reviewing what tokens are created

on hover is basically same as clicking

I think all of these prooblems need to be solved in tokens manager

we even have a design for it but never implemented

token manager would show aall of it easily

Agreed 100%

because there would be enough space for both, showing tokens, search, etc

you also want to know which tokens are unused etc

Exactly!

Things like importing tokens and using token libraries could also be managed through a token manager.

wanna take a stab at designing tokens manager?

I can find you what we were prototyping in figma, but it was not finished and we didn't work on this actively

these were prototypes @Taylor worked on a bit

but they were just prototypes, lots of unresolved questions there

Would be happy to take a stab at it

That token manager is going to be sweet!

Beautiful presentation @MrShrek !! I'm super excited for you to work on the tokens manager. I added the WIP of the Tokens manager in the Design Docs Figma Community file so you can access it. It's in the Tokens Manager page: https://www.figma.com/community/file/1314046494721696168

Thanks @Mark

@MrShrek beautiful work! Thank you!

User stories: The one thing I think is unnecessary is the ability to see all local styles. I think the ability to sort and filter tokens would be great, as well as the ability to bulk delete and unlink tokens would be awesome as well. Probably would be good to be able to bulk replace/merge tokens as well.

Design: I think it's cool the way you integrated it into the existing Builder UI, with the tokens list on the navigator, and using the styles panel on the right to change the tokens' styling. Just wondering what you thought of the WIP that we gave you? I noticed your design doesn't really take anything from that, and there were some features such as themes and combining tokens that were touched on in the WIP that were not in your designs. BTW, I didn't work on that WIP, so feel free to critique it honestly.

Thanks for the feedback. Here were some of my thoughts

User Stories:

• The local styles was something I was unsure about as well. The thought there was, this would allow the user to be able to see where they have used local styles in case they want to review the designs and make sure local styles aren’t being used where existing tokens can be.
• Filter is something that I want to explore. It would be nice to be able to filter by unused, only used on the current page, etc.
• Sorting was something I thought would not really add as much value for actual use. There is search in case the user is looking for specific token by name.
• Some of the bulk functionalities are something I definitely would like to explore.