I actually have started using a wireframe component library, that way you can just drag and drop your elements in to create very very fast wireframes, without the visual distraction of other products branding. This way you can actually duplicate the components and start adjusting them in design to basically design your page from the wireframes without a bunch of re-work. I'll be dropping a tutorial on this soon ;)
No doubt Tim you are one of the best TH-camrs currently, I am very happy to be learning at the same time you are making these videos! I believe that many who go to your channel are also beginners, a video tip would be to explain the whole process of designing a landing page to a fictitious customer, from the wireframe to the design in Figma and exporting to the frame, it could be a series, it would be interesting
I recently came through your channel..such an informative video , from now on i'm going practice these figma animation tutorial daily. , also for sure i'll refer your youtube channel for the ui/ux aspirants. great work! thank you!
Tim my man! Always giving the community quality content. Tim I can remember you once did an elaborate video on this in the past, but do you use this concept for SaaS products, for ex: Dashboard designs?
Ikenna, my dear friend!! 😃 thank you for always being nice and commenting! well, personally I've only used it for landing page design, but thinking of it I think it could really be used for anything. the problem with dashboards is that they're very contextual and thus it might not be as useful as for the landing pages. still could be very useful though!!
Great approach! Thank you, it`s very usefull. Armed! Now I have a whole series of questions. 1. Why do you put it into that specific 1440px before capture it to Figma, if you resize it in Figma anyway? Why not just capture without Dev mode? 2. What do for you capture every section, if you can capture whole webpage (can perform with Chrome extension, or I use Vivaldi and Capture whole page is already an option. And then you can duplicate it and cut into whatever section you need. 3. Why do you even cut them into sections? 4. What tool do you use to capture? 5. What other sites can you recommend to get designs for inspiration? Thanks a lot, Tim! That`s very useful, as I said. I will definitely use it!
This is literally what I was doing yesterday after watched some other videos from your channel. It's so crazy that I'm watching your updated video now showing a much better way of doing the same work. Super duper nice work Tim!!!! Just love love your channel and can't wait for the next one
Alhamdulillah. Thanks, man, it really helps me as a beginner who is stressing out about how to create a wireframe. your technique is spectacular 🎉🎉🎉🎉🎉🎉🎉🎉
Great video as always, my brother! I didn't know you could change sizes within the inspector tool. That's such a freaking hack to get mobile versions as well!
Hey Tim! Been watching your awesome content for some time now and its been a boon since I am just figuring out responsive design. Might I suggest you create a video where you design a whole responsive website or app in figma? I am still a little doubtful on using auto layout and constraints on a larger project because i have been practising it on smaller components like cards or navbars. It'll be of great help!
I used to do actual wireframe but it instead makes me less productive and inefficient. I found that I work well with doing wireframe along with the high fidelity design at the same time Assuming I already have good understanding how the website should feel and aesthetics of the website, I would have pen and paper and brain dump random layouts. Do 10 second personal A/B testing and just start designing (or coding)
hey CD!! thanks a lot 😃 I think it really depends on what kind of design it is, but in the end something in-between desktop and mobile will mostly be a good bet (so maybe an iPad mini, for example)
Hi Tim! I've just finished all your course in Figma and I have to say thank you for all your work ^^ Great video, straightforward to the point, and also include all the things we need to know in the simplest way. VERY HAPPY TO LEARN. Look forward to seeing more videos from you!
You say it makes no sense doing it with a non functional landing page.. but you are using a non functional landing page as example. The goal of a wireframe is to do the information design and the information is coming from the usergroup. You are taking interactive elements from competitors... don't think this makes a lot of sense. Edit: How is this even UX Design? There is not even a sentence about the process.
If you're a UX designer, it's assumed that you already have the necessary information about the user group and know how to apply it when creating mockups. The purpose of this video is to show a shortcut to wireframing in Figma, which can help communicate design ideas to stakeholders or clients more effectively than a simple 'napkin sketch.' The focus here isn't on the entire UX process, which is why it isn't covered in detail. Additionally, he encourages taking inspiration from competitors' designs, not copying them directly.
@@cynth14You just can't do wireframes as he does. Thats not an hack because his Argument is flawed. Wireframes don't come from getting inspired by other designs. In work and university wirrframes come from user data, your product, data from inside the company, or even bought polls etc. and different mapping methods. It's like you are learning to paint something specific (A family from a small town in England) and you just Look at other paintings instead of learning about the people, the behaviors etc. of the time. So you will get a copy of what other people think is true but not what was really true driven by data.
@@cynth14 btw. you can look up any book about UX Design and show me that this videos makes sense. I've read about 10 of them for my thesis and i can't remember one telling "best hack is to look in the competition". Schools and work don't teach it because it is not applicable and csn't be backed up by data. its the same if you say X is the best hack but you have no proof. Designing is about proof and not about looking like the competition.
Tim my man! Always giving the community quality content. Tim I can remember you once did an elaborate video on this in the past, but do you use this concept for SaaS products, for ex: Dashboard designs?
Tim, I just started learning Figma this week. And I’m currently getting comfortable with creating wireframes. This method is so useful! Thank You 🙏🏾
that's awesome! thank you!!
I actually have started using a wireframe component library, that way you can just drag and drop your elements in to create very very fast wireframes, without the visual distraction of other products branding. This way you can actually duplicate the components and start adjusting them in design to basically design your page from the wireframes without a bunch of re-work. I'll be dropping a tutorial on this soon ;)
No doubt Tim you are one of the best TH-camrs currently, I am very happy to be learning at the same time you are making these videos!
I believe that many who go to your channel are also beginners, a video tip would be to explain the whole process of designing a landing page to a fictitious customer, from the wireframe to the design in Figma and exporting to the frame, it could be a series, it would be interesting
thank you so much for this, Matheus!!
and thank you for the video suggestion, I'll definitely add that to my list. 🤩
That's a really interesting and useful technique. Thanks for sharing it with us!
really glad you found it useful!! 🤩
I recently came through your channel..such an informative video , from now on i'm going practice these figma animation tutorial daily. , also for sure i'll refer your youtube channel for the ui/ux aspirants. great work! thank you!
thank you so much, Nithysh! really appreciate the support!! 😃
Thank You !!
Best part for me is how you used opacity and lock in the end of video..
Your videos have good values, i learned a lot. keep up the good work of teaching us
that's nice to hear. thanks for supporting!!
I use this technique from the 1st video you published. It's really helpful to design better UI web pages. Thank you 🎉❤
so cool to hear that you're using it, Sayekat! 😃
Tim my man! Always giving the community quality content. Tim I can remember you once did an elaborate video on this in the past, but do you use this concept for SaaS products, for ex: Dashboard designs?
Ikenna, my dear friend!! 😃 thank you for always being nice and commenting!
well, personally I've only used it for landing page design, but thinking of it I think it could really be used for anything. the problem with dashboards is that they're very contextual and thus it might not be as useful as for the landing pages. still could be very useful though!!
Great approach! Thank you, it`s very usefull.
Armed! Now I have a whole series of questions.
1. Why do you put it into that specific 1440px before capture it to Figma, if you resize it in Figma anyway? Why not just capture without Dev mode?
2. What do for you capture every section, if you can capture whole webpage (can perform with Chrome extension, or I use Vivaldi and Capture whole page is already an option. And then you can duplicate it and cut into whatever section you need.
3. Why do you even cut them into sections?
4. What tool do you use to capture?
5. What other sites can you recommend to get designs for inspiration?
Thanks a lot, Tim! That`s very useful, as I said. I will definitely use it!
Loving this content, Tim! Could you do a review of Penpot?
great to hear, my friend 🤩 not a user of Penpot, but maybe in the future!! 😃
This is literally what I was doing yesterday after watched some other videos from your channel. It's so crazy that I'm watching your updated video now showing a much better way of doing the same work. Super duper nice work Tim!!!! Just love love your channel and can't wait for the next one
thank you for the candid comments, Mona! so glad you enjoy the videos and that they're helpful for you 😃
Uauuuu. Very useful tip. Thank you Clint Eastwood from the inverted world.
Best designer around here!❤
mi galletita 💜
Alhamdulillah.
Thanks, man, it really helps me as a beginner who is stressing out about how to create a wireframe.
your technique is spectacular 🎉🎉🎉🎉🎉🎉🎉🎉
Hold CTRL and drag for cropping images
Once again, doing the lords work. Thank you.
Thank you 👍
my pleasure, my friend 🤩
This is exactly how I always do my designs lol
haha, cool that someone else does the same as me!
Great video as always, my brother!
I didn't know you could change sizes within the inspector tool.
That's such a freaking hack to get mobile versions as well!
thank you so much, my brother 🙏💜
yes!! the inspector tool is so versatile and useful 🤩
This is super cool 🔥
glad you liked it, ardian!
Hey Tim! Been watching your awesome content for some time now and its been a boon since I am just figuring out responsive design. Might I suggest you create a video where you design a whole responsive website or app in figma? I am still a little doubtful on using auto layout and constraints on a larger project because i have been practising it on smaller components like cards or navbars.
It'll be of great help!
thank you so much, my friend!!
check out this tutorial for more responsive stuff:
th-cam.com/video/tJCv91c6Krk/w-d-xo.html
This was great; thanks!!
thanks a lot!! appreciate the comment
I used to do actual wireframe but it instead makes me less productive and inefficient. I found that I work well with doing wireframe along with the high fidelity design at the same time
Assuming I already have good understanding how the website should feel and aesthetics of the website, I would have pen and paper and brain dump random layouts. Do 10 second personal A/B testing and just start designing (or coding)
i think everyone has to go with what works best for them in the end!!
wow thank you!
thank you for commenting and supporting! 😃
This is damn good idea!
thank you!!
what was the example he gave for inspirations? I couldnt quite make it out. thanks for the great content.
This is really helpful thanks a million. I’m not sore how I can set the dimension in the first step after opening the websites in different tabs.
hey Jamie, thanks for commenting! 😃 you get into the dev tools > change from a specific device to responsive > then change as you want!
@@TimGabe sorry for my ignorance. Is that a n extension or do you mean inspect?
Not sure how to access the dev tool.
@@jamiefrost3356 You right click anywhere on the page and select 'inspect'
Thanks for the help mate
Awesome lifehack ❤👍
lifehacks are the best!! 💜
Thanks a lot for great tips as always. What would be your ideal go to dimensions for tablets?
hey CD!! thanks a lot 😃 I think it really depends on what kind of design it is, but in the end something in-between desktop and mobile will mostly be a good bet (so maybe an iPad mini, for example)
Woow! Super useful, thanks
happy to help, Shimerli!! 😃
Hi Tim! I've just finished all your course in Figma and I have to say thank you for all your work ^^ Great video, straightforward to the point, and also include all the things we need to know in the simplest way. VERY HAPPY TO LEARN. Look forward to seeing more videos from you!
that's amazing! thanks a lot, lee!
Cool hack!
Hi Tim, could you make interactive landing page in figma tutorial for beginner?
hey my friend 🤩 when you say interactive, what exactly do you mean?
@@TimGabe I mean could you make a tutorial video how to design stunning landing page with prototype interactions and animations inside.
cheat code! Thanks time! 🤯
haha!! thank you for commenting, friend!
this is gold
thanks a lot Maciej!! 🥳
@@TimGabe Do you take all sections from one site or you pick your favourite section from different sites?
You say it makes no sense doing it with a non functional landing page.. but you are using a non functional landing page as example. The goal of a wireframe is to do the information design and the information is coming from the usergroup. You are taking interactive elements from competitors... don't think this makes a lot of sense.
Edit: How is this even UX Design? There is not even a sentence about the process.
If you're a UX designer, it's assumed that you already have the necessary information about the user group and know how to apply it when creating mockups. The purpose of this video is to show a shortcut to wireframing in Figma, which can help communicate design ideas to stakeholders or clients more effectively than a simple 'napkin sketch.'
The focus here isn't on the entire UX process, which is why it isn't covered in detail. Additionally, he encourages taking inspiration from competitors' designs, not copying them directly.
@@cynth14You just can't do wireframes as he does. Thats not an hack because his Argument is flawed. Wireframes don't come from getting inspired by other designs. In work and university wirrframes come from user data, your product, data from inside the company, or even bought polls etc. and different mapping methods.
It's like you are learning to paint something specific (A family from a small town in England) and you just Look at other paintings instead of learning about the people, the behaviors etc. of the time. So you will get a copy of what other people think is true but not what was really true driven by data.
@@cynth14 btw. you can look up any book about UX Design and show me that this videos makes sense. I've read about 10 of them for my thesis and i can't remember one telling "best hack is to look in the competition".
Schools and work don't teach it because it is not applicable and csn't be backed up by data. its the same if you say X is the best hack but you have no proof. Designing is about proof and not about looking like the competition.
How can we contact you?
I’m on Twitter (@timgabedesign) 😃
isn't that redesigning?
Thanks Tim its very useful hacks for us.
happy you liked it Ritche!! 🥳
Tim my man! Always giving the community quality content. Tim I can remember you once did an elaborate video on this in the past, but do you use this concept for SaaS products, for ex: Dashboard designs?