Mastering Conditional Prototyping: A Step-by-Step Tutorial

hello everyone and welcome for this figma quick T I'm going to show you how to create conditional prototyping using variables don't mind that designs just to showcase the prototyping features I have the option to choose a profile so I can choose if I want this to be detailed or simple profile then I'll be asked to input name and age and have the option to share location confirm location or add a location manually I choose gender as you can see here I put detail only so I want this to show only if detail profile is selected if not I want to be skipped and the summary I want this location and gender to be updated accordingly to the selections add details button here I want it to show only if you choose complete profile so here are the rules I want to apply for this prototype if I choose detail profile I want to show the slider page if I choose simple profile I want to skip the slider page sh location if I toggle it on I want to show the map if I toggle it off I want to show the address input and in the summary location and G I want to change according to my selections so let's get right to it first of all I need to click outside everything to see these options Here Local variables I have I have right set some variables but I will teach you how to create them I just need to click here create variable and select the kind of variable I want to create I want a color value a number a string which means text and Boolean which basically a toggle one and off when I create a Boolean I have the options to toggle one and off I won't do it all over again the same goes for this stram won't be using so I'll delete it so these are The Parables that are already created two Boolean Parables detail profile so I can turn on and off based on the selection at the first page share location also a buo that I'll change according to the toggle and also string variables for the gender and for the location now let's see how I used it I have detail profile set as through by default and this is my flow starting point so that means that at this level I have the tail profile set to on so now what I have to do is go to the Prototype mode and add some interactions I want this button here to change for this page which is just changing the selection click here on the interaction set it to on click it's the trigger the action will be navigate to this page but also I can click here and add a new interaction that will be triggered by the same trigger I'll choose set variable and then I can select the variable that I already created the detailed profile and I can set it to false remember that is default set it to true when I click here I want not only to navigate for this page to show other options selected but I also want this variable to be set as false and the same going back I want this interaction to be unclick navigate to the previous page and set variable to true as you can see here so here's the variable and here's the value that's the first step then I want this to be a simple navigation to the next page at this page I have these two Fields here that are not important for this lesson so just add a simple navigation to a field version but for this one I have the toggle to share location I created here a component for the toggle I click the toggle off and I can click on the interactions what I did here to un click I want first to set the variable share location to true and also change the component itself to the version that is toone and at the same click I will have the variable set to true and also change it states to the toggle on now I have to do the same for the toggle variation that is set to on add a click I'll set the variable to false and change it to the state that is toggled off I'm doing this in the main components here because I don't have any other toggles throughout the FL flow but if I did what I could do is to set it directly in the component within the page so I could select here select click and change the options according to my needs so feel free to do it if you have toggles in other places of your flow as you can see here I have set all the back buttons already to the for the back interaction so it will always work going back to the previous screen now I have here the the field page with the toggle interaction setting the master components and now the navigation I have to get this button here and click the Interac so on click once again I have to create a condition what is this condition if this toggle is set to on I need to show the map to confirm location if the toggle set off I need to show the address input remember that are the rules we set at the beginning when I set click I put here to add a condition as you can see here the same as I have set variable here I have conditional you can change it here also for an interaction that already created when I click if I can see the variables here below share location equal to true now I need to set the result of this condition once I click it it will check if share location set to True yes then I'll have this interaction here that would be navigate to and and I'll select the page that I want that will be this confirm location page here but if it's not I can add this else interaction here which basically means okay if the share location is not set to True which means if it's set to false the action that will be triggered will be this one here so I have navigate to address empty which means if the tar is set to on it will come to this page here to confirm location and if it's set off it will come to this page here add the address manually so let's go to the next step I'll come here remember that I had the string variable location info so that will reflect the result label once I come conf it I wanted to change that locational info to live so that what will appear in the results page it will change automatically and also I wanted to navigate to the gender page so the same as I did before I hit here Ed to set variable I select the variable I want uh in this case the locational info and then I set the value that I want you to have going forward I select navigate to and the page that I want that will be the gender the next one the same goes for the manual location page and for this case I have location info set already to the manual input but let's say I didn't I have the select the same as gender then what I would do is to Simply for this page here I'll come for this next interaction here that's simple navigation but now I also need to add the information according to my selection which means basically add this value here to the location variable along with the navigation interaction I want this to have a set variable I'll select the location info add the same value 1 2 3 St going forward my location info we have the same value that I have here in the input let's go to the gender page so basically here I did the same with what I did with the top I have the segment button here I create the components in the component interaction in this mail box here I set the interaction to onclick set variable I select the gender variable that is a stram and set the value to M so that will reflect on our results according to our selection here and I'll do the same for the female so when I click female uh set the variable gender to female select this gender here the stream and add female here and also change to the state that female select behind the scenes according to my selection here gender will be changing either to female or male I also create a conditional because remember our first condition is to have this page here the step four the sliders only for detail profile so if you have selected detail profile should come to this page if not you should skip it so that's where we are going to put our condition so I'll click here as you can see here I have this interaction on click I already buil it but let's see how I did so on click I added here conditional so if I have detail profile set to true the result of this interaction will be to navigate to the slider page the else option is what happens if this conditions not true which means if detail profile is set to false if I choose simple profile then what I'll simply do is to navigate straight to the summary skipping this slider page for here I have this a simple navigation to the result page and here I have this location and gender but now how do I make the selections I did previously reflect on this page here first I need to select these and then I have this hexagon here apply variable so when I hit here since it's a text it will only show my string variable so select location the same goes for the the gender and select gender here it's not happening now because we're not playing with the Prototype so as you can see since I put the default value to be select for both they have the select here as I'm using the Prototype and playing with the interactions you'll see the changes and last but not least I want to make this available only for those who select detail profile I have this eye button this is not very intuitive uh I don't know why figma doesn't make it easier but it is how it is the visibility icon you can right click to see options of variable and I'll select here detail profile so since detail profile by default is said to true then this will be here but let me just show you what happens if I select local variables and set this detail profile to false as you can see and now vanishes I'll bring it back and now let's test it if all that we did here is actually working so come here to the starting point and I'll play my prototype so let's go for simple profile first since I'm selecting simple profile I shouldn't see the sliders so let's get started as I mentioned I put these only as simple interactions because they don't matter so I'll click any of these since I have the share location toggle set to off if I click next I should see the address input page let's see okay address in inut is here if I go back I set this two on now I should see the confirm location page okay let's hit next now I have to choose the gender so I have male set as default but let's say I choose to change to female when I hit next I went straight to the summary since it was simple profile I have no access to the slider page and as you can see here location is set to live and gender is set to female according to our selections so our options during the process are actually being reflected at this summary now for detail profile I'll head start add this I won't select share location next I have the address location I'll Ed it when I hit next here I should be able to see the gender let me go mail this time when I hit next I should now see this slider page because I'm doing a detail profile so here you have it when I hit next here I should go to the summary and now as you can see instead of live set to one 2 three Street which is the same value that I put in my input and the gender now instead of female is male because that's what I was selecting so that's it for this figma quick tip thank you all for joining I've been away for some time due to the lack of ideas to teach you so if you have any questions or suggestion or anything you like to learn from me please share in the comments down below and don't forget to hit the Thumbs Up Button see you in the next video bye-bye

Channel: Mindesigning

Views: 572

Keywords: design, ux design, technology, prototype, prototiping, conditional prototype, variable, figma

Id: 42TiVJDattw

Length: 9min 13sec (553 seconds)

Published: Fri Mar 01 2024