Skip to main content
bart13
bart13
New Participant
June 22, 2023

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

  • June 22, 2023
  • 113 replies
  • 13892 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)

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
    simgust
    simgust
    New Participant
    November 8, 2024

    This needs to happen ASAP! 🙏

    Oren_Bahari
    Oren_Bahari
    New Member
    November 10, 2024

    Genuinely why is this not a thing. It would be so easy to do

    Vicky10
    Vicky10
    New Member
    November 19, 2024

    Really need this as well! I’m new to building design systems so I thought I was making a mistake setting up the tokens. Glad to know I’m not the only one with this trouble.

    UsabilityJeff
    UsabilityJeff
    New Participant
    November 26, 2024

    Thanks for laying out the case so clearly. I totally need this too!

    Kate_Sosedova
    Kate_Sosedova
    November 28, 2024

    +1 to this feature, very much needed

    Craig_Garner
    Craig_Garner
    New Participant
    December 5, 2024

    +1 this is a really glaring limitation to variables. I don’t want to make new variables just for an alpha adjustment.

      Jeremy_Knudsen
      Jeremy_Knudsen
      Active Member
      December 6, 2024

      At Microsoft, we REALLY need Figma to separate opacity and color so that we can use separate variables for each! In CSS we can do var(–color-200) / var(–opacity-20) but not in Figma. 😦

        bart13
        bart13Author
        New Participant
        December 6, 2024

        for everyone to who this is very important: our workarround is using token studio at the moment and sync it with variables - this works perfectly because in token studio - tokens are managed but what tokens studio does is mapping the variable to a rgba value in Figma - its offcourse not what you want but its a workarround which works for now - best to still have this in Figma indeed

          Amalya_Henderson
          Amalya_Henderson
          New Participant
          January 14, 2025

          +1. We can’t use Tokens Studio at our company any more, so I’d need it in Figma. I just need to be able to reference a separate variable for color and for opacity in shadow effects. 

            SomethingFishy
            SomethingFishy
            Active Member
            January 16, 2025

            +1 this is a really glaring limitation to variables. I don’t want to make new variables just for an alpha adjustment.

            For real. What time am I saving by using variables then?

            Figma is lipstick on a broken box layout where component interactions dissolve on contact with other pages.
              Show more replies
              Terms & ConditionsAccessibility statement