Converting touch screen UI prototype to physical button with "soft key" type interface

Question

I have created a set of wireframes to simulate the user interface of a scientific instrument we are developing. Initially we were designing for a touch screen but now we need to convert to physical buttons with adjacent “soft” keys, and I am trying to figure out how to convert the prototype to this input paradigm without having to re-create the entire Figma prototype.

Below is a sample frame suitable for touch:

You can see the “pressed” state on the “Start” button which is invoked by clicking on the button in the prototype.

I would like to convert to the style below with physical buttons and soft keys:

However, in the prototype I would like to click on the physical buttons rather than the on-screen buttons for a more authentic user experience and have the on-screen button change state as the adjacent physical button is clicked. What is the easiest way to do this? I was hoping I could create a frame with no fill or outline and place it over the physical button and act as a “remote” for the on-screen button – when the physical button frame is clicked the on-screen button changes state and activates any interactions/variables.

Physical button clicked changes on screen button state and invokes any interactions

I know I can re-create all the buttons with an invisible frame that extends down to cover the physical button area, but the wireframes are quite advanced in terms of UI flow:

Replacing all the buttons would be a lot of work.

Any advice/suggestions on the easiest way to achieve this?

Freddy · Answer

Hey, I initially thought this would be fairly easy to implement...but as usual, Figma prototyping can be a bit fiddly. That said, I came up with a solution that should be reasonably straightforward to implement. This is what I came up with:

You will definitely need to use variables to solve this, as at least to my knowledge it’s currently the only way to change a component state by clicking on another component.

First, create a variable collection with four boolean variables and four modes (plus an additional mode, if you need a state where no digital button is selected):

You digital button should be a component with two variants isPressed=true and isPressed=false :

Use this component in your screens and bind the instance property to the corresponding boolean from your variable collection. Repeat this setup for buttons 1 through 4, mapping each digital button to its respective variable.

As a final step, add a “Change variable mode” interaction to your physical buttons using an On Click trigger. Again, repeat this for all four physical buttons, each switching to the appropriate mode.

Unfortunately, there’s no way around applying this setup across all relevant screens.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded