Skip to main content
bart13
New Participant
June 22, 2023

Variables: Color alias with alpha / opacity (rgba ideally)

  • June 22, 2023
  • 113 replies
  • 13889 views

hey there!

variables seems to be super nice but what i am missing is that if i make a colour alias to a specific collection - i can’t set the opacity separately (e.g. colour 50 with 20% opacity)

So basically i want the colouyr to be from another collection and i want to set the alpha seperatly (controlled as rgba - since i dont need it as opacity)

Example how we can fix this in token studio:
image

So what i want is that i can set blue/5 and then the opacity (which i dont want to capture in another colour variable)


Now its only possible if i break the link with gray/75 - and then i loose the reference to that colour

113 replies

Jacek4
New Participant
November 28, 2023

Just started to work with variables and I cant stop wondering what stopped Figma from implementing this from the beginning.

Dan_Hopewell
Active Member
December 18, 2023

+1 for wanting to be able to manipulate alpha transparency independently on aliased color variables.

My immediate use case is for establishing state variants for various semantic application colors (e.g., disabled items are transparent) that still reference our core color primitives.

The goal is to be able to set transparency at the semantic color definition level (rather than manually at the layer level) without having to either unlink each color from its respective primitive or, alternatively, maintaining entirely separate primitive color scales for each potential transparency level of ever single color within our primitives collection.

Keaton_Yang
December 20, 2023

Please add this feature!

Kevin_Rousseau
New Member
December 20, 2023

+1 !!! I dont understand why this feature wasn’t implemented in the last update !

Nouela
New Participant
January 4, 2024

+1. Please make variables usable.

EwaKaminska
New Member
January 8, 2024

+1. Please take variables to it’s true potential!

February 7, 2024

Im replying so the thread doesnt close, but I want this too. Very badly.

Andy33
New Participant
February 14, 2024

Growing a design system at our company and missing this feature badly right now as we do not want to use workarounds or third party plugins for maintaining variables.

Elliott_UX
New Participant
February 16, 2024

+1 to this please

Elliott_UX
New Participant
February 16, 2024

Actually I’ve found that you can create a primitive token using a Hex and opacity, and then simply referencing this from other tokens (as I would other colour primitives) does the job.