Problem
As a front-end programmer I don’t quite grasp the current concept of so called “Local Variables”.
For starters, they’re not local, but global. And the thing with global vars is - they make a big mess, like always. For this reason any programming language considers global vars an anti-pattern.
But currently, the only way to make a Figma component “stateful” is to keep its “state” in the global namespace. I use quotes for a reason: there is no real state at all, because in Figma there is no an entity like “state of a component”.
This all makes flows unmaintainable and prevents us from transferring components between files and projects, because they get transferred without their “state”. So basically you can’t easily reuse components logic.
It also doesn’t provide any level of isolation. For example, if I have more than one instance of the same component, how would I distinguish their variables/states?
Solution proposal
Since Figma’s model is a tree-like, and frames serve as the hierarchy building blocks, we could define variables on the frame-level.
This way, we get variables isolation automatically. We can also redefine any variable at any level, we get honest states and tons of useful stuff, especially now that we have expressions arrived.
I won’t go into more details now, because for now it’s just a speculation. But if Figma folks join the discussion, we could have thought this through more carefully.
