Dynamically change modes through prototyping interactions

Currently it’s not possible to dynamically set or assign mode variables to a frame or a document. This would be incredibly helpful when it comes to user settings, like change a theme or language, for example.

When prototyping, dynamically setting a mode variable like systemTheme or systemLanguage could then be done through user interactions like clicking a button, to simulate many real-life use cases.

36 Likes

yeah really hope this gets added also. Can change variables, but changing modes seem like missing link. I have to do it variable by variable, or create component variations for each frame of modes.

1 Like

I want to use a similar approach to create mouse over effects on rows in a table.

2 Likes

+100 to this. For an interaction that only loads variable data of different modes into the same component, it would seriously cut down on the number of frames.

5 Likes

I was just looking for such a possibility. Yes, a prototype with, say, 30 screens, to be switchable from light mode to dark mode in flight would necessitate only those 30 screens. Right now it needs a duplicate of each one of those, so 60. Furthermore, all edits have to be applied twice to those screens in both modes.
Light mode, dark mode and a second language version? Make that 120 screens with each edit performed 4 times.
So, yeah, a long way to cutting number of screens/frames and the drudgery of all those repetitive edits. :slightly_smiling_face:

Being able to change the modes of a component upon interaction just makes so much sense and would make my prototypes so much cleaner and easier to configure.

Oh well, I guess I get to choose between having 5x the component states, 5x the frames, or manually configuring 4 variables on 20+ different interactions instead. (psst. Hey Figma, letting us copy actions between interactions might help with that last one!)

Still, I love the new prototyping functionality. Just can’t wait for them to add more / fix more quality-of-life issues!

+1! This can be such a great way to combine multiple variables into a “set” and change all with one “Set Variable” action

2 Likes

This would be awesome!

+1 Definitely be needing this, making it much more efficient. Now you need to add like a million change variable actions which could simply be done with one mode switch.

I have configured read/write modes for my form components. In read-only mode, the field and some controller icons/buttons are hidden.

Currently I have an “Edit” button that links to a different frame where are the same components are, but the frame is in the “Edit” mode. Would be nice to achieve that with an action in the prototype.

This would be incredibly helpful for reducing the number of components I need to use for button state changes (hover, click, etc.)

+1 This one is definitely needed.

However, there should be a system to manage which collection can be edited through a prototype. Not all collections need to be managed inside a prototype. Not sure if this condition should be saved as a collection attribute or a prototype attribute. but it is needed anyway.

+1 to the idea

+1 to the idea as well

Was just looking for a way to do that until I came across this, so +1 from my side as well.

Big up for this request :wink:

This would be HUGE. Please add this feature!

This would help a loooot

+1 to this idea

+100 Huge feature ! :pray: