![Jordan Geizer](/img/default-banner.jpg)
- Видео 11
- Просмотров 287 111
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: ruclips.net/video/J1sgVdYf4Aw/видео.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.co...
Create the landing page here: ruclips.net/video/J1sgVdYf4Aw/видео.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.co...
Просмотров: 99 036
Видео
Mobile App Website Design in Figma - Part 2
Просмотров 4,4 тыс.2 года назад
How to design a website for a mobile application in Figma (Part 2) Part 1: ruclips.net/video/J1sgVdYf4Aw/видео.html Design the app we've featured here: ruclips.net/video/3cVm6gmORrU/видео.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 Figm...
Mobile App Website Design in Figma - Part 1
Просмотров 10 тыс.2 года назад
How to design a website for a mobile application in Figma (Part 1). Part 2: ruclips.net/video/UNoz5Ftym4k/видео.html Design the app we've featured here: ruclips.net/video/3cVm6gmORrU/видео.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 M...
Design a Crypto App in Figma
Просмотров 23 тыс.2 года назад
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,1 тыс.2 года назад
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,4 тыс.2 года назад
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
Просмотров 62 тыс.2 года назад
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: ruclips.net/video/l9LsbCr_2IE/видео.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,1 тыс.2 года назад
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,3 тыс.2 года назад
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
Просмотров 10 тыс.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
Просмотров 67 тыс.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...
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.
Hi Jordan, You make a good tutor:. Really learned a lot through this tutorial. Question though: why is the graph component not centered on the screen?
Thanks a lot for sharing mate. This was really useful especially creating design systems and components
What does "command + enter" do, when you do this on the Text? Btw awesome video, thank you!
wow, bro, you are an excellent mentor, I watched this tutorial in 40 minutes, and now I will start again for practice, thanks bro. We want more Figma tutorials please please, please
Amazing insights gathered right there.. You're an awesome educator!
Great job. Thank you very soo much. 🎉
Please keep posting like this. Learned a lot.
At 0:55 what do you mean by setting vertical rhythm? Can you explain what you did there?