Sequential frame changing when button pressing during Prototyping

Ask the community
1

Hi,

I would like to understand is it possible in Figma to make a prototype where series of frames changes cyclically when presses one button?

I mean when I press the button the first time then shows the first frame, the second time - the second frame and so on. And then repeatedly to the first frame.

Of course, I can use the delay between frames sequence, but it’s not what I want to see.

Thank you.

2

Just use Keyboard/Gamepad trigger instead of the delay.

2 Likes
3

I mean not the keyboard button, but the web interface one. Web UI button used in the prototype and I would like that some frames to change in the prototype when I click on this button by mouse.

I need it to emulate the electronic device menu work when the user presses some button on the electronic device.

4

Do you mean these buttons that are a part of the Figma UI? It’s not possible to use them for this.
image

Or buttons in your own design, like this? In this case check out this file:

5

Hi, Thank you.

The button in my design, of course. Here is the example of panel design. Figma I would like to make when pressing “Up” and “Down” arrow at the screen shows sequential frames of LCD screen.

As far as I understand in this case only one way exists - clone the frame with the device panel, change LED screen image inside and make prototyping in such a way. So, I will have number of clones equal number of LED screen and there is no some tricks like scrolling, to minimize number of copies.

6

You can use Scroll To prototype action to make it work without duplicating the screens.

7

as far as I understand I couldn’t positioning in scrolling object to specific position by pressing button on the device? Scrolling will work only by mouse scrolling. I would like to make complete illusion that user work with real equipment, so, pressing UI design button and changing screen as in real device is very important.

8

Thank you. I found good tutorial how to do that https://www.youtube.com/watch?v=EdXme3jDVco&ab_channel=UdayrajSathe-DesignTutorials

1 Like
9

I made the button for scrolling menu using “Scroll to”: Figma It works ok, but I met with another problem.

Now, when I press the “Down” button it scroll from “Room” to “Street” frame. It’s perfect. But I need also, when I press the “Down” button second time it scroll to “Room” frame back. It should be cycling perpetual scrolling between two frames inside the screen.

How to do that without duplicating the frames?

10

I don’t think this is possible without duplicating the frames.

11

I found the solution without duplicating the frame. I make frame for the button and make inside the button scrolling to several other buttons. Each button I connect to next button by OnClick action and use MouseDown event to Scroll To screens on LCD frame. Here is the example Figma

1 Like
12

I wrote the article describing the lifehack http://www.bizkit.ru/2021/02/21/19072/
And here is the video: https://youtu.be/uwKOS5fNXyY

All content in Russian for now.

2 Likes