I’ve been using design tokens for a long time and exploring what the addition of Figma Variables have unlocked since they were launched in June of last year. You can read about my thoughts after using the feature for a month here. Since then there has been a few minor updates to the feature but nothing ground breaking.

One thing that has always been a pretty big hurdle in my workflows is knowing what nodes are using what Figma Variables. You can’t get an at-a-glance understanding of hierarchy without digging into the inspector panel of each node and checking every setting that a node could be used.

This is a huge waste of time. So, I made a Figma Plugin to help solve this. It’s pretty simple feature-wise but it should really help to get a quick view into what variables are bound to what nodes you currently have selected. Then, it lets you copy and paste them in a CSS format.

Here’s a little video of it in action:

I just submitted it for review, and when Figma’s community team approve it, you’ll be able to get the plugin here.

Edit: It was approved and it live, go get it

I’ve also open sourced it here - if you run into a problem or have a feature idea, add an issue.

If you do give it a spin, I’d love to hear how it worked out for you – drop me a note here