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
    simgust
    simgust
    New Participant
    Nov 8, 2024 9:54 AM UTC

    This needs to happen ASAP! 🙏

    Oren_Bahari
    Oren_Bahari
    New Member
    Nov 10, 2024 11:53 PM UTC

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

    Vicky10
    Vicky10
    New Member
    Nov 19, 2024 5:31 PM UTC

    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
    Nov 26, 2024 7:20 PM UTC

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

    Kate_Sosedova
    Kate_Sosedova
    Nov 28, 2024 11:36 PM UTC

    +1 to this feature, very much needed

    Craig_Garner
    Craig_Garner
    New Participant
    Dec 5, 2024 2:57 AM UTC

    +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
      Dec 6, 2024 12:20 AM UTC

      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
        Dec 6, 2024 11:08 AM UTC

        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
          Jan 14, 2025 4:45 PM UTC

          +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
            Jan 16, 2025 6:06 PM UTC

            +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