Show different next page based on the card selection

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!

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

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

1 Like