Switching modes in prototypes to reduce screens

Hi

I am currently learning about the new Figma features, predominantly using variables and how I can use these in my prototypes.

My aim is to reduce the amount of repeatable screens I have in my prototypes and how I can use variables and conditional logic to show the content that is needed after certain actions have been taken.

I have had a go at setting this up in what I thought was the best approach and method which is stated below. However I am not sure I am going about it in slightly the wrong way or if what I am looking to do is slightly too advanced for what is capable with these new features at the moment.

Any help would be appreciated.

Context

I have a 4 page design flow for customers to be able to purchase a single product which is :
Home Page → Products Page (x2) → Order → Success Screen

The products page screen contains a panel (which is a component) which shows the product information (product name, description, price).

I have created a variable collection called “Product Information” to store the values of the product information within the panel, In this collection there are 2 modes which look like this:

Mode 1 (Product Info)
Product name = Card
Product description = A personal card to gain points and rewards with.
Price = £9.99
Panel background = #FFFFFF

Mode 2 (Product Ordered)
Product name = Card
Product description = You have already ordered a card
Price = £9.99
Panel background = #CECECE

I have created a 2nd collection named “Product Status” which contains a single Boolean variable named “Card Ordered” which is defaulted to “false”.

My Current Example

1. User starts their journey on the home page and they click a button to navigate to the “Product page”.
2. On click of the button, I have a conditional statement which checks to see if the “Card Ordered” Variable is “false”
3. If the variable is false then the user is taken to the “Product page” which shows the “Mode 1” component panel for displaying the product information.
4. The user then clicks on the panel and is taken to the “Order page”, once they have completed the order steps they are then taken to the final “Success page” page.
5. Once a user has reached this page the variable “Card Ordered” is set to “true”.
6. The user is then redirected to the home screen and when the user clicks on the “Products page” the same conditional statement is then run again and then navigates them to a duplicated “Product page” which shows the “Mode 2” panel which shows that the product has already been ordered information.

My Problem
The main problem I have with the above example is that I have had to duplicate the products page twice in order to show the correct panel on the “Products page”.

Ideally what I want to achieve is to remove the duplication of the product page and have just the one page.

I would then like to move the conditional statement from the home page to this page and for the condition to say:

On Delay 1ms
If “Card ordered” == False
Set “Product Information” to “Mode 1”
Else
Set “Product Information” to “Mode 2”

However I believe I am unable to switch a collection from one mode to another and there seems to be no action in Figma to do this.

I only seem to be able to use SET to change the variables in a collection individually but this isn’t what I am trying to achieve I am simple trying to switch from 1 mode to a different mode to show a different panel to the user.

Solution
I know this example is a rather simple one but the objective of what I am trying to achieve is on a much larger scale for my prototypes and it is basically trying to remove a lot of duplicated pages and simply just show or hide content based upon a action (variable) that is set meaning that we can use 1 screen rather than X amount of the same screens.

I realise that these features are new so maybe I am going about this in a incorrect way and there is a better way of my achieving this. I also know that traditionally the swapping of content would of been handled by instances so I am not sure if this is still the best approach given what Figma is currently capable of ?

Hope this makes sense and I am happy to send imagery or links to help any understanding .

Thank you