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 hope the description is clear. Don’t hesitate to ask questions if it isn’t.
Any help is much appreciated. Thanks!