Skip to main content
Question

Show different next page based on the card selection

  • March 22, 2024
  • 4 replies
  • 340 views

petar.brkovic

Hey guys, I’m new to the advanced prototyping and I’m trying to do the following thing. I have a web page which has 5 cards and the “Next” button (initially disabled). I want to make the following flow:

-User’s select a card (only one card can be selected at time)

  • Button gets enabled
  • User clicks next
  • They are shown one of the 5 pages depending on their choice.

Is this possible to do in Figma?

Thanks!

Haroll
  • Active Member
  • March 22, 2024

Hey @petar.brkovic

Totally doable :

Prerequisites

  • The Button require a boolean variant for enabling/disabling it
  • A local variable for enabling/disabling the button (i.e buttonEnabled)
  • A local variable to save the target page (i.e targetPage)

Cards

Add an “On Click” interaction on the first card, within it:

  1. Toggle its state so it looked selected
  2. Set variable targetedPage to the desired page
  3. Set variable buttonEnabled to true

Then duplicate this card and change the targetedPage value for every duplicate.


Button

There are different ways to navigate to the desire page depending on preference and what you already built:

Classic navigation

Add an “On Click” interaction to the button, within it:

  1. Make a if statement for every different targetPage possible value
  2. In the if statement add a “Navigate to”
if (targetPage == "page A")
  Navigate to Page A
if (targetPage == "page B")
  Navigate to Page B
...

or

Page is a component

If you can make the content of the page a component you may be able to bind targetPage to page component variant, so it will automatically change to the desired content when you click on a card

PrototypeDesign file


petar.brkovic

Thank you so much, that’s some amazing input, will give it a go!


Craig_Dunn

If anyone is up for it, I’d love to see a video on this!

I think I’m trying to accomplish something similar.

I need to create a set of 3+ radio buttons where only one can be selected at a time—I’ve already got that working. However, I want the selected radio button to determine the navigation when clicking a “Next” button.

  • If Radio 1 is selected, clicking “Next” should go to Page A.
  • If Radio 2 is selected, clicking “Next” should go to Page B.
  • If Radio 3 is selected, clicking “Next” should go to Page C.

Is this possible? And is this the same request as the one mentioned above?

I know I could fake it by linking each radio button to a separate frame where that button appears selected, and then linking “Next” from there—but that would create way more frames than I’d like.

In my case, I’ll have nine radio buttons, and while I do need nine separate destination pages (A-I), I don’t want to create an additional nine pages just to represent each radio selection before navigating to the final destination.

Ideally, there would be one page with all nine radio buttons, and depending on which radio button is selected, clicking “Next” would take the user directly to one of the nine destination pages (A-I). This way, there would be a total of 10 pages instead of 18. Hope that makes sense!


Craig_Dunn

*** Update ***


I surprised myself and actually figured it out. Maybe I’ll create a video if I can find the time and if it’s helpful for others. 


Reply


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