Reduce Prototypes by 50% (Simple trick) | Figma Tutorial

believe me you will be so thankful to have watched this video end to end because it's going to save you so much time when it comes to prototyping it's a very unknown feature but it's so powerful take a look at my screen over here now imagine you were designing a cryptocurrency app right you're allowing users to buy and sell cryptocurrencies so on the left hand side you can see that we have three Market screens so imagine a user can tap into the market screen and you can see that they get access to all these different cryptocurrencies that they can buy and sell on the right hand side we have a search screen and then on the right hand side of that we have the actual individual coin page so if you tap into ethereum you can look at the graph and then you can buy and sell from here you can then on the right hand side you can see that we have a dedicated buying and selling screen right so from here you can buy the actual coin so let's imagine your product manager says to you oh and by the way if you do want to advance in figma really get job ready learn all the Advanced Techniques processes and also get access to all the templates you can join over 4 900 students of mine in conquering figma and become job ready and become a figma master so check out the link in the description below all the details are there and I hope to see you on the other side very soon back to the video okay in these screens we actually want two entry points to the buy screen because we want to encourage that behavior because that's how the business actually makes money the more people that buy on our platform the more transaction fees which means the more money we can make from the designs you can see that there is only one buy button but last minute the product manager tells you that we want to be able to when the user swipes left on the ethereum row over here we want a quick action that allows them to take them directly to the buy screen as well so you have two entry points okay so traditionally what you would do is you'll go ahead and grab your ethereum component over here link them up in your prototype you might change it to on drag and then you might move in this screen over here and then you would go from this buy button click and drag and then you'll also do on click move in so if you were ever to let me just go ahead and preview this prototype for you if you were able to just quickly slide that in you will slide in the buy screen or if you were on this page and you were to hit on buy it would slide in that screen as well pretty simple right but here's the problem what happens if you want to go back where does this component take you so traditionally you'll be fairly stuck because you can only create one link to one screen so if I want to use the back button to go back to here in the user flow in the Prototype what if the user came in from the sliding so if we go back over here and hit back it takes us back to this screen but what if we want it to be dynamic so it allows or knows which screen it actually came from so this is the bomb okay so it's going to be very very simple I'm just going to go ahead and just remove these are prototyping links here's the trick figma actually launched in new feature called sections a while ago it's actually not a new feature anymore but a lot of people thought that sections were simply used to create sections on your canvas just to keep things more organized so for example if I had the market screens over here or the market flows I can go ahead wrap that inside and call it markets for example and then I could use the sections over here and call this the buy and sell flow right so obviously there'll be more and more screens however a lot of people didn't realize that this was actually a way to help you create more seamless and more advanced prototypes so what this is actually doing is it's telling figma that all these screens in this section are grouped together all the screens over here are grouped together in a different flow so this time round what we can do is we can do the same thing we can go ahead and do a pro top link over to this screen and we can do it on drag right move in cool on the buy button we can do the same thing as well right just like that and we can go over to on click you can move this in but from the backs up icon we can actually go ahead now click and drag and not connect it to any specific screens instead we connect it to this entire section so what this will do is figma can then it will know not to link the backlight into an individual screen it won't be specific it will dynamically go back to whichever screen it came from within the market section okay so if I go ahead and Now preview this prototype let me just quickly link the search bar up as well just so we have a end-to-end flow so now if I go ahead and prototype this so starting flow let's go ahead and I can go drag takes me to the buy screen go back it will take me back to the actual Market screen I can also go into the search I can go into the ethereum coin page I can hit buy and if I hook go back it knows to go back back to that same screen it came from so you can utilize sections to keep your page or keep your figma canvas organized but it's also a very powerful tool to create more Dynamic prototypes within figma now with that said if you did enjoy this video make sure to gently smash that like button subscribe for the Die Hard fans and if you want to learn more make sure to check out this video and I'll see you in another video very soon

Channel: Mizko

Views: 79,998

Keywords: figma tutorials, figma prototyping

Id: 5GzLA_JkZ14

Length: 5min 41sec (341 seconds)

Published: Mon Mar 13 2023