Jordan Geizer
Jordan Geizer
  • 11
  • 318 731
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
Переглядів: 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...

КОМЕНТАРІ

  • @adriennehines5845
    @adriennehines5845 3 дні тому

    Thanks

  • @afonjafaith3602
    @afonjafaith3602 24 дні тому

    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.

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

    Very cool stuff

  • @AvneeshYadav-xh2cq
    @AvneeshYadav-xh2cq 2 місяці тому

    Cheers Maite! That was really helpful

  • @learning.games5257
    @learning.games5257 3 місяці тому

    you saved my day

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

    Thank you so much for this video

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

    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?

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

    what about the other way around? I mean Convert the Android design to Desktop design?

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

    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.

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

    At the 10:13 how did you text auto adjust

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

    love from Bangladesh❤❤

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

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

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

    "command not found: brew" what happened ?

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

    😢😢 it's not working out for me

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

    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 🙏

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

    thanks man

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

    Amazing!

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

    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 7 місяців тому

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

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

    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 8 місяців тому

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

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

    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 9 місяців тому

    Alot of informative video ever

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

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

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

    Wonderful time saving stuff

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

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

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

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

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

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

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

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

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

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

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

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

  • @islam-hossain
    @islam-hossain Рік тому

    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 Рік тому

    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 Рік тому

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

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

    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 Рік тому

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

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

    This is great! Thank you

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

    Beautiful tutorial

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

    i love this

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

    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 Рік тому

    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 Рік тому

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

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

    Awesome

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

    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.

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

    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.

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

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

  • @richard-dante
    @richard-dante Рік тому

    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 Рік тому

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

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

    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.

  • @RozennRoger-x6d
    @RozennRoger-x6d Рік тому

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

    • @zahariaalexandru-gy4bx
      @zahariaalexandru-gy4bx Рік тому

      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.