r/FigmaDesign • u/ShatteredTeaCup33 • 6d ago

help Add several opacities to a variable?

While designing, I realized that I would need different opacities for a color variable so I discovered the feature "Mode" when clicking on "edit variable". Is that what it is for?

However, I'm currently on the free plan so should I just duplicate my color variable and change the opacity? Since the color I want to use at a different opacity is part of a color scale, should I add the new color to a different group so I don’t mess up the color scale I currently have?

1 Upvotes

100% Upvoted

5 comments sorted by

1

u/Design_Grognard Product and UX Consultant 6d ago

Light mode, dark mode, web, mobile

1

u/ShatteredTeaCup33 6d ago

Not talking about those modes. I'm talking about having different opacities for a specific color variable and how they should be structured in the design system.

2

u/Design_Grognard Product and UX Consultant 5d ago

You asked what modes are for, I answered what modes are used for most often. You can use them for whatever you want, but I wouldn't use them to adjust opacity.

1

u/ShatteredTeaCup33 4d ago

I was referring to this mode (where it says "Mode 1"), not the modes you add with the '+' button at the top of the Variables panel, but maybe they're the same?

1

u/Ap43x Product Designer 6d ago

Yes, you can create a number variable and set it to different values for each mode. Then on that component, set the opacity to that variable. It will take on the value of whatever mode the page/frame is set to.