LS #03 - Whatsapp + design tokens

A quick draft to switch modes in Figma

Hi Friends 👋

Today I want to share a quick project I made with some design tokens and the power of Figma to change easily from one mode to another. Send me a DM if you are interested in the project, I can share with you 😳.

Steps I followed

1- Create the Core colours:

It could be a little repetitive work so check some plugin that could autogenerate this tokens. Take a look to the image, in this level you need to use the name like blue and the value as an scale. (Highly recommend to have 10 tokens as scale to make it simple then when you work in dark mode)

2- Create the Semantic colours:

There are a lot of ways to create semantic colours naming. What worked for me was to have defined the color as Foreground - Border - Background. Every component has this properties so should be enough.

3- The magic of the modes:

you start with this one column in the top right. So adding others you start to build the other themes. Put the name you want and start to switch btw tokens.

Last but not least:
Remember to switch the layer mode to apply the tokens in the frame where you are working

I hope this tuto helps to you to build fast and systematic colours.

Stay tuned for more updates!

Cheers,
Pablo