- 11
- 318 731
Jordan Geizer
Приєднався 8 сер 2010
UI Designer at Thinkmill
Converting Desktop Web Design to Mobile in Figma
Convert a desktop landing page to a mobile web design.
Create the landing page here: ua-cam.com/video/J1sgVdYf4Aw/v-deo.html
Contents
0:00 - Introduction
0:20 - Setting Up Grid Styles
2:40 - Navigation
6:00 - Hero
9:16 - Strap
10:22 - Icon Feature
12:45 - Media Feature
15:38 - Browser Stacking
17:28 - Reviews
19:43 - Footer
22:03 - Preparing The Prototype
25:00 - Creating Style Guides
25:12 - Creating Prototype Link
26:32 - Conclusion
Figma plugins to have installed
Iconify: www.figma.com/community/plugin/735098390272716381/Iconify
Automatic Style Guides: www.figma.com/community/plugin/838622388628773312/Automatic-Style-Guides
Stay in touch
jgeizerux
dribbble.com/jordangeizer/
jordangeizer.com/
Music from Uppbeat
uppbeat.io/t/mountaineer/refresh
License code: OWHBD74EAQEAGQJK
Create the landing page here: ua-cam.com/video/J1sgVdYf4Aw/v-deo.html
Contents
0:00 - Introduction
0:20 - Setting Up Grid Styles
2:40 - Navigation
6:00 - Hero
9:16 - Strap
10:22 - Icon Feature
12:45 - Media Feature
15:38 - Browser Stacking
17:28 - Reviews
19:43 - Footer
22:03 - Preparing The Prototype
25:00 - Creating Style Guides
25:12 - Creating Prototype Link
26:32 - Conclusion
Figma plugins to have installed
Iconify: www.figma.com/community/plugin/735098390272716381/Iconify
Automatic Style Guides: www.figma.com/community/plugin/838622388628773312/Automatic-Style-Guides
Stay in touch
jgeizerux
dribbble.com/jordangeizer/
jordangeizer.com/
Music from Uppbeat
uppbeat.io/t/mountaineer/refresh
License code: OWHBD74EAQEAGQJK
Переглядів: 111 803
Відео
Mobile App Website Design in Figma - Part 2
Переглядів 4,7 тис.2 роки тому
How to design a website for a mobile application in Figma (Part 2) Part 1: ua-cam.com/video/J1sgVdYf4Aw/v-deo.html Design the app we've featured here: ua-cam.com/video/3cVm6gmORrU/v-deo.html Contents 0:00 - Introduction 0:15 - Icon Grid Section 8:10 - Media Feature Section 17:55 - Reviews Section 30:04 - Footer Section 34:43 - Preparing for Handover 35:55 - Cleaning up 36:10 - Conclusion Figma ...
Mobile App Website Design in Figma - Part 1
Переглядів 10 тис.3 роки тому
How to design a website for a mobile application in Figma (Part 1). Part 2: ua-cam.com/video/UNoz5Ftym4k/v-deo.html Design the app we've featured here: ua-cam.com/video/3cVm6gmORrU/v-deo.html Contents 0:00 Introduction 0:13 Housekeeping 0:40 Colour System 3:00 Type System 6:32 Grid System 7:56 Type Lock Up 9:45 Hero 10:26 Hero Navigation 14:48 Hero CTA 20:06 Hero Background 21:00 Hero Image Moc...
Design a Crypto App in Figma
Переглядів 27 тис.3 роки тому
How to design a cryptocurrency wallet app in Figma Contents 0:00 Introduction 0:20 Housekeeping 0:50 Colour System Figma Plugin: Styler 5:33 Type Scale Wotfard www.atipofoundry.com/fonts/wotfard Readex Pro fonts.google.com/specimen/Readex Pro 9:35 Spacing Scale 12:14 iOS Components 16:07 Application Nav 16:35 Icons Figma Plugin: Iconify Flatten to one layer with CMD E Rename to 'Vector' 19:55 N...
Top 5 Figma Plugins for App Design
Переглядів 2,3 тис.3 роки тому
My top 5 most used Figma plugins for app design. Contents 0:00 Introduction 0:11 Why I Use Arrows 0:52 - 1. Arrow Auto www.figma.com/community/plugin/751007211632768205/Arrow-Auto 1:48 - 2. Contrast www.figma.com/community/plugin/748533339900865323/Contrast 2:12 - 3. Styler www.figma.com/community/plugin/820660579767995949/Styler 2:40 - 4. Instance Finder www.figma.com/community/plugin/74189565...
Top 5 Figma Plugins for Web Design
Переглядів 2,5 тис.3 роки тому
My five most used Figma plugins for web design. Contents 0:00 - Introduction 0:12 - 1. Unsplash (www.figma.com/community/plugin/738454987945972471/Unsplash) 0:51 - 2. Iconify (www.figma.com/community/plugin/735098390272716381/Iconify) 1:28 - 3. Lorem Ipsum (www.figma.com/community/plugin/736000994034548392/Lorem-ipsum) 1:58 - 4. Batch Styler (www.figma.com/community/plugin/818203235789864127/Ba...
Generating Style Guides in Figma Automatically
Переглядів 69 тис.3 роки тому
A quick walkthrough of Figma Plugin, Automatic Style Guides. www.figma.com/community/plugin/838622388628773312 Contents 0:00 Introduction 0:53 Installing the Plugin 1:36 Setting up the File Tutorial on the style layers: ua-cam.com/video/l9LsbCr_2IE/v-deo.html 3:29 Generating a Style Guide 5:18 Exporting to PDF 5:46 Creating Your Own Style Guide 6:31 Renaming and Reconnecting Styles 7:20 Common ...
Animate an Icon in After Effects for Lottie
Переглядів 4,3 тис.3 роки тому
Animate an icon from the Hero Icon library with After Effects - ready for use with Lottie. Animating a Mockup Update Instead of rendering a video, you can use the LottieFiles Figma plugin to render a GIF from your JSON file for use within your Figma prototypes. www.figma.com/community/plugin/809860933081065308 Contents 0:00 - Introduction 0:30 - Preparing Our Hero Icon heroicons.com/ 3:10 - Exp...
Fixing Fonts for Figma
Переглядів 3,5 тис.3 роки тому
How to fix baseline issues in Figma. Contents 0:00 - Introduction 0:45 - Install Apple Font Tool Suite - developer.apple.com/fonts 1:29 - Install FontForge - fontforge.org/en-US/downloads/mac-dl/ 2:11 - Download Test Fonts - klim.co.nz/test-fonts/ 2:54 - Install Fonts 3:04 - Figma's Font Problem 4:57 - Editing Font Metrics - Generate XML: ftxdumperfuser -t hhea -A d - Process XML: ftxdumperfuse...
Create A Figma Plugin
Переглядів 11 тис.3 роки тому
Create a Figma plugin to generate pages in your file. Contents 0:00 - Introduction 0:30 - Creating A New Figma Plugin 1:00 - Install Visual Studio Code (code.visualstudio.com/) 1:15 - Opening the Project in Visual Studio Code 1:30 - Installing Node brew install nvm nvm install node nvm use node 2:10 - NPM Dependencies npm install @figma/plugin-typings npm install typescript npm install webpack ...
Design A Landing Page in Figma
Переглядів 73 тис.3 роки тому
Design a simple, dark landing page in Figma. Quick links: 0:00 - Introduction 0:30 - Text Styles 3:43 - Colour Styles 5:08 - Grid Style 10:58 - Designing the Hero 16:40 - Icon Feature Section 21:50 - Media Feature Section 32:40 - Footer Section 40:35 - Conclusion Stay in touch jgeizerux dribbble.com/jordangeizer/ jordangeizer.com/ Music from Uppbeat: uppbeat.io/t/infraction/ultra...
Thanks
Hello Jordan, I'm stuck at the 13th min, where you duplicated the image, resized and deleted something... been stuck since a long time ...NGL.... could you tell of what you did again?, i use a windows laptop.
Very cool stuff
Cheers Maite! That was really helpful
you saved my day
Thank you so much for this video
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 about the other way around? I mean Convert the Android design to Desktop design?
Bro, I have zero figma experience and just going through this I was able to get my basic home page up using Figma to webflow. Keep up the good work.
At the 10:13 how did you text auto adjust
love from Bangladesh❤❤
Wow, this is incredible! Well done. Thanks for making this plugin!
"command not found: brew" what happened ?
😢😢 it's not working out for me
I learned a lot from this video. thank you so much🙏🙏 it was too fast for me because i am a beginner please do more 🙏
thanks man
Amazing!
Thank you but your speed is too fast for a beginner and you skip to explain some crucial steps. For example how did you reattach instance after adding up texts to h2copy. I have been on your video for the whole week going back and forth to understand where you moved from and where you moved to.
Awesome. If you can have tutorial on componets and frame deep-dive. When to use frame inside frame
not getting the same auto layout options like you and also not getting the fill container option ,, can you tell me what am i doing wrong
at 10:07 how do you make text auto adjust?
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.
Alot of informative video ever
What about adding other elements like icons, button, animation etc
Wonderful time saving stuff
Wow what a time saver! Incredible! Thank you so much for making this!😍🥰😘🤩
Wow what a time saver! Incredible! Thank you so much for making this!
BEST lesson what i find! I've been looking for a lesson like this forever! THANK YOU!
no hablo para nada ingles y aun así me lograste ayudar, eres un crack
Awesome, this actually made my day, been searching for this for long....Thanks
Good one mate, learned a lot about design systems from these videos.
Thank you, your explanation was wonderful.. Can you recommend for me a complete practical course that follows the same steps? I mean designing a full-fledged phone application.
Such an incredible tutorial! I've been faffing about in Figma for close to a year without really knowing what to do. What you've just shown me is going to speed up my designing SO MUCH!! Thank you for sharing this invaluable resource!
What's the reason you duplicating for mobile rather than extending frame to vertical!?
Very thorough tutorial. Thank you. Can you share the figma file, for both the desktop and mobile version? I'd like to study the file. I've followed the video but still have some things to figure out.I watch your every video from Bangladesh
3:36 Just expand the entire window to be full screen man....
This is great! Thank you
Beautiful tutorial
i love this
thank you so much for the tutorial Jordan, super helpful. Question, how did you know the spec of each section on the website. For example, how did you know the height of the header, the section for the icon features, the section for the media feature, and etc. is there a guide for that, or thats more like a visual decision? Thank you!
figma ran into a problem Our Team is looking into it now if refreshing the page doesn't work check our status page for updates I face This many Time Plauase me Solution
Update moustache tags not working for me after changing the color of a main color?
Awesome
Dude, you just made one of the best Figma videos out there. I can't believe this is free, tho. It's filled with a huge amount of concepts aplicable to real industry workflows.
Hey Jordan, what is the use for the cover page, anyone reading this comment and knows the use can also answer me, it was created as a page in the first video but I have not seen it being used.
How fun it is to see a design coming into life, good work brother
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 ?
What is the plugin useful for if you have to create the entire style by hands
Why not go faster just to make it impossible to keep up. And don't explain anything at all while youre going through the use case of Figma. We're not interested how to do it ourselves.
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.