Mimicking Physical Button Interface with Interactions

If I’m understanding your use case correctly, you want to use the button images on the right to navigate between different views (the “screen” of which is in the middle), and those views can scroll vertically?

For this use case, instead of overlays I might have gone with a more traditional navigation set up where the buttons are fixed elements in a scrolling view, and the buttons would “scroll to” different parts of the screen. However, I am not sure that is what you’d like to happen.

Any chance you can share a specific example use case? Or share a video of how your demo works to date?

Thanks so much for the response.

Yes, I am looking to have that “screen” in the middle to show different screens, which the user navigates through using the arrows, OK and back (<) buttons. The user will toggle up and down to select different menu items. Hitting “OK” will then take them to another set of screens under that category, which they then can navigate. And so on. The back arrow “<” navigates them backwards to previous screens/menus.

Here’s a detailed view of how I am currently accomplishing it, but just dissolving between these full screens and re-mapping the buttons on each new screen:

I tried to upload a video, but it’s telling me I cannot because I am a new user.

I would love to be able to navigate to these different screens, but have animations on the center “screen” between transitions and then somehow remap the buttons in that instance. Does this make sense?

Thanks for all the help.

This is perfect! Thank you so much. I’m using variants in the touchscreen version of this prototype, but didn’t figure out I could link the buttons (duh!). Super helpful. Thank you sooo much!

Another similar question to the above. I have screens laid out that show an animating progress ring. Is there a way to embed this animation within the background image? For instance, I’d use that background image of the buttons and screen, but have the screen (fake screen in the middle of the image) run through the animation? For the life of me, I can’t figure out how to do it.

Thanks for the help!

A few techniques you can consider:

1. Making that progress bar an interactive component that triggers on delay, so you could use an instance. Each one of those progress bar screens (131-133) would be a variant that you’d wire up with a delay.

2. Make a GIF of that animation and use it to activate when the screen appears.

Personally, the GIF would be easier given the complexity of the radial gradient, but either could work.

Here’s a sample file that can demo the animation. I should note that I take zero credit for this file. This was shared in a community file that I copied but can no longer find the original creator (I suspect it was Gleb) but this will give you an idea how you might be able to simulate the animation.

Thanks man! You are absolutely a life saver. Not sure why I didn’t think to swap out the screens (I had done on a previous prototype), but this works perfectly.

Makes sense on the GIF and may need to move in that direction to get an even more dynamic ring. I didn’t know Figma could handle those.

Thanks again!!