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?
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
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!
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✌.
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
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 :)
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! 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?
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 ?
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
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
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!
@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!
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 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?
What's the reason you duplicating for mobile rather than extending frame to vertical!?
what about the other way around? I mean Convert the Android design to Desktop design?
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.
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
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!
Hey buddy, would love to follow you closely for mentorship. Love your work
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✌.
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
Your method just blew my mind. I'm definitely gonna stick to yours. Thanks.
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 :)
😢😢 it's not working out for me
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.
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?
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 ?
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
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
just wow! u used figma like u playing games. Very good knowledge for me, thanks for the video! gj
Does it matter what preset you use for mobile? - will the landing page be responsive across multiple mobile screens?
Hi! Love the video - super informative! What are the values/settings of your Desktop grid?
Heyy sir, I would also love to be one of your mentees...Thanks
Great job. Thank you very soo much. 🎉
Thanks for Sharing From 🇹🇱🇹🇱🇹🇱
Amazing content! also very easy and straightforward explanation, I wish you had a UI Design, have you?
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.
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!
@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.
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!
Thanks for sharing your approach! It's such a neat and organized way of building up next viewpoints
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!
Love these tutorials. I hope you have plans to make some more.
Great video. Hope you make more 👍
Alot of informative video ever
I am the first to watch it. 🌛
Great content! Thanks a lot
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!
How to got the comfy one?
hey! do you set every element into autolayout?
Most of them! 😄
Amazing!
Thank you 💗😊
So helpful thank you!! You’re a great teacher
Thank you so much!
Nice job
thanks
Thanks!
Спасибо
Thank you for best lesson
Thank you! So nice of you to say.
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!
👏🏻👏🏻👏🏻
Awesome video Jordan. I would really appreciate it if you could create a multi-page website (maybe with animations) in figma. Thanks 😊
pls comeback, your videos are super helpful & detail
Thank you for your kind words Grace! I am currently planning a comeback :)