👉Become a Figma Expert & Master and End-to-end UI Design Process in 10 hours with me 👉 www.thedesignership.com/courses/the-ultimate-figma-masterclass (5,200+ students)
Appreciate all the comments everyone! For those suggesting the 'Back' button solves all problems... Sorry, I should have used a better example. I am aware of the Back link, but in some situations you don't actually 'go back' to the immediate previous screen. Some example include, when payments are processed, successful transactions etc. Here's an example: 1. Imagine the user taps Buy ETH in this example. 2. We then transition to a 'loading' screen to show that progress is being made. 3. After a 300ms timed delay, we transition from the loading screen to a destination screen. In this situation hitting back will keep taking you to the loading screen, but really in an app experience we actually want to go back to where you tapped to 'Buy ETH'. You can extrapolate this process into all different use cases as well. Let you creativity run wild :)
Ah yeah, this makes sense thanks man 👍👍 apologies if my comment came off as internet trolly. You’re killing it and providing so much value to the UX / UI industry
I'm not quite sure I completely understand! I might like to see a Short demonstrating this. Definitely going to be looking up more tutorials on Sections though!
Thanks Luis!! Great to see you here. Sorry, I should have used a better example, but I explained where this method is appropriate in the pin comment :)
Hello Bladek117, What of a situation where I have moved to another page ahead of the buy screen and I had to come back because I missed an info. If the prototype was on "Back" and I click on it, won't it take me to the screen I am already coming from?????
Hello Mizko, Today I am completed 33 videos from the figma tutorial. I am very thankful to you because it is very helpful for me. I am really very appreciate you for helping all the people, who really want to learn figma for their bright future from your youtube channel. You doing very good job. Thank yo so much.
Dude your tutorial on this literally reduced so many nodes of my prototypes, and I feel my prototype wire is clearer and kinda less confused than before. Feel so fantastic when discovered your video, you have a new subscriber!
Another way to apply sections to your screens: You can also select all the screens and just press the section button, that way your screens will be framed more neatly and you won't have to drag.
But you could also hook it up to the floating back icon, which allows it to remember which page it was accessed from and return to it. In this scenario, that would be more efficient, no? Correct me if I'm wrong 🤔
Spent hours trying to find a reason why the back button didn't work that way, especially with multiple overlays. This showed on my youtube recommended while i was headed to sleep! Thank you so much, gonna have to undo a bit of work from today, but it'll make my life so much easier in the long run.
Man I have no words .. to tell you that how good you're in figma😁😁💗 pls keep going and shoot this type of knowledge for us. With this I also update day by day again nd again..😎🌸
I know you already have videos about your design process, but I hope you can make a video on tips to start a project in a simple and a clean way so I don't feel overwhelmed on where to start. Another question: do you make components first then start your high quality mockups or do you extract your components from the mockups then replace everything? My design process is a bit all over the place now and I hope you can give some advice on that. Last question, when a client needs a new design but they don't have any structure or idea on how the screen will look like, do you give them multiple options or do you send them a temple for a structure that they can fill in? I'm sorry for the rain of questions, I'm learning on my own and living in Vietnam so I don't know anyone else whom I can ask who also speaks any language I know. :) Feel free to reply or not! I still enjoy your videos!
Just a recommendation - Setup your master components in one file and publish it as a team library in figma. Then extract those base components when working on different designs. This would save a lot of time and would also establish a process.
Fastest click ever!! :))) But I still don't know why don't I just link it to "Back" .. In fact, I make my back button a component and it's always linked to "Back" so whenever I paste it in a frame from the assets, it already has this interaction.
@@xavierc7497 First, make the "X" icon a component (it will be automatically added to assets), then while holding this component, go to prototype, and you will see a little + button on the right and says add interaction. You can set the interaction to when click, go back. That's all. Now every time you need a back button on your screen, just drag it from the assets. It already has the interaction and you don't. need to add it again.
This is a good technique but its benefits would've been more obvious in a cart example or a login example, because in this instance, I believe a button with a back function would do just fine. But when you go from "add to cart > cart > payment > summary > error page" or from "login page > verification > error page", the back function in the error page would bring you back to the summary or verification page, but a link to a section containing the cart/login page would make a better user flow.
Literally just in time to my news app. This goes perfect for when the user choose a topic tag, but then goes to Profile screen, if then user goes back, where does figma should go? MA GUY U SAVED ME LIKE 2 DAYS OF WORK I NEEDED FOR OTHER SUBJECT. THANK YOU
Nice figma tip! Thank you. Your example is maybe not that mind blowing, because it could be done with "back" option in the same time, but in bigger amount of screens (nested in section), it would be a good timesaver.
Yes, but this is a very good other way to do it, you cannot have that transitions for back navigation and also the back navigation has some flaws that sometimes lead to a looping display of pages.
What if the 2 entry points to the buy screen are not in the semantically same section? For example, there are multiple entry points in my app that link to a multi-step document upload flow, and I want to go back to the appropriate entry screen after. Back won't work since the upload flow is multi step.
👉Become a Figma Expert & Master and End-to-end UI Design Process in 10 hours with me 👉
www.thedesignership.com/courses/the-ultimate-figma-masterclass (5,200+ students)
hey, exist version spanish the masterclass?
Appreciate all the comments everyone!
For those suggesting the 'Back' button solves all problems... Sorry, I should have used a better example. I am aware of the Back link, but in some situations you don't actually 'go back' to the immediate previous screen.
Some example include, when payments are processed, successful transactions etc.
Here's an example:
1. Imagine the user taps Buy ETH in this example.
2. We then transition to a 'loading' screen to show that progress is being made.
3. After a 300ms timed delay, we transition from the loading screen to a destination screen.
In this situation hitting back will keep taking you to the loading screen, but really in an app experience we actually want to go back to where you tapped to 'Buy ETH'. You can extrapolate this process into all different use cases as well.
Let you creativity run wild :)
Ah yeah, this makes sense thanks man 👍👍 apologies if my comment came off as internet trolly. You’re killing it and providing so much value to the UX / UI industry
This makes total sense!
I'm not quite sure I completely understand! I might like to see a Short demonstrating this. Definitely going to be looking up more tutorials on Sections though!
Thank you Mizko ❤
Yeah makes sense! I will try using it in my next project. Thanks!
Hey Mizko, I think you can do the same just by selecting “Back” option on the prototype options while you create the connection
Yeah exactly or connecting to the blue back button at the top right of the frame
Thanks Luis!! Great to see you here. Sorry, I should have used a better example, but I explained where this method is appropriate in the pin comment :)
Moreover, I think the slide back would be in the right direction, in this example, left to right
Plis make the video for us
Hello Bladek117, What of a situation where I have moved to another page ahead of the buy screen and I had to come back because I missed an info. If the prototype was on "Back" and I click on it, won't it take me to the screen I am already coming from?????
Hello Mizko, Today I am completed 33 videos from the figma tutorial. I am very thankful to you because it is very helpful for me. I am really very appreciate you for helping all the people, who really want to learn figma for their bright future from your youtube channel. You doing very good job. Thank yo so much.
Super helpful, never knew the sections worked like that as well. Thanks a million!
Dude your tutorial on this literally reduced so many nodes of my prototypes, and I feel my prototype wire is clearer and kinda less confused than before. Feel so fantastic when discovered your video, you have a new subscriber!
Didn't know sectioning did more than just grouping the screens. What an awesome tip! Thanks!
Surprise!
dude that's fantastic. thanks for that clear explanation. love your channel, well done mate
I don't know why I've never asked myself what is the purpose of the section. Thank you for sharing this! I leveled up by simply watching this.
Another way to apply sections to your screens: You can also select all the
screens and just press the section button, that way your screens will be framed more neatly and you won't have to drag.
WHOA! This is awesome! Thanks Mizko!!! Figma is awesome and you always help us discover it.
🙏
But you could also hook it up to the floating back icon, which allows it to remember which page it was accessed from and return to it. In this scenario, that would be more efficient, no? Correct me if I'm wrong 🤔
Thanks AJ!! Sorry, I should have used a better example, but I explained where this method is appropriate in the pin comment :)
I bet this is the game changer and should know any designers to use Figma. Thanks for sharing them.
That sections tip was huge man, thanks for the vid
That’s so gnarly Mizko
Spent hours trying to find a reason why the back button didn't work that way, especially with multiple overlays. This showed on my youtube recommended while i was headed to sleep! Thank you so much, gonna have to undo a bit of work from today, but it'll make my life so much easier in the long run.
thanks for this! i saw this on twitter, but couldn't find it again. super useful.
I stumbled across this feature accidentally when using Sections for a project!
Why I have not seen this video one year before !!! Thank you Mizko !
Thnks mizko, you have a new subscriber now. Apreciate❤
OMG SERIOUSLY 🤩
I had a similar problem in my project and I'm very glad to find this tool! Thank you very much!
This is amazing, I don't have to have multiple screens to implement this any more. Thank you 🙏
Whoa, this is super helpful. Thank you so much Miz
Thanks Godwin!
Figma is the smartest design app on the market now.
Thank you very much for the simple yet time saving trick! Definitely going to use it.
Such a solid tip. Thx for sharing this!
🙏
top-notch content as always, thanks so much Mizko!🎸
Super duper helpful. Just what I was looking for.
I didnt know there was such a good way to deal with even though I used Figma for a long time, I hope you make more related video and share with us~!
Plenty to more :)
wow this is mind blowing 🥳 absolutely loving it
Been using sections the wrong way. Thank you for this Mizko
Great knowledge. Thank you Mizko
Man I have no words .. to tell you that how good you're in figma😁😁💗 pls keep going and shoot this type of knowledge for us. With this I also update day by day again nd again..😎🌸
Thank you :)
👏👏👏 great job Mizko
Wow! So cool, I never knew about this. Thank you Mizko for sharing 👌🏽
Absolutely Tricky
You deserve more
Can’t you also just use “open overlay” and “close overlay” to do the same thing?
This is really amazing! Finally I got which I wanted!
Absolutely loved it. Didn't knew it.
How am I only discovering you today. You are a gem.
You save my time!! thanks Dude!! its really helpfulll
This video could've been 90 seconds tops. But awesome tip, thanks for showing this!
That's so cool! Figma is soooo smart! Thanks a lot Mizko the Ninja!
Thanks for this info. Just finished working on a project where I had to repeat some flow
This is actually excellent.
I know you already have videos about your design process, but I hope you can make a video on tips to start a project in a simple and a clean way so I don't feel overwhelmed on where to start. Another question: do you make components first then start your high quality mockups or do you extract your components from the mockups then replace everything? My design process is a bit all over the place now and I hope you can give some advice on that.
Last question, when a client needs a new design but they don't have any structure or idea on how the screen will look like, do you give them multiple options or do you send them a temple for a structure that they can fill in?
I'm sorry for the rain of questions, I'm learning on my own and living in Vietnam so I don't know anyone else whom I can ask who also speaks any language I know. :) Feel free to reply or not! I still enjoy your videos!
Just a recommendation - Setup your master components in one file and publish it as a team library in figma. Then extract those base components when working on different designs. This would save a lot of time and would also establish a process.
Thank u Mizko🎉
That was amaizing. Thanks from BR.
Genius! I learned something today thank you!
Wow Mizko that's a nice trick
Thanks for sharing ❤️
Inspired, new to figma and loving it.
Great video, Mizko ❤
Thanks for sharing
Wow this feature is really very helpful!! Thank you 😊
That is brilliant! that was really helpful. Thank you!
Nice video
I literally smashed the subscribe button 😂😂😂😂
Thanks for sharing Mizko!
oh wow!
never knew!
Thanks Miz!
this video is actually very useful. thanks mate. cheers
Cool trick - thanks man!
This is crazy man, nice explanation 😁
I think I’ve overgrown Mizko.
That's my job
Wow, thx bro. Really, i feel helpfully with this video
Amazing again! U are the best!
Fastest click ever!! :))) But I still don't know why don't I just link it to "Back" .. In fact, I make my back button a component and it's always linked to "Back" so whenever I paste it in a frame from the assets, it already has this interaction.
Can you elaborate please
@@xavierc7497 First, make the "X" icon a component (it will be automatically added to assets), then while holding this component, go to prototype, and you will see a little + button on the right and says add interaction. You can set the interaction to when click, go back. That's all. Now every time you need a back button on your screen, just drag it from the assets. It already has the interaction and you don't. need to add it again.
mind-blowing dude!
This is a good technique but its benefits would've been more obvious in a cart example or a login example, because in this instance, I believe a button with a back function would do just fine. But when you go from "add to cart > cart > payment > summary > error page" or from "login page > verification > error page", the back function in the error page would bring you back to the summary or verification page, but a link to a section containing the cart/login page would make a better user flow.
This is so great, thanks for sharing!
Thank you! it really saved my time.
Thank you for section explanation. it was amazing
This is truly amazing 👏
So basically you just have a "go back" action on top right of your frame. and it will go back where it came form.
Needed this thanks a ton
Thank you this is very useful!
Literally just in time to my news app. This goes perfect for when the user choose a topic tag, but then goes to Profile screen, if then user goes back, where does figma should go? MA GUY U SAVED ME LIKE 2 DAYS OF WORK I NEEDED FOR OTHER SUBJECT. THANK YOU
Viry nice video! Congrats! Could you explaining the difference about sections and de function back? Thanks!
👏👏👏
Thank you Mizko
noted bro, that's useful, thanks for sharing!
Damn, so fast! Thanks for sharing!
Nice figma tip! Thank you.
Your example is maybe not that mind blowing, because it could be done with "back" option in the same time, but in bigger amount of screens (nested in section), it would be a good timesaver.
Yes, but this is a very good other way to do it, you cannot have that transitions for back navigation and also the back navigation has some flaws that sometimes lead to a looping display of pages.
Awesome Video
Thanks Abhi!
nice, very helpful. thumbs up!!!
Interesting eventhough thers is back interaction option but linking to sections might help in few use cases.
Good to see you drop by Vids! Check out my pinned comment
Awesome VIDEO!!!
Great explanation, thank you!
simple and effective, thank u
You are a hero. Thanks for sharing :)
This was great thank you!
Thank you so much, especially for beginner like me 🙂
Awesome! Thanks a lot!
🙏
Love it... as always.
Woow didn't know that about sections, thanks!
Fantastic tip!
Thank you so much for this video! ☺️
Amazing! Thanks!
oh that's cool. Thanks for sharing!
What if the 2 entry points to the buy screen are not in the semantically same section? For example, there are multiple entry points in my app that link to a multi-step document upload flow, and I want to go back to the appropriate entry screen after. Back won't work since the upload flow is multi step.
amazing trick! thanks for sharing
Thanks! please make another video and show more example about this topic
Great tip ! Thanks
awesome technique!
Great use of section...👍