Skip to main content
bart13
bart13
New Participant
Jun 22, 2023 11:55 AM UTC

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

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)

image

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)

image

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

    113 replies

    Show previous replies
    Jeremy_Knudsen
    Jeremy_Knudsen
    Active Member
    Sep 3, 2026 12:51 AM UTC

    It has finally arrived…


    From Kerry_Johnson:

    Nice work!  It, however, doesn’t seem to take into account appearance?  I know I can probably just freely type this into the opacity segment today but I didn’t want to change that just yet as the codified components rely on that opacity token currently.


    Root:

     


    Ext. collection:​​



    Notice it’s “blind” to any branding until unlinking.  It also works if I set brand appearance directly onto the component, but removing it again (Cmd + Z) returns it to the broken state.

     

     

    Edit: It fixed itself after flipping through branding color appearances in an ancestor layer to “refresh” the stale value I guess.  Leaving this here anyway in case it’s isolated to this new feature.

      xMOx
      xMOx
      Active Member
      Sep 3, 2026 1:37 PM UTC

      this is great progress, but also need it at the design level too, I hope the Figma team is working on adding it there too

        xMOx
        xMOx
        Active Member
        Sep 4, 2026 1:41 PM UTC

        Just to be clear, having it in the Design level reduces the amount of custom tokens, so I don’t need to create multiple tokens for one colour in different opacities. We already can do this in code I don’t see a reason why we wouldn’t adopt the same technique in our design tools.  

        Terms & ConditionsAccessibility statement