Jordan Geizer
Jordan Geizer
  • Видео 11
  • Просмотров 287 111
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...
Просмотров: 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...

Комментарии

  • @squidux
    @squidux 10 дней назад

    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 10 дней назад

    At the 10:13 how did you text auto adjust

  • @hasib6798
    @hasib6798 22 дня назад

    love from Bangladesh❤❤

  • @uxaminulbd
    @uxaminulbd Месяц назад

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

  • @hugovan5322
    @hugovan5322 2 месяца назад

    "command not found: brew" what happened ?

  • @sommy506
    @sommy506 2 месяца назад

    😢😢 it's not working out for me

  • @favourdope
    @favourdope 2 месяца назад

    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 2 месяца назад

    thanks man

  • @sabrinandra
    @sabrinandra 3 месяца назад

    Amazing!

  • @official_pupatee
    @official_pupatee 3 месяца назад

    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 3 месяца назад

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

  • @vidhanag.2432
    @vidhanag.2432 3 месяца назад

    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 4 месяца назад

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

  • @emca1597
    @emca1597 4 месяца назад

    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 5 месяцев назад

    Alot of informative video ever

  • @chenaidausi4739
    @chenaidausi4739 5 месяцев назад

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

  • @talhaabbas5765
    @talhaabbas5765 6 месяцев назад

    Wonderful time saving stuff

  • @EPiyushRana
    @EPiyushRana 7 месяцев назад

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

  • @EPiyushRana
    @EPiyushRana 7 месяцев назад

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

  • @vonaxeses3882
    @vonaxeses3882 7 месяцев назад

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

  • @moisesgonzalesaguirre8603
    @moisesgonzalesaguirre8603 7 месяцев назад

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

  • @eximiousy77
    @eximiousy77 7 месяцев назад

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

  • @jagrat16
    @jagrat16 8 месяцев назад

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

  • @islam-hossain
    @islam-hossain 8 месяцев назад

    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 9 месяцев назад

    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 9 месяцев назад

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

  • @rak7gameing337
    @rak7gameing337 9 месяцев назад

    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 10 месяцев назад

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

  • @oduakiestherezekiel
    @oduakiestherezekiel 10 месяцев назад

    This is great! Thank you

  • @oduakiestherezekiel
    @oduakiestherezekiel 10 месяцев назад

    Beautiful tutorial

  • @bobbydev_
    @bobbydev_ 10 месяцев назад

    i love this

  • @xingwei5416
    @xingwei5416 10 месяцев назад

    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 10 месяцев назад

    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 10 месяцев назад

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

  • @ObaUIUX
    @ObaUIUX 11 месяцев назад

    Awesome

  • @krashvash
    @krashvash 11 месяцев назад

    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 11 месяцев назад

    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 11 месяцев назад

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

  • @richard-dante
    @richard-dante 11 месяцев назад

    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.

  • @user-uj1jh3tl5r
    @user-uj1jh3tl5r Год назад

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

    • @zahariaalexandru-gy4bx
      @zahariaalexandru-gy4bx 10 месяцев назад

      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?