Skip to main content

Hi there guys I’m pretty new to using variables & I’m busy doing a Google course for UI/UX though Coursera.


I’m currently working on a Hi-Fidelity prototype for a movie ticketing app that I’ve created.


If created a Seat selection component for a chair that when changed from its default state it changes to a different colour with a tick. Simple enough it’s working but here is where it gets complicated…


When the seat is selected & changes to the active state I’d like it to then using a number variable reflect the selection in an amount/cost. I did sort of manage to get this far but the problem is, when I click the seat again to make it inactive it stays in its active state and the amount/cost stays there. Then further more I’d like the selected seats to reflect in a number as well.


So as each seat is selected it should change to it’s “Active State” then add a Dollar amount upon selection in the app screen then also display a 1/2/3/4 in terms of how many seats are selected. Then upon deselection it should minus from what is elected and revert back to its default state.


Is this possible? Is anyone able to please help?


Thank you for taking the time to read this!

What you are trying to achieve is too complicated for a prototype. This will need to be implemented in the code, there is no need to try to recreate this logic in the prototype. A prototype is a prototype, not a fully functioning app.

Okay, thank you for the feedback. I was just trying to challenge myself that’s all but I appreciate it.

I set up an interactive booking calendar example using variables that has similar functionality as your seat selector idea. So feel free to take a look and see if that helps.


Figma

Awesome @Nate_G appreciate it, will definitely check it out! Thank you!

I think you can do this, with changes as needed:

Create a component for Seat selector (which you have already done)

image

Create two Number Variables:

image

Assign these to respective text fields:

image


image


To the unselected variant of Seat selector assign interaction:

image


And to Selected Variant:

image


Put the instance of Seat Selector on frame and duplicate it as needed.


Test it!

image

To create such high-fidelity protos (which is not useful in an actual company), you can use Protopie or Axure

@Vishal_Ramawat Wow, amazing thanks so much! ⭐

@Vishal_Ramawat Everything works great thank you, really appreciate your help!


Is there a way I can get the amounts to reset to 0 if the the user goes back a page?

On the page you have these components:

Add interaction After Delay 1ms

Set Variable varSelections = 0

varPrice= 0

So whenever this page is loaded, you start with 0.

@Vishal_Ramawat 🤯 Thank you, you’re a genius! Really appreciate it.

Glad I could help. Please do mark it as resolved!

Thanks for helping out here, @Vishal_Ramawat! 🙂


We’ve marked your reply as the solution.

Please do let us know if you run into any further issues, @Lance_Le_Goff!

Reply


Terms & ConditionsCookie settings