Changing Design System colour styles to suit multiple projects?

Ask the community
1

Hello. I have just started working with Figma, and I am creating a Design System to help me build many small, similar-looking websites. They will all share similar layouts and elements, and therefore components, but the colour palette will need to change with every site.

When I start a new design project, and I add my Design System to the libraries, the colour styles will be pulled through from the Design System. This is fine for “Project 1”, as it will use this colour palette. But for “Project 2” and every other subsequent project I will need to change the colours.

I don’t want to change the colours for “Project 2” in the Design System, as I understand it will change the colour of “Project 1” as well?

What I was hoping to to do is create a new project using the Design System, and then just replace the primary and secondary colours to turn it all to a new colour scheme. Is this at all possible?

There seems to be lots of tutorials on building Design Systems, but I can’t find any tutorials on actually putting the system into practice!

Any help is most appreciated. :slight_smile:

Many thanks all

2

Here is my take on the issue

You will find many examples there, also the UI kit is on sale if you like

3

Also you can make something like this - Light & dark mode for themes variables - #5 by Pavel_Kiselev

However it’s only limited to 4 modes on pro plan, you will not be able to accommodate more than four colors this way