Hey Jordan, this is me coming back after 8 months to say I miss your videos and wish you would come back sooner. I hope you're good where ever you are and flourishing too. With love✌.
Completed this entire tutorial. Thank you sooo much, I must say your knowledge, delivery and quality is dope! Not only learned it but enjoyed it too. Great job looking forward for more advance tutorials from you :)
Thanks man for the video. Appreciate it. I've been searching video for converting desktop to mobile in figma. thanks to the algorithm stumble your video. what a blessing. Appreciate for the useful information. Keep up the good work
Thank you for this extremely clear and insightful tutorial! I’m new to interface design and this tutorial has made it clear to me how to transform web interface into mobile. I’ve learned a lot from this one video already. Just one question: do you usually go for the mobile-first approach or desktop-first? Thank you!
My pleasure! I actually don't have a popular opinion on this. Because for websites, I'm a big fan of starting visual design with the desktop pass. I've been on projects where they've pitched a 'mobile-first' design approach to a client - which was inferred to mean doing the mobile artboards first. Those projects often ran over-time and over-budget. For whatever reason, I've found stakeholders are often less-opinionated with the mobile designs. After the mobile design bubbles up to the desktop designs, all the feedback comes out. Which then has to be sync'd back down to mobile anyway. Double handling. I believe "mobile first" was first coined by Luke Wroblewski back in 2011 (and subsequently endorsed by Brad Frost and Ethan Marcotte) when responsive design was very new and the majority of website's weren't responsive at all. Now that we have responsive design patterns, even though I'm starting with the desktop design pass, I'm able to consider both desktop and mobile as I go. That being said - if I was tasked to design a landing page that would only be reached from an instagram advertisement shown in a webview, I'd maybe try starting with mobile artboards. As with everything - depends on the project, the client, the users. And this is all just for visual design. In web development, the "mobile-first" perspective is helpful when writing CSS. Hope that makes sense!
Hi Jordan, Thanks for this gread video again. Can you make another video about "Hug Container", "Fill Container", Fixed Width" etc. and the difference between each of them? I would really appreciate if you can make a short video for that. I am quite confused about how and where should we use them. Thanks
Hi Jordan! We built a figma plugin that converts your design to code & also a responsive real fidelity prototype (React, gatsby, nextjs, html-css & coming soon on react native)! Its in free beta and I think you would enjoy building with it!
I dove straight into Figma creating some screens for work but after watching this, i realise i'm not using Figma efficiently, especially with the auto layout and the calculations?! Omg i know nothing now. Where do i even start learning the basics?
Hey @jordan Can you please make a video about dashboard? Like what elements have to design in a dashboard and when we have to design a dashboard, and lastly does every websites have a dashboard
I got a question. Don't we have to change the font size while making a mobile screen version? Can someone help me understand what the conversion is like?
Hey Jordan, Why didn't you create new tutorials I am new subscribers! I love your teaching style and I learned a lot by watching your videos so please make another tutorial for us specially for multipage website. Thanks! 🙂
Thanks for this Jordan. Wondering do I need to create another design for mobile view if I have already created for desktop. Please note that I am not making it into a mobile app. But to see how it displays on mobile. Thanks
Nice Tutorial. But I sometimes don't understand what command are u using. Sometimes try explain for Windows user. More Template design tutorial will help me as newbie. Waiting for next tutorial.
Thanks Mohammad! I might have to do a tutorial that covers off both Mac and PC shortcuts. Unfortunately Figma only shows Mac users the Mac shortcuts so it's a bit hard for me to verify what the shortcuts are for Window's users. I'll have to figure it out!
This guy did it wrong. For mobile versions(even tablet) we have to choose smaller dimensions for elements(headings, paragraph, img etc) just the button in some cases we use with the same dimension as it is on desktop.
Hi Jordan, nice video! One question as a beginner: what do you think about designing websites for mobile first and from there expand the layout for other devices? Is there really a big difference between designing for mobile first and designing for desktop (and then adapting for mobile)?
Thanks Oscar! Adila had a similar question, so I'll paste my reply here too. I actually don't have a popular opinion on this. Because for websites, I'm a big fan of starting visual design with the desktop pass. I've been on projects where they've pitched a 'mobile-first' design approach to a client - which was inferred to mean doing the mobile artboards first. Those projects often ran over-time and over-budget. For whatever reason, I've found stakeholders are often less-opinionated with the mobile designs. After the mobile design bubbles up to the desktop designs, all the feedback comes out. Which then has to be sync'd back down to mobile anyway. Double handling. I believe "mobile first" was first coined by Luke Wroblewski back in 2011 (and subsequently endorsed by Brad Frost and Ethan Marcotte) when responsive design was very new and the majority of website's weren't responsive at all. Now that we have responsive design patterns, even though I'm starting with the desktop design pass, I'm able to consider both desktop and mobile as I go. That being said - if I was tasked to design a landing page that would only be reached from an instagram advertisement shown in a webview, I'd maybe try starting with mobile artboards. As with everything - depends on the project, the client, the users. And this is all just for visual design. In web development, the "mobile-first" perspective is helpful when writing CSS. Hope that makes sense!
I have an organizational question. It is good to produce several prototypes Desktop, Tablet and Smartphone for a homepage, but what do you think we need to produce all the pages of a website with several Portals (more than very complexes 200pages)? I ask because my boss is asking me to do it and I don’t find a solution to have maintenance on Tablet and Smartphone. We are Desktop first and we will make a lot of changes on the Desktop version, then the others prototypes will be outdated. It looks like a dead end. Any help ?
@Jordan Geizer - Hi, thanks for the video, its very clear to follow! DId you do any extra prototyping when switching from desktop to mobile especially for the sliders? and what about font sizes, don't you have to reduce them for mobile?
Thank you Sakina! I don’t tend to do any extra prototyping with web pages. Maybe we could prototype up the hamburger menu here too so people can see how that looks. But I find most prefer to flick webpages with the arrow keys. As for font sizes, I’m actually skeptical of lowering all font sizes for mobile. It makes it harder for users to read! So I tend to only reduce the font size of the largest two headings, if needed.
Sure thing! When presenting designs to clients, I’m often asked to shuffle page sections around on the fly. Keeping each section in a frame, I’m able to re-arrange the page with just the up/down arrow keys. Super fast. You can also add and remove sections within the page with ease. Finally, it helps you compose designs closer to how devs actually code websites. Hope that makes sense!
Hey Jordan, this is me coming back after 8 months to say I miss your videos and wish you would come back sooner. I hope you're good where ever you are and flourishing too. With love✌.
Completed this entire tutorial. Thank you sooo much, I must say your knowledge, delivery and quality is dope! Not only learned it but enjoyed it too. Great job looking forward for more advance tutorials from you :)
Your method just blew my mind. I'm definitely gonna stick to yours. Thanks.
Thanks man for the video. Appreciate it. I've been searching video for converting desktop to mobile in figma. thanks to the algorithm stumble your video. what a blessing. Appreciate for the useful information. Keep up the good work
Jordan, thx for your high quality content. Im new to this field and learning how to use figma now. This video really help me a lot!
Thanks for sharing your approach! It's such a neat and organized way of building up next viewpoints
Love these tutorials. I hope you have plans to make some more.
just wow! u used figma like u playing games. Very good knowledge for me, thanks for the video! gj
Really💯👌👌 great Videos You're making. I have watched your last 4 Videos and successfully recreated them too. Now Waiting for your next tutorial.
Can you please upload tutorials weekly
Wow, thank you so much 😀 Would love to but posting as frequently as I can!
Thanks for Sharing From 🇹🇱🇹🇱🇹🇱
So helpful thank you!! You’re a great teacher
Thank you so much!
Alot of informative video ever
Great video. Hope you make more 👍
Thank you for this extremely clear and insightful tutorial! I’m new to interface design and this tutorial has made it clear to me how to transform web interface into mobile. I’ve learned a lot from this one video already. Just one question: do you usually go for the mobile-first approach or desktop-first? Thank you!
My pleasure! I actually don't have a popular opinion on this. Because for websites, I'm a big fan of starting visual design with the desktop pass.
I've been on projects where they've pitched a 'mobile-first' design approach to a client - which was inferred to mean doing the mobile artboards first. Those projects often ran over-time and over-budget.
For whatever reason, I've found stakeholders are often less-opinionated with the mobile designs. After the mobile design bubbles up to the desktop designs, all the feedback comes out. Which then has to be sync'd back down to mobile anyway. Double handling.
I believe "mobile first" was first coined by Luke Wroblewski back in 2011 (and subsequently endorsed by Brad Frost and Ethan Marcotte) when responsive design was very new and the majority of website's weren't responsive at all.
Now that we have responsive design patterns, even though I'm starting with the desktop design pass, I'm able to consider both desktop and mobile as I go.
That being said - if I was tasked to design a landing page that would only be reached from an instagram advertisement shown in a webview, I'd maybe try starting with mobile artboards. As with everything - depends on the project, the client, the users.
And this is all just for visual design. In web development, the "mobile-first" perspective is helpful when writing CSS. Hope that makes sense!
Hi Jordan, Thanks for this gread video again. Can you make another video about "Hug Container", "Fill Container", Fixed Width" etc. and the difference between each of them? I would really appreciate if you can make a short video for that. I am quite confused about how and where should we use them.
Thanks
Definitely! I'll add that to my list :D
Pls make an updated video on this, the figma of today is vry different to the figma of the past, so there are some confusion for me.
Great job. Thank you very soo much. 🎉
Hi Jordan! We built a figma plugin that converts your design to code & also a responsive real fidelity prototype (React, gatsby, nextjs, html-css & coming soon on react native)! Its in free beta and I think you would enjoy building with it!
Plugin name
What is the plug in name
I dove straight into Figma creating some screens for work but after watching this, i realise i'm not using Figma efficiently, especially with the auto layout and the calculations?! Omg i know nothing now. Where do i even start learning the basics?
Great content! Thanks a lot
Hey @jordan Can you please make a video about dashboard?
Like what elements have to design in a dashboard and when we have to design a dashboard, and lastly does every websites have a dashboard
Amazing!
Hey buddy, would love to follow you closely for mentorship. Love your work
Amazing content! also very easy and straightforward explanation, I wish you had a UI Design, have you?
Thank you for best lesson
Thank you! So nice of you to say.
I got a question. Don't we have to change the font size while making a mobile screen version? Can someone help me understand what the conversion is like?
Nice job
Awesome video Jordan. I would really appreciate it if you could create a multi-page website (maybe with animations) in figma. Thanks 😊
Thank you 💗😊
pls comeback, your videos are super helpful & detail
Thank you for your kind words Grace! I am currently planning a comeback :)
what about the other way around? I mean Convert the Android design to Desktop design?
Hey Jordan, Why didn't you create new tutorials I am new subscribers!
I love your teaching style and I learned a lot by watching your videos
so please make another tutorial for us specially for multipage website. Thanks! 🙂
Hi! Love the video - super informative! What are the values/settings of your Desktop grid?
Thanks!
Thanks for this Jordan. Wondering do I need to create another design for mobile view if I have already created for desktop. Please note that I am not making it into a mobile app. But to see how it displays on mobile. Thanks
What's the reason you duplicating for mobile rather than extending frame to vertical!?
Does it matter what preset you use for mobile? - will the landing page be responsive across multiple mobile screens?
Nice Tutorial. But I sometimes don't understand what command are u using. Sometimes try explain for Windows user. More Template design tutorial will help me as newbie. Waiting for next tutorial.
Thanks Mohammad! I might have to do a tutorial that covers off both Mac and PC shortcuts. Unfortunately Figma only shows Mac users the Mac shortcuts so it's a bit hard for me to verify what the shortcuts are for Window's users. I'll have to figure it out!
How it works if desktop typefaces are way too big for mobile ? What are the best "rules" here ?
This guy did it wrong. For mobile versions(even tablet) we have to choose smaller dimensions for elements(headings, paragraph, img etc) just the button in some cases we use with the same dimension as it is on desktop.
thanks
Hi Jordan, nice video!
One question as a beginner: what do you think about designing websites for mobile first and from there expand the layout for other devices? Is there really a big difference between designing for mobile first and designing for desktop (and then adapting for mobile)?
Thanks Oscar! Adila had a similar question, so I'll paste my reply here too.
I actually don't have a popular opinion on this. Because for websites, I'm a big fan of starting visual design with the desktop pass.
I've been on projects where they've pitched a 'mobile-first' design approach to a client - which was inferred to mean doing the mobile artboards first. Those projects often ran over-time and over-budget.
For whatever reason, I've found stakeholders are often less-opinionated with the mobile designs. After the mobile design bubbles up to the desktop designs, all the feedback comes out. Which then has to be sync'd back down to mobile anyway. Double handling.
I believe "mobile first" was first coined by Luke Wroblewski back in 2011 (and subsequently endorsed by Brad Frost and Ethan Marcotte) when responsive design was very new and the majority of website's weren't responsive at all.
Now that we have responsive design patterns, even though I'm starting with the desktop design pass, I'm able to consider both desktop and mobile as I go.
That being said - if I was tasked to design a landing page that would only be reached from an instagram advertisement shown in a webview, I'd maybe try starting with mobile artboards. As with everything - depends on the project, the client, the users.
And this is all just for visual design. In web development, the "mobile-first" perspective is helpful when writing CSS. Hope that makes sense!
I have an organizational question. It is good to produce several prototypes Desktop, Tablet and Smartphone for a homepage, but what do you think we need to produce all the pages of a website with several Portals (more than very complexes 200pages)?
I ask because my boss is asking me to do it and I don’t find a solution to have maintenance on Tablet and Smartphone. We are Desktop first and we will make a lot of changes on the Desktop version, then the others prototypes will be outdated. It looks like a dead end. Any help ?
@Jordan Geizer - Hi, thanks for the video, its very clear to follow!
DId you do any extra prototyping when switching from desktop to mobile especially for the sliders? and what about font sizes, don't you have to reduce them for mobile?
Thank you Sakina! I don’t tend to do any extra prototyping with web pages. Maybe we could prototype up the hamburger menu here too so people can see how that looks. But I find most prefer to flick webpages with the arrow keys.
As for font sizes, I’m actually skeptical of lowering all font sizes for mobile. It makes it harder for users to read! So I tend to only reduce the font size of the largest two headings, if needed.
Спасибо
😢😢 it's not working out for me
I am the first to watch it. 🌛
How to got the comfy one?
Hey man, why is it necessary to create a new frame everytime, isn't it easier to just extend the original one? I'm asking cause i'm not sure.
Sure thing! When presenting designs to clients, I’m often asked to shuffle page sections around on the fly. Keeping each section in a frame, I’m able to re-arrange the page with just the up/down arrow keys. Super fast. You can also add and remove sections within the page with ease. Finally, it helps you compose designs closer to how devs actually code websites. Hope that makes sense!
👏🏻👏🏻👏🏻
Is there a way to convert figma designs into a website on a tablet? I wanna design websites on my tablet lol
Haha, unfortunately not @NioxGaming! The Figma iPad app only lets you view Figma artboards or create FigJam files.
Heyy sir, I would also love to be one of your mentees...Thanks
hey! do you set every element into autolayout?
Most of them! 😄