Skip to main content

I'm designing a segmented control in Figma. I want only one item to be in the "Selected" state at a time — so when I click on an item, it becomes selected and the others automatically return to the default state.

Is there a way to prototype this without manually creating a separate interaction for every possible combination? I’d like to keep it scalable if possible.

I've heard that using Variables and "Set Variable" actions might help, but I'm not sure how to set that up correctly.

It is possible, but in my opinion, it may take a lot of manual work, adding variables, and making the logic work between each option. Going the simple way, only adding the visuals and connecting them, would work more easily.

Below, I am attaching how I did this quick prototype of a segmented control using variables.

 


I've published this prototype to the Community: 

https://www.figma.com/community/file/1513661009502150869