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✌.
@thetechgirl3140
2 жыл бұрын
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 :)
@ayambaasong4425
Жыл бұрын
Your method just blew my mind. I'm definitely gonna stick to yours. Thanks.
@Adlil
Жыл бұрын
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
@martabak4622
2 жыл бұрын
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!
@secession77
Жыл бұрын
Thanks for sharing your approach! It's such a neat and organized way of building up next viewpoints
@adilailma5658
2 жыл бұрын
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!
@JordanGeizer
2 жыл бұрын
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!
@christianmagill3829
Жыл бұрын
Love these tutorials. I hope you have plans to make some more.
@timak2064
2 жыл бұрын
just wow! u used figma like u playing games. Very good knowledge for me, thanks for the video! gj
@honeymittal5836
2 жыл бұрын
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!
@arko3822
2 жыл бұрын
Plugin name
@schoolinthesistem4013
2 жыл бұрын
What is the plug in name
@abdulhamidkhan1953
4 ай бұрын
Alot of informative video ever
@vishnugupta1529
2 жыл бұрын
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
@JordanGeizer
2 жыл бұрын
Definitely! I'll add that to my list :D
@masumrakib4070
2 жыл бұрын
Really💯👌👌 great Videos You're making. I have watched your last 4 Videos and successfully recreated them too. Now Waiting for your next tutorial.
@masumrakib4070
2 жыл бұрын
Can you please upload tutorials weekly
@JordanGeizer
2 жыл бұрын
Wow, thank you so much 😀 Would love to but posting as frequently as I can!
@tolokaearnmoney4645
2 жыл бұрын
pls comeback, your videos are super helpful & detail
@JordanGeizer
2 жыл бұрын
Thank you for your kind words Grace! I am currently planning a comeback :)
@emca1597
3 ай бұрын
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.
@jtrap420
Жыл бұрын
Does it matter what preset you use for mobile? - will the landing page be responsive across multiple mobile screens?
@anotilkharu59
2 жыл бұрын
Thanks for Sharing From 🇹🇱🇹🇱🇹🇱
@ZellithFN
2 жыл бұрын
So helpful thank you!! You’re a great teacher
@JordanGeizer
2 жыл бұрын
Thank you so much!
@TheLyricsGuy
Жыл бұрын
Great video. Hope you make more 👍
@naderahmed6323
2 жыл бұрын
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
@mayararodrigues1066
Жыл бұрын
Amazing content! also very easy and straightforward explanation, I wish you had a UI Design, have you?
@lvrn124
Жыл бұрын
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?
@sabrinandra
2 ай бұрын
Amazing!
@isaacfash580
2 жыл бұрын
Hey buddy, would love to follow you closely for mentorship. Love your work
@oscarsolis3625
2 жыл бұрын
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)?
@JordanGeizer
2 жыл бұрын
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!
@richard-dante
10 ай бұрын
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 ?
@Culturelens
Жыл бұрын
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
@sakinasalem6785
2 жыл бұрын
@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?
@JordanGeizer
2 жыл бұрын
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.
@gemstonesagate
Жыл бұрын
Great job. Thank you very soo much. 🎉
@SunnMuzz
Жыл бұрын
Hi! Love the video - super informative! What are the values/settings of your Desktop grid?
@Prithviraj-sj7op
8 ай бұрын
What's the reason you duplicating for mobile rather than extending frame to vertical!?
@williamssamuel8992
2 жыл бұрын
Awesome video Jordan. I would really appreciate it if you could create a multi-page website (maybe with animations) in figma. Thanks 😊
@stevy52
2 жыл бұрын
Great content! Thanks a lot
@domieSinday
Жыл бұрын
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! 🙂
@mohammadmosharrof3822
2 жыл бұрын
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.
@JordanGeizer
2 жыл бұрын
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!
@brunodiego7408
Жыл бұрын
Nice job
@ramazanguler6066
2 жыл бұрын
Thank you for best lesson
@JordanGeizer
2 жыл бұрын
Thank you! So nice of you to say.
@vladimircacic1587
2 жыл бұрын
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.
@JordanGeizer
2 жыл бұрын
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!
@ma-kv5xx
2 жыл бұрын
Thank you 💗😊
@zubairhanif6554
2 жыл бұрын
Thanks!
@user-uj1jh3tl5r
Жыл бұрын
How it works if desktop typefaces are way too big for mobile ? What are the best "rules" here ?
@zahariaalexandru-gy4bx
9 ай бұрын
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.
@jessicageizer973
2 жыл бұрын
👏🏻👏🏻👏🏻
@arifulislamfahim6113
2 жыл бұрын
thanks
@TanayPlaysGames
2 жыл бұрын
Is there a way to convert figma designs into a website on a tablet? I wanna design websites on my tablet lol
@JordanGeizer
2 жыл бұрын
Haha, unfortunately not @NioxGaming! The Figma iPad app only lets you view Figma artboards or create FigJam files.
@ecapsdesign
2 жыл бұрын
I am the first to watch it. 🌛
@sommy506
Ай бұрын
😢😢 it's not working out for me
@jeannevas875
2 жыл бұрын
Спасибо
@favorbela
Жыл бұрын
How to got the comfy one?
@KalvinPatel
2 жыл бұрын
hey! do you set every element into autolayout?
@JordanGeizer
2 жыл бұрын
Most of them! 😄
@abdulquddusabdulyaqeen
2 жыл бұрын
Heyy sir, I would also love to be one of your mentees...Thanks
Пікірлер: 67