“Driven” variables for advanced prototyping
Currently, when you link a variable to a UI property or component property (like the width of a frame), updating the variable in the variable panel automatically changes the property. In this setup, the variable controls the property.
But what if the user could opt to reverse this relationship? Instead of the variable controlling the property, the property controls the variable.
To enable this, we could introduce the concept of “driven” variables. A “driven” variable would update its value whenever the linked property changes. For example, if the width of a frame is linked to a driven variable, resizing the frame both editing AND prototyping mode would update the variable with the new width.
Use Cases:
-
Resizable objects in Prototyping Mode: With driven variables, properties like the width of a frame could become user-adjustable in prototypes, and the new size would automatically update the variable.
-
Custom Breakpoints in Prototyping mode: Driven variables could enable viewport size detection and therefore dynamic UI layouts, such as switching components at specific breakpoints.
-
Editable text Fields : User input in text fields could update the linked variable for further use in the prototype. This would mean editable text fields that would store their contents in the variable (e.g for prototyping messenging apps, search login)
Execution
In the variable panel, driven variables could be marked visually—perhaps with a pink color and a small gear icon to indicate their special status. plus the option to revert to a default value. This feature could be added to the variable settings menu (currently used for scoping) without requiring major changes.
Benefit
This approach would allow for new functionality without introducing new UI concepts, keeping things intuitive