I’m trying to mimic an interface on a product with physical buttons. I’ve laid this out using keyboard buttons with overlays that allow transitions between overlays and component sets, which allows for a lot of animation options between them. This works great.
Problem is, my client wants to convert using a keyboard to utilizing the button images on the mockup to control the interface (i.e. when the user presses the up “button” onscreen, the interface portion reacts to this press). This is pretty straightforward to do by just linking identical images, but this limits the ability for interactions between screens.
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?
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?
The image was super helpful. I am not sure this is a help but here is a file I created that you can duplicate to your drafts. I use variants to I can more easily manage the “Smart animate” between frames. Unfortunately there isn’t an easy way to simplify the interaction connections, you’ll need to still create the spaghetti connections.
Let me know if this wasn’t the kind of help you were looking for…
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.
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.
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.
