Skip to main content

I have a simple design and I want to change swap out one color for another. I want to be able to do this 10x as I reuse this project in the future.


I thought the best way to this was to create Variables and then switch modes.


When I select all the frames in the design and switch modes to a different color variables nothing changes.


I noticed that the mode tag on the group layer changes but none of the variables in the group change. What’s the point of a variable change that cannot change if the object I want to change the color of is within a group?


I can get the desired change by individually selecting every object and selecting the new mode.


Is there a better way to change all the colors in a project at once without duplicating the file and changing styles (using Styles instead of Variables)?

It’s a bit challenging to offer a precise solution without a deeper dive into the issue, but I’ll do my best to help. Using variables is indeed a good approach if your design needs to support multiple brands with interchangeable colors.


Here’s a strategy you might find useful: Create a Collection specifically for brand-related colors. For example, you could have a collection named “Brands,” with modes set to Brand 1, Brand 2, and Brand 3. In this collection, define your colors with descriptive names, such as --clr-background-primary, and assign the appropriate color values for each brand.


When you create components, like a button, and use these variables for properties such as the background color, you’ll be able to switch between brands in the layers panel. By organizing all your colors in this way, you can easily swap the entire collection for a different brand, which simplifies the process of maintaining consistency across various brand designs.

Reply


Terms & ConditionsCookie settings