How to edit the value of a variable in a design system?

[floaty-head]

Hi,

Context
I’m helping a client design a product using the PrimeNG library. This dev library comes with a Figma library where I get components, styles, and variables.

My problem
I don’t know how to edit the values of variables configured in the design system so that all the components, variants, and their instances use my updated values. It’s a general question, but I’ll use one specific example below to illustrate.

Example
The library has a component called inputtext uses padding variables set to 10.5 horizontally and 7 vertically. I can see these variables both in the properties panel in Figma and in the Token Studio for Figma plugin. (Note that I don’t know much about this plugin and I try to use it because PrimeNG suggests it for using their system and my client’s dev team is trying to leverage it.)

But I can’t seem to find how to edit these values. For instance, when I click into the vertical padding value in Figma’s properties panel, it shows me the list of variables and their values. But hovering over that particular inputtext/padding/x variable doesn’t show an affordance I could use to edit the value, from 7 to 8 for example.

Same when I pull up the Local variables window in Figma. (Side note here: isn’t there a way to search variables by name there? I find it hard to locate a specific variables just by scrolling through the list, but I’m not seeing a search feature.)

And in Token Studio for Figma, I do find the token I believe corresponds to this property, though it’s displayed in rem and not px. But there too, I can’t find a way to change the values.

Question
Am I using Figma and/or Token Studio wrong? Or am I missing access to some file where these variables live? I've looked through the list of threads but haven't found anything that helped me so far.

I hope the description is clear. Don’t hesitate to ask questions if it isn’t.

Any help is much appreciated. Thanks!

[onursenture]

Hello,

First and foremost, to prevent any confusion, you need to decide with your development team which token management method you'll be using. You have two options: working with Tokens Studio, which we recommend, or using Figma's Variables.

Figma's Variables aren't fully compatible with our system because they still don't support features that we use in our design system. This could lead to gaps between you and the development team. For this reason, I'm assuming you're using Tokens Studio as your primary token management tool.

You need to familiarize yourself with the plugin by prioritizing the "Using Tokens" section at https://docs.tokens.studio/. If you want the changes you make to affect the Figma Variables side, I recommend reading the "Export to Figma" sections in the documentation.

We also feel negatively affected by the lack of a search function for Figma Local Variables. We're awaiting improvements from Figma on this matter.