Jordan Geizer
Jordan Geizer
  • 11
  • 274 232
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
Переглядів: 94 541

Відео

Mobile App Website Design in Figma - Part 2
Переглядів 4,3 тис.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
Переглядів 9 тис.2 роки тому
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
Переглядів 21 тис.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
Переглядів 60 тис.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: 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 тис.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,2 тис.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 тис.2 роки тому
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
Переглядів 65 тис.2 роки тому
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...

КОМЕНТАРІ

  • @uxaminulbd
    @uxaminulbd День тому

    Wow, this is incredible! Well done. Thanks for making this plugin!

  • @hugovan5322
    @hugovan5322 21 день тому

    "command not found: brew" what happened ?

  • @sommy506
    @sommy506 21 день тому

    😢😢 it's not working out for me

  • @favourdope
    @favourdope 29 днів тому

    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 🙏

  • @agbajiochayi3411
    @agbajiochayi3411 Місяць тому

    thanks man

  • @sabrinandra
    @sabrinandra Місяць тому

    Amazing!

  • @official_pupatee
    @official_pupatee Місяць тому

    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.

  • @agharajubin7027
    @agharajubin7027 Місяць тому

    Awesome. If you can have tutorial on componets and frame deep-dive. When to use frame inside frame

  • @vidhanag.2432
    @vidhanag.2432 2 місяці тому

    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

  • @wilsonzhou5327
    @wilsonzhou5327 2 місяці тому

    at 10:07 how do you make text auto adjust?

  • @emca1597
    @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.

  • @abdulhamidkhan1953
    @abdulhamidkhan1953 3 місяці тому

    Alot of informative video ever

  • @chenaidausi4739
    @chenaidausi4739 4 місяці тому

    What about adding other elements like icons, button, animation etc

  • @talhaabbas5765
    @talhaabbas5765 5 місяців тому

    Wonderful time saving stuff

  • @EPiyushRana
    @EPiyushRana 5 місяців тому

    Wow what a time saver! Incredible! Thank you so much for making this!😍🥰😘🤩

  • @EPiyushRana
    @EPiyushRana 5 місяців тому

    Wow what a time saver! Incredible! Thank you so much for making this!

  • @vonaxeses3882
    @vonaxeses3882 5 місяців тому

    BEST lesson what i find! I've been looking for a lesson like this forever! THANK YOU!

  • @moisesgonzalesaguirre8603
    @moisesgonzalesaguirre8603 5 місяців тому

    no hablo para nada ingles y aun así me lograste ayudar, eres un crack

  • @eximiousy77
    @eximiousy77 6 місяців тому

    Awesome, this actually made my day, been searching for this for long....Thanks

  • @jagrat16
    @jagrat16 6 місяців тому

    Good one mate, learned a lot about design systems from these videos.

  • @islam-hossain
    @islam-hossain 7 місяців тому

    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.

  • @whaletaildigital
    @whaletaildigital 7 місяців тому

    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!

  • @Prithviraj-sj7op
    @Prithviraj-sj7op 7 місяців тому

    What's the reason you duplicating for mobile rather than extending frame to vertical!?

  • @rak7gameing337
    @rak7gameing337 7 місяців тому

    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

  • @DanTraianRoman
    @DanTraianRoman 8 місяців тому

    3:36 Just expand the entire window to be full screen man....

  • @oduakiestherezekiel
    @oduakiestherezekiel 8 місяців тому

    This is great! Thank you

  • @oduakiestherezekiel
    @oduakiestherezekiel 8 місяців тому

    Beautiful tutorial

  • @bobbydev_
    @bobbydev_ 8 місяців тому

    i love this

  • @xingwei5416
    @xingwei5416 8 місяців тому

    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!

  • @prakashdesai5114
    @prakashdesai5114 8 місяців тому

    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

  • @harunjonuzi
    @harunjonuzi 9 місяців тому

    Update moustache tags not working for me after changing the color of a main color?

  • @ObaUIUX
    @ObaUIUX 9 місяців тому

    Awesome

  • @krashvash
    @krashvash 9 місяців тому

    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.

  • @user-lo6un4hk5e
    @user-lo6un4hk5e 10 місяців тому

    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.

  • @user-lo6un4hk5e
    @user-lo6un4hk5e 10 місяців тому

    How fun it is to see a design coming into life, good work brother

  • @richard-dante
    @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 ?

  • @fredpourlesintimes
    @fredpourlesintimes 10 місяців тому

    What is the plugin useful for if you have to create the entire style by hands

  • @KP_XRP
    @KP_XRP 11 місяців тому

    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.

  • @user-uj1jh3tl5r
    @user-uj1jh3tl5r 11 місяців тому

    How it works if desktop typefaces are way too big for mobile ? What are the best "rules" here ?

    • @zahariaalexandru-gy4bx
      @zahariaalexandru-gy4bx 8 місяців тому

      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.

  • @nancyabuga1727
    @nancyabuga1727 Рік тому

    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?

  • @johnkiama2788
    @johnkiama2788 Рік тому

    Thanks a lot for sharing mate. This was really useful especially creating design systems and components

  • @crisagazzola8423
    @crisagazzola8423 Рік тому

    What does "command + enter" do, when you do this on the Text? Btw awesome video, thank you!

  • @salaudiinahmmad568
    @salaudiinahmmad568 Рік тому

    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

  • @nancyabuga1727
    @nancyabuga1727 Рік тому

    Amazing insights gathered right there.. You're an awesome educator!

  • @gemstonesagate
    @gemstonesagate Рік тому

    Great job. Thank you very soo much. 🎉

  • @MARKSMANGAMINGisLIVE
    @MARKSMANGAMINGisLIVE Рік тому

    Please keep posting like this. Learned a lot.

  • @untangle_mind
    @untangle_mind Рік тому

    At 0:55 what do you mean by setting vertical rhythm? Can you explain what you did there?

  • @JamilHussain110
    @JamilHussain110 Рік тому

    This might helpful for average & beginners for sure, I Hope You will continue UI/UX ahead (Thanks) 🥰🙏

  • @Lost2060
    @Lost2060 Рік тому

    This probably the highest quality of web design I've seen in youtube. Most tutorial rush through things and focus on the features of figma. Thank you very much, kinda shocking that there are not much views! Just curious, is this the level of details that you would go to deliver a project to client or you would do more refining? I want to know what consider as a top-notch design.

  • @christianmagill3829
    @christianmagill3829 Рік тому

    Love these tutorials. I hope you have plans to make some more.