Skip to main content
Question

Sequential frame changing when button pressing during Prototyping


Andrey_Fedorov

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.

11 replies

Gleb
  • Power Member
  • 4706 replies
  • February 8, 2021

Just use Keyboard/Gamepad trigger instead of the delay.


Andrey_Fedorov

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.


Gleb
  • Power Member
  • 4706 replies
  • February 8, 2021

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:


Andrey_Fedorov

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.


Gleb
  • Power Member
  • 4706 replies
  • February 9, 2021

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


Andrey_Fedorov

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.


Andrey_Fedorov

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


Andrey_Fedorov

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?


Gleb
  • Power Member
  • 4706 replies
  • February 18, 2021

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


Andrey_Fedorov

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


Andrey_Fedorov

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.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings