Advanced Figma Protohacking
Episode 1: Radio Button Groups
Recently in the Figma Forum, a poster asked how to prototype a radio button group in Figma so one selection clears out the others.
The recommended best practice: Create a series of variants, each one showing a different selected item in the button group. Then, wire up the unselected rows so that each item switches to the correct variant.
The original poster expressed the main drawback to this approach. It becomes complex and difficult to manage as the radio button group grows.
Protohack Time!
I define protohacking as a workaround in Figma that enables specific interactivity in a prototype, as an alternative to the generally accepted best practice.
To simulate a radio button group, you can fake dynamic behavior by using the Scroll To offset. However, this approach has a big drawback: Scrollable frames can, well, scroll.
This protohack (the first of a few I hope to share at some point in the future) suppresses* scrolling to set up a much simpler structure for an interactive radio button group.
