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

  Рет қаралды 344,471

Mizko

Mizko

Жыл бұрын

Ultimate Figma Design Masterclass (5,000+ students. 90+ Videos. 10+ hours)
👉 thedesignershi...
Practical User Research & Strategy Masterclass (NEW!! 200+ students. 8 hours)
👉 thedesignershi...
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignershi...
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesigne...
Sign up to my newsletter for exclusive content:
👉 mizko.net/news...
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignershi...
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
My Ultimate Figma Design Masterclass (4,200+ students. 90+ Videos. 10+ hours)

Пікірлер: 242
@Mizko
@Mizko Жыл бұрын
👉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)
@jesusmolina2772
@jesusmolina2772 9 ай бұрын
hey, exist version spanish the masterclass?
@Mizko
@Mizko Жыл бұрын
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 :)
@KaviSivyer
@KaviSivyer Жыл бұрын
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
@joelson.design
@joelson.design Жыл бұрын
This makes total sense!
@Madi_Miso
@Madi_Miso Жыл бұрын
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!
@manashjyotidas
@manashjyotidas Жыл бұрын
Thank you Mizko ❤
@byebyebirdie8027
@byebyebirdie8027 Жыл бұрын
Yeah makes sense! I will try using it in my next project. Thanks!
@LuisVeloz13
@LuisVeloz13 Жыл бұрын
Hey Mizko, I think you can do the same just by selecting “Back” option on the prototype options while you create the connection
@samlidstone7763
@samlidstone7763 Жыл бұрын
Yeah exactly or connecting to the blue back button at the top right of the frame
@Mizko
@Mizko Жыл бұрын
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 :)
@thomasrenon
@thomasrenon Жыл бұрын
Moreover, I think the slide back would be in the right direction, in this example, left to right
@kunabdan3788
@kunabdan3788 Жыл бұрын
Plis make the video for us
@stanleyasokingz5022
@stanleyasokingz5022 Жыл бұрын
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?????
@Patelpinal1520
@Patelpinal1520 Жыл бұрын
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.
@michellezhu1559
@michellezhu1559 Жыл бұрын
Didn't know sectioning did more than just grouping the screens. What an awesome tip! Thanks!
@Mizko
@Mizko Жыл бұрын
Surprise!
@adaptivecodeio
@adaptivecodeio Жыл бұрын
dude that's fantastic. thanks for that clear explanation. love your channel, well done mate
@fatimaibrahimux
@fatimaibrahimux Жыл бұрын
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.
@AJ-yj6kd
@AJ-yj6kd Жыл бұрын
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 🤔
@Mizko
@Mizko Жыл бұрын
Thanks AJ!! Sorry, I should have used a better example, but I explained where this method is appropriate in the pin comment :)
@danielvaega
@danielvaega 4 ай бұрын
Super helpful, never knew the sections worked like that as well. Thanks a million!
@chrisjacobs5297
@chrisjacobs5297 4 ай бұрын
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.
@jadusiv
@jadusiv 3 ай бұрын
Can’t you also just use “open overlay” and “close overlay” to do the same thing?
@Joycered7
@Joycered7 Жыл бұрын
WHOA! This is awesome! Thanks Mizko!!! Figma is awesome and you always help us discover it.
@Mizko
@Mizko Жыл бұрын
🙏
@emilcupic
@emilcupic 10 ай бұрын
That sections tip was huge man, thanks for the vid
@stusmith1201
@stusmith1201 2 ай бұрын
Figma is the smartest design app on the market now.
@byebyebirdie8027
@byebyebirdie8027 Жыл бұрын
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
@xavierc7497 Жыл бұрын
Can you elaborate please
@byebyebirdie8027
@byebyebirdie8027 Жыл бұрын
@@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.
@vanhellsingniko8580
@vanhellsingniko8580 3 ай бұрын
Why I have not seen this video one year before !!! Thank you Mizko !
@hacorn96
@hacorn96 Жыл бұрын
thanks for this! i saw this on twitter, but couldn't find it again. super useful.
@Mizko
@Mizko Жыл бұрын
I stumbled across this feature accidentally when using Sections for a project!
@markxavior
@markxavior 12 күн бұрын
This is actually excellent.
@D4sxysrb
@D4sxysrb Жыл бұрын
That’s so gnarly Mizko
@iamyeomyeom
@iamyeomyeom Жыл бұрын
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~!
@Mizko
@Mizko Жыл бұрын
Plenty to more :)
@NomiKafri
@NomiKafri 2 ай бұрын
Thank you very much for the simple yet time saving trick! Definitely going to use it.
@mariweber87
@mariweber87 3 ай бұрын
Viry nice video! Congrats! Could you explaining the difference about sections and de function back? Thanks!
@byebyebirdie8027
@byebyebirdie8027 Жыл бұрын
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!
@sanskar49
@sanskar49 9 ай бұрын
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.
@godwin_njoroge
@godwin_njoroge Жыл бұрын
Whoa, this is super helpful. Thank you so much Miz
@Mizko
@Mizko Жыл бұрын
Thanks Godwin!
@ankitpandole1352
@ankitpandole1352 19 күн бұрын
Super duper helpful. Just what I was looking for.
@kaushals_vlog
@kaushals_vlog Жыл бұрын
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..😎🌸
@Mizko
@Mizko Жыл бұрын
Thank you :)
@fidanfarajullayeva5653
@fidanfarajullayeva5653 19 күн бұрын
Thank you! it really saved my time.
@daravrana7130
@daravrana7130 7 ай бұрын
OMG SERIOUSLY 🤩 I had a similar problem in my project and I'm very glad to find this tool! Thank you very much!
@daisyemahemah
@daisyemahemah Жыл бұрын
This is amazing, I don't have to have multiple screens to implement this any more. Thank you 🙏
@johnwisdomolasupo696
@johnwisdomolasupo696 Жыл бұрын
Wow! So cool, I never knew about this. Thank you Mizko for sharing 👌🏽
@williamvargas4179
@williamvargas4179 4 ай бұрын
top-notch content as always, thanks so much Mizko!🎸
@emmanuel9066
@emmanuel9066 Жыл бұрын
Nice video I literally smashed the subscribe button 😂😂😂😂
@CreativeCrewCommunity
@CreativeCrewCommunity Жыл бұрын
Such a solid tip. Thx for sharing this!
@Mizko
@Mizko Жыл бұрын
🙏
@hroman_codes
@hroman_codes 28 күн бұрын
This was great thank you!
@Kefmoles
@Kefmoles Жыл бұрын
Thanks for this info. Just finished working on a project where I had to repeat some flow
@MrEdukada
@MrEdukada Жыл бұрын
👏👏👏 great job Mizko
@godlfanpage8603
@godlfanpage8603 6 ай бұрын
This is really amazing! Finally I got which I wanted!
@vidhunnan
@vidhunnan Жыл бұрын
Interesting eventhough thers is back interaction option but linking to sections might help in few use cases.
@Mizko
@Mizko Жыл бұрын
Good to see you drop by Vids! Check out my pinned comment
@brightonshifu
@brightonshifu Жыл бұрын
How am I only discovering you today. You are a gem.
@haryLOG
@haryLOG Жыл бұрын
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.
@fcl8463
@fcl8463 9 ай бұрын
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.
@bimaaryafatah2823
@bimaaryafatah2823 4 ай бұрын
Thank u Mizko🎉
@mojtabachenari8100
@mojtabachenari8100 Жыл бұрын
That is brilliant! that was really helpful. Thank you!
@arnabmukherjee7507
@arnabmukherjee7507 Жыл бұрын
this video is actually very useful. thanks mate. cheers
@joky0Venice
@joky0Venice 9 ай бұрын
This video could've been 90 seconds tops. But awesome tip, thanks for showing this!
@RobertHeaney
@RobertHeaney Ай бұрын
Great explanation, thank you!
@designwithash6534
@designwithash6534 Жыл бұрын
Wow this feature is really very helpful!! Thank you 😊
@djashawe88923
@djashawe88923 Жыл бұрын
That's so cool! Figma is soooo smart! Thanks a lot Mizko the Ninja!
@avianozacapa3050
@avianozacapa3050 6 ай бұрын
You save my time!! thanks Dude!! its really helpfulll
@hroman_codes
@hroman_codes 5 ай бұрын
Genius! I learned something today thank you!
@fqras
@fqras Жыл бұрын
I think I’ve overgrown Mizko.
@Mizko
@Mizko Жыл бұрын
That's my job
@josephdente7940
@josephdente7940 Жыл бұрын
Cool trick - thanks man!
@praiseelechi8832
@praiseelechi8832 Жыл бұрын
Great video, Mizko ❤ Thanks for sharing
@atinspook
@atinspook 7 ай бұрын
Absolutely loved it. Didn't knew it.
@yatheeshgowda6191
@yatheeshgowda6191 9 ай бұрын
Wow Mizko that's a nice trick Thanks for sharing ❤️
@fryonthemoon
@fryonthemoon Жыл бұрын
Thanks for sharing Mizko!
@MetaArtisan
@MetaArtisan 5 ай бұрын
Inspired, new to figma and loving it.
@De.irda._
@De.irda._ 2 ай бұрын
Wow, thx bro. Really, i feel helpfully with this video
@onyekaezeneche7073
@onyekaezeneche7073 Жыл бұрын
oh wow! never knew! Thanks Miz!
@gabypino407
@gabypino407 Жыл бұрын
This is so great, thanks for sharing!
@davidlee2861
@davidlee2861 Ай бұрын
awesome technique!
@boneeque
@boneeque 3 ай бұрын
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.
@mhassbo4555
@mhassbo4555 3 ай бұрын
Thank you so much " شكراً لك جداً "
@abhichatterjee9064
@abhichatterjee9064 Жыл бұрын
Awesome Video
@Mizko
@Mizko Жыл бұрын
Thanks Abhi!
@FolaEnglish
@FolaEnglish Жыл бұрын
Thank you!!!
@pioneerty
@pioneerty 9 ай бұрын
Needed this thanks a ton
@krisreb9093
@krisreb9093 Жыл бұрын
Thank you so much for this video! ☺️
@ELENADESIGNS
@ELENADESIGNS Жыл бұрын
Woow didn't know that about sections, thanks!
@j.p.3513
@j.p.3513 9 ай бұрын
Thank you so much, especially for beginner like me 🙂
@ZombieGorl
@ZombieGorl Ай бұрын
wow that was informative thanks
@limsintow
@limsintow Жыл бұрын
Wow great! Interesting to try
@njengathegeek
@njengathegeek Жыл бұрын
This is crazy man, nice explanation 😁
@tommydharmawan2095
@tommydharmawan2095 Жыл бұрын
noted bro, that's useful, thanks for sharing!
@bensam9037
@bensam9037 9 ай бұрын
This is truly amazing 👏
@rafacavalcante
@rafacavalcante Жыл бұрын
Amazing again! U are the best!
@LearnREPhotography
@LearnREPhotography Ай бұрын
pretty nifty! thanks for sharing
@HollowsDarkness
@HollowsDarkness Жыл бұрын
When you say job ready, do you mean like you're teaching UX/UI Design along with Figma or how does taking your Master class allow people to become job ready to get a job with only Figma?
@JoseAndradejayrock
@JoseAndradejayrock 3 ай бұрын
Very helpful thank you
@binhnguyenthai2836
@binhnguyenthai2836 Жыл бұрын
mind-blowing dude!
@arasharia2
@arasharia2 Жыл бұрын
Thanks! please make another video and show more example about this topic
@muhammadnurichwan6013
@muhammadnurichwan6013 5 ай бұрын
Damn, so fast! Thanks for sharing!
@ElizabethArostegui
@ElizabethArostegui Жыл бұрын
Awesome! Thanks a lot!
@Mizko
@Mizko Жыл бұрын
🙏
@mrkang9x
@mrkang9x 6 ай бұрын
oh that's cool. Thanks for sharing!
@Yashwanth-hf9ys
@Yashwanth-hf9ys 6 ай бұрын
can anyone help me. I'm not getting inspect and animation in prototyping section 😵
@ahmedosman95
@ahmedosman95 Жыл бұрын
Great tip ! Thanks
@ravirajputdesigner
@ravirajputdesigner 3 ай бұрын
Great use of section...👍
@alveriaz
@alveriaz Жыл бұрын
amazing trick! thanks for sharing
@michaelrufi2872
@michaelrufi2872 10 ай бұрын
thanks, u video help me a lot!
@shahj1620
@shahj1620 Жыл бұрын
You are a hero. Thanks for sharing :)
@sabrinalfurasi
@sabrinalfurasi 8 ай бұрын
👏👏👏 Thank you Mizko
@dorianariadnaalcalagil2089
@dorianariadnaalcalagil2089 10 ай бұрын
Amazing! Thanks!
@letzlearns
@letzlearns Жыл бұрын
Hey , Thanks a lot. It is really helpful.
@EducationPurpose-oo3ym
@EducationPurpose-oo3ym Жыл бұрын
Absolutely Tricky You deserve more
@fcl8463
@fcl8463 9 ай бұрын
nice, very helpful. thumbs up!!!
@jswanson859
@jswanson859 Жыл бұрын
Fantastic tip!
@edutechab
@edutechab 6 ай бұрын
Thanks for the video. It was great
@marthaortegadiaz1554
@marthaortegadiaz1554 2 ай бұрын
wow!! ...thank you so much!!!
@ilhanaluk5116
@ilhanaluk5116 Ай бұрын
YOU ARE AMAZING
@rwnbdr8510
@rwnbdr8510 3 ай бұрын
that was amazing thank you :)
@oluwafemiakinbode241
@oluwafemiakinbode241 Жыл бұрын
Thanks for the update. I'd like to ask your view on the idea that the advent of Al will render UI UX designer skills useless
@youngfonz
@youngfonz 5 ай бұрын
Straight fire right here. You may have just sold me on your course, bro! I'm a struggling FANG designer. Can I get a coupon?
8 UI Kit & Design System Figma Plugins 2023
20:10
Mizko
Рет қаралды 114 М.
Master Figma UI Design in 15 Minutes | This Tutorial Is For You!
15:28
Website Learners
Рет қаралды 564 М.
Они так быстро убрались!
01:00
Аришнев
Рет қаралды 3 МЛН
Harley Quinn's desire to win!!!#Harley Quinn #joker
00:24
Harley Quinn with the Joker
Рет қаралды 8 МЛН
Figma for Edu: Prototyping 101, new basics
1:03:19
Figma
Рет қаралды 77 М.
The CORRECT (and lazy) way to prototype | Figma Tutorial
5:00
6 UI Hacks I Wish I Knew As A Beginner
11:11
Tim Gabe
Рет қаралды 781 М.
Learn how to use Boolean Variables in Prototypes | Figma Bites
4:06
Figma Variables & Advanced Prototyping - Crash Course
31:01
DesignCourse
Рет қаралды 129 М.
world's shortest UI/UX design course
6:53
Juxtopposed
Рет қаралды 1,2 МЛН
а ты любишь париться?
0:41
KATYA KLON LIFE
Рет қаралды 2,2 МЛН
Громов помог бедному зеку #лучшеекино #лучшиесериалы
1:00
Secretly went out for drinks behind my boyfriend's back
0:26
侠客红尘
Рет қаралды 38 МЛН
变身! #小丑#shorts
0:16
好人小丑
Рет қаралды 9 МЛН
If Barbie came to life! 💝
0:37
Meow-some! Reacts
Рет қаралды 58 МЛН