Show Hex values for color tokens

[pguptaDS]

It would be very helpful to see hex values next to the RGB values for color tokens as designers use hex values in their sketch files. Btw, I greatly appreciated when the DSys team added px values along with rem values on the website on our request!

[richbachman]

Hi @pguptaDS. Thanks for the suggestion. I'll touch base with the team and get back with an answer soon.

[kate-porter]

Hey @pguptaDS! Thanks for this suggestion. Could you share a little bit more about how you are using colors in your Sketch files when designing? Do you find that you are often using the text and layer styles in the Paste design tokens library, or are you more often manually entering hex values?

[corinne-nagel]

Hey @pguptaDS! We'd love to hear more about how you're using the hex values when you have a chance 🙂

[pguptaDS]

Oh I swear I had left an answer on this thread already. I use the paste libraries a lot but for colors, I end up going to the website, finding the color I need and then converting it into a hex value that I can use in my sketch files. Some components allows me to change the colors of that component which is very helpful. It'd be nice to have like a color palette item in the top nav in the library where I can choose from just like the website. Hope that answered your question!

[corinne-nagel]

Ideally, you shouldn’t really need to choose colors/hex values in sketch since hopefully🤞 the text and layer styles should be covering all of that in the symbols. This ensures that if we make updates to the color palette all of your designs will update and benefit from that being connected to our library. Can you give us an example of components that haven't been changeable enough for your needs? We'd love to make it as easy as possible to use the library!

[pguptaDS]

Got it. Well in this specific case, I was playing with badges and was not using a component because there is none yet so I had to choose the colors of the badges/pills myself to explore some designs.

[corinne-nagel]

Absolutely, if you use the colors in the library that should give you all of the color options available within Paste so you can try out different colors outside of the components but still remain in the library so you'll still get updates. Let me know if you don't have that or if something isn't working correctly there!

[SiTaggart]

Just be aware that if you use an alias directly in sketch your engineers will not be able to do the same in code using Paste components. You are only allowed to use Design tokens (the text and layer styles) provided.

[kate-porter]

If you want to ensure you are using tokens that are available in Paste when creating custom compositions like the badge example you gave, make sure you have the console theme.sketch file in the Paste design tokens project attached to your project in Abstract. Then, you can apply the background layer styles to your layer. Like so:

Checkout this Discussion for more info on how to build custom compositions in Sketch using the system: #623