UIX Design Academy
UIX Design Academy
  • 187
  • 2 874 717
Mastering Figma - Fitness App UI Design Tutorial
Learn figma ui ux design tutorial to create fitness app design using auto layout, visual colors, advanced typography scales for Designing a User-Friendly Mobile App Interface in Figma.
This figma tutorial is for beginners, how to become master in figma.
Mockplus Cloud, the best InVision alternative, is a great online platform for prototype, design and collaboration. You can use it from the link below:
- Mockplus cloud: www.mockplus.com/mockplus-vs-invision?hmsr=UIXUniversity
- One-month FREE license, redeem here: bit.ly/3JZQvgK
-------------
Link mentioned in video:
ua-cam.com/video/M7IBKztZDQQ/v-deo.html
-------------
✅ Figma Download : psxid.figma.com/z2wz3bjjbrdi
-------------
00:00 Fitness App Intro
00:14 Mockplus cloud
04:50 Learn Figma Design
09:45 How to create gradient
12:30 Figma Plugin Blobs
15:30 Image adjustment & scalling in figma
18:15 UI faces - free AI avatars figma plugin
21:25 Flaticons plugin
23:30 Creating responsive card using figma autolayout
-------------
💜 Support me: BUY ME A COFFEE: www.buymeacoffee.com/uixdesign
-------------
⬇️ Source File DOWNLOAD:
-------------
🧑🏽‍💻 Most Useful Tools Links:
👉🏾 FigJam AI: psxid.figma.com/q2w0mzgr7pi8-pc46ii
👉 Webflow: webflow.partnerlinks.io/nz6ljxn7vydv
👉🏾 Framer: bit.ly/3vNQA3u
🎁 promo code: FREE 3 months (partner25proyearly)
-------------
🌴 Resources:
Figma Community: www.figma.com/@uixdesign
Dribbble: dribbble.com/uixdesign-me
-------------
Let's CONNECT on social media and say Hi!!
uixdesign.me
web. uixdesign.me
uixdesign_uiux
www.tiktok.com/@uixdesign
-------------
I would be very happy 🙂 If you decided to Subscribe:
bit.ly/3So60Ei
Переглядів: 2 509

Відео

Figma Typography Scale for UI & Web Design - Masterclass for Beginners
Переглядів 1,9 тис.Місяць тому
In this figma design system course, today I’ll create responsive typography scale for ui & web design from basic to advance techniques. This ultimate figma masterclass for beginners to learn typography scale, design system breakdowns for fonts sizes, text style naming & responsive scaling with step by step tutorial for figma users. After watching this comprehensive guide for type scale tutorial...
Daily UI Design Challenge Day - 10 | Social Share Design
Переглядів 2 тис.2 місяці тому
In this daily ui design challenge day - 10 you will learn how to make ui design in mobile. You can also watch complete 100 days design challenge series from daily ui design challenge day - 01. This 100 days series is complete figma course for beginners & best platform to learn ui ux design or how to practice ui ux design. Also I used Unsplash plugin for images/photos. 🧑🏽‍💻 What to WATCH Next 👀👇...
Bento Grid Figma Tutorial - Responsive Design 2024
Переглядів 3,2 тис.3 місяці тому
In this Bento grid figma tutorial you will learn how to create responsive bento grid design. I’ll make bento grid layout or bento grid portfolio to use this bento grid style for website design, Wordpress, html & css & Webflow. This bento grid generator is helpful to create instagram style post with responsive design trend 2024. 🧑🏽‍💻 What to WATCH Next 👀👇🏾 Website design: ua-cam.com/video/VoP-ZP...
Figma Beginners Tutorial UI/UX Design | Day 09 | Music Player Design
Переглядів 3,5 тис.3 місяці тому
Figma Beginners Tutorial UI/UX Design | Day 09 | Music Player Design
Make Your Website Design Fully Responsive | Figma Tutorial
Переглядів 32 тис.4 місяці тому
Make Your Website Design Fully Responsive | Figma Tutorial
Daily UI Design Challenge | Day - 08 | 404 Page Design
Переглядів 2,2 тис.4 місяці тому
Daily UI Design Challenge | Day - 08 | 404 Page Design
Figma Web Design Course 2024 | Food Landing Page UI Design
Переглядів 31 тис.4 місяці тому
Figma Web Design Course 2024 | Food Landing Page UI Design
Figma Daily UI Design Challenge | Day 07 | Settings Page Design
Переглядів 1,7 тис.4 місяці тому
Figma Daily UI Design Challenge | Day 07 | Settings Page Design
Daily UI Design Challenge | Day - 06 | User Profile Design
Переглядів 2,6 тис.4 місяці тому
Daily UI Design Challenge | Day - 06 | User Profile Design
Daily UI Design Challenge Day - 05 | App Icon Design
Переглядів 1,9 тис.4 місяці тому
Daily UI Design Challenge Day - 05 | App Icon Design
Daily UI Design Challenge Day - 04 | Calculator Design
Переглядів 2,6 тис.4 місяці тому
Daily UI Design Challenge Day - 04 | Calculator Design
Website Design in Figma | Daily UI Design Challenge | Day 3 Landing Page
Переглядів 10 тис.4 місяці тому
Website Design in Figma | Daily UI Design Challenge | Day 3 Landing Page
Figma App UI Design Tutorial | Food Mobile App Design | UX/UI
Переглядів 9 тис.5 місяців тому
Figma App UI Design Tutorial | Food Mobile App Design | UX/UI
Daily UI Design Challenge Day - 02 | Credit Card Checkout Design
Переглядів 4,1 тис.5 місяців тому
Daily UI Design Challenge Day - 02 | Credit Card Checkout Design
How to Make Perfect Drop Shadow in Figma | Figma Tutorial
Переглядів 8225 місяців тому
How to Make Perfect Drop Shadow in Figma | Figma Tutorial
Daily UI Design Challenge Day - 01 | SignUp Design
Переглядів 3 тис.5 місяців тому
Daily UI Design Challenge Day - 01 | SignUp Design
Figma Tutorial for Beginners 2024 | App UI/UX Design in Figma
Переглядів 9 тис.6 місяців тому
Figma Tutorial for Beginners 2024 | App UI/UX Design in Figma
UI/UX Design in Figma - Full Course Mobile App Design
Переглядів 20 тис.6 місяців тому
UI/UX Design in Figma - Full Course Mobile App Design
Web Design Figma Course - Website Design Tutorial for Beginners
Переглядів 5 тис.7 місяців тому
Web Design Figma Course - Website Design Tutorial for Beginners
Web Design in Figma | Tesla Landing page UI Design | Figma Tutorial
Переглядів 1,8 тис.7 місяців тому
Web Design in Figma | Tesla Landing page UI Design | Figma Tutorial
Apple's Website Design in Figma | Figma Tutorial
Переглядів 3,5 тис.8 місяців тому
Apple's Website Design in Figma | Figma Tutorial
Card Swipes or Carousel Animation Using Components in Figma
Переглядів 9 тис.8 місяців тому
Card Swipes or Carousel Animation Using Components in Figma
Design Stunning Mobile App Interfaces & UX/UI Tutorial
Переглядів 1,4 тис.8 місяців тому
Design Stunning Mobile App Interfaces & UX/UI Tutorial
UX/UI Design - App Design Tutorial (Design, Prototype)
Переглядів 3,1 тис.8 місяців тому
UX/UI Design - App Design Tutorial (Design, Prototype)
Horizontal and Vertical Scroll in Figma | Scrolling Figma Tutorial
Переглядів 3 тис.8 місяців тому
Horizontal and Vertical Scroll in Figma | Scrolling Figma Tutorial
Creating a Modern Maintenance App UI Design in Adobe XD
Переглядів 2,6 тис.9 місяців тому
Creating a Modern Maintenance App UI Design in Adobe XD
Mastering App UI/UX Design & Prototype - Figma Tutorial
Переглядів 9 тис.9 місяців тому
Mastering App UI/UX Design & Prototype - Figma Tutorial
Figma UI Design Tutorial. Animated Color Picker Slider
Переглядів 1,9 тис.9 місяців тому
Figma UI Design Tutorial. Animated Color Picker Slider
Mobile App Design in Figma - UI/UX Design & Prototype
Переглядів 2 тис.9 місяців тому
Mobile App Design in Figma - UI/UX Design & Prototype

КОМЕНТАРІ

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

    Helped a lot!

  • @MathewDotcom
    @MathewDotcom 2 дні тому

    ❤❤❤❤❤

  • @sabasaba2772
    @sabasaba2772 2 дні тому

    Please create landing page in figma a complete detail tutorial.

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

    I love this but i can t downolad the source file is not found plz healp

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

    Hi! Thank you very much for your time making this tutorial. I have technical question... how can I enable the measurement while moving objects around the frame? I know that I can use "alt" while using windows, but it duplicates the object, is there another way I can do this??

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

    I have one doubt, hero section does not contain fill container option. Only container section have it. Then, how did you done fill container in header screen hero section.

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

    Why the Heck you are talking so slow man? I have increased my Computer volume then I could listen to you? Very Bad Experience.

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

      no one complaint this, this is definitely fault in your computer, you should check it or replace it 😝

  • @_WhatsUp_bro_
    @_WhatsUp_bro_ 4 дні тому

    Bro... Ek video banao... Jisme app ko run karne k lye kitne log kam karte hai & kon kon kis pisition me kya kam karta hai.... Please 🙏🙏🙏

    • @uixDesignAcademy
      @uixDesignAcademy 4 дні тому

      Usually designer do UI/UX design for an app and then developer will develop the app to upload on stores.

  • @hasnain846
    @hasnain846 5 днів тому

    beautiful. please tell me which software you use to make this?

    • @uixDesignAcademy
      @uixDesignAcademy 4 дні тому

      Figma download here: psxid.figma.com/z2wz3bjjbrdi

  • @KrishtrishbAlti
    @KrishtrishbAlti 6 днів тому

    Hey I had a question in my mind that if I design a website using figma then how can I use these designs in my website. Which platforms to use and how. Please give steps

    • @uixDesignAcademy
      @uixDesignAcademy 4 дні тому

      you can use no code tools like Webflow or framer for website to functional this figma design, or also you can develop the website through code it itself & use these figma design.

  • @john123wiqiwiw8
    @john123wiqiwiw8 6 днів тому

    Amazing!!!!

  • @AfrinNeshat-cl6hl
    @AfrinNeshat-cl6hl 6 днів тому

    3. What graphical elements do you use above the image in your hero section?

  • @falconn1410
    @falconn1410 7 днів тому

    No sound

    • @uixDesignAcademy
      @uixDesignAcademy 6 днів тому

      Yes, you can watch this, it has sound : ua-cam.com/video/VoP-ZPJTepI/v-deo.html

    • @falconn1410
      @falconn1410 6 днів тому

      @@uixDesignAcademy Thank you 👍

  • @ChristineZhang-xf6iv
    @ChristineZhang-xf6iv 9 днів тому

    :10:04

  • @Multi_tutorial.Pakistan
    @Multi_tutorial.Pakistan 9 днів тому

    Share full video please

    • @uixDesignAcademy
      @uixDesignAcademy 6 днів тому

      Watch full video: ua-cam.com/video/tcJlO0-lf74/v-deo.html

  • @AnkushSingh-rs9mq
    @AnkushSingh-rs9mq 10 днів тому

    Do you make these paper yourself?

    • @uixDesignAcademy
      @uixDesignAcademy 6 днів тому

      yes, you can look phone mockup & print it on paper.

  • @nainamahapatra5696
    @nainamahapatra5696 10 днів тому

    Can you tell me plz when I create wireframe in more pages i created one by one or in on page addition screen

    • @uixDesignAcademy
      @uixDesignAcademy 10 днів тому

      you can add frames so it will add new screen & keep going on 😍

  • @aamirlatif1928
    @aamirlatif1928 11 днів тому

    edition App name

  • @bambangkembang9654
    @bambangkembang9654 11 днів тому

    What are the steps for learning UI design for beginners?

    • @uixDesignAcademy
      @uixDesignAcademy 10 днів тому

      Start watching tutorials & courses and then practicing to learn UI design 🙂

  • @GAMING_PRO346
    @GAMING_PRO346 11 днів тому

    Please app name

    • @uixDesignAcademy
      @uixDesignAcademy 11 днів тому

      Maintenance app, watch full tutorial: ua-cam.com/video/tcJlO0-lf74/v-deo.html Download Figma: psxid.figma.com/z2wz3bjjbrdi

  • @mehrabhasansajeeb
    @mehrabhasansajeeb 11 днів тому

    Why roundness you use 99 even you say 100%? May i know? Thanks

    • @uixDesignAcademy
      @uixDesignAcademy 11 днів тому

      There is no logic, 99 works 100% so it's easy to type like 2 digits instead of 3. you can use 100, I hope my answer helps you 🙂

    • @mehrabhasansajeeb
      @mehrabhasansajeeb 11 днів тому

      @@uixDesignAcademy thanks for your kind reply

  • @Tashmimanam
    @Tashmimanam 11 днів тому

    Love you videos 😁🤩

  • @sarad3666
    @sarad3666 11 днів тому

    Cool 😎

  • @funnymakerboy4199
    @funnymakerboy4199 12 днів тому

    😅 Let me ask question . My coding is nothing special, I just know a little bit, the rest I don't understand. Can I make my career only on UI UX base? Please reply.😑

    • @uixDesignAcademy
      @uixDesignAcademy 11 днів тому

      Yes of course, you can start with ui ux design and then once become an expert, then you can also use no code tool for dev work 😍

    • @funnymakerboy4199
      @funnymakerboy4199 11 днів тому

      @@uixDesignAcademy 🙏🏻

  • @Tashmimanam
    @Tashmimanam 12 днів тому

    the design is great...no.... it's.... PERFECT

  • @GAMING_PRO346
    @GAMING_PRO346 12 днів тому

    Please app name 🙏🏻

    • @uixDesignAcademy
      @uixDesignAcademy 11 днів тому

      Download Figma: psxid.figma.com/z2wz3bjjbrdi Watch this video: ua-cam.com/video/bOYrSCSPeo0/v-deo.html

  • @jaykaralkar
    @jaykaralkar 12 днів тому

    how did you turn the hero sections image grounp in one image?

    • @uixDesignAcademy
      @uixDesignAcademy 11 днів тому

      the image to make it group cmd+G so it will get group & then you can apply auto layout.

  • @user-bs1si3iw8e
    @user-bs1si3iw8e 13 днів тому

    Hallo, saya tidak bisa mendownload asset/komponen. Dimana saya bisa download file nya ?

  • @Cherry-uj7or
    @Cherry-uj7or 14 днів тому

    Sir I tried in my mobile but it's not working. Could you please give me solution

    • @uixDesignAcademy
      @uixDesignAcademy 14 днів тому

      Please watch this complete tutorial: ua-cam.com/video/tcJlO0-lf74/v-deo.html

    • @Cherry-uj7or
      @Cherry-uj7or 14 днів тому

      @@uixDesignAcademyThank you sir

  • @BulbaTaras95
    @BulbaTaras95 14 днів тому

    Коасивый дизайн! Обязательно повторю

  • @TuhinaBez-cr1md
    @TuhinaBez-cr1md 15 днів тому

    That's actually very cool!

  • @shafiqdesigns
    @shafiqdesigns 15 днів тому

    Great! Love it

  • @Soz_Facts
    @Soz_Facts 16 днів тому

    One's its done then no undo

  • @jaishreeKrishna854
    @jaishreeKrishna854 16 днів тому

    Sir mujhe bhi karna ux designer ka course fees kitne hai 😊

    • @uixDesignAcademy
      @uixDesignAcademy 14 днів тому

      I'm working on it, once done, ill let all you know, you can keep stay tuned 🙂

  • @jaykaralkar
    @jaykaralkar 16 днів тому

    23:15 what happens if we resize the component?

    • @uixDesignAcademy
      @uixDesignAcademy 13 днів тому

      here I have design two status of the component with normal & selected, you can resize it.

    • @jaykaralkar
      @jaykaralkar 12 днів тому

      @@uixDesignAcademy but my doubt is when we click the resize button, what does actually happen?

  • @BrunaMarzarotto
    @BrunaMarzarotto 17 днів тому

    Thank you for share this video! It really helped me :)

  • @kayleighlang83
    @kayleighlang83 17 днів тому

    This is an amazing concept. Would you mind if I got the source file for education purposes?

    • @uixDesignAcademy
      @uixDesignAcademy 16 днів тому

      Thank you for your interest, the source has been removed 🙁

    • @kayleighlang83
      @kayleighlang83 4 дні тому

      @@uixDesignAcademy thanks so much! did you receive your images from pexels?

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

      Yes, you can use pexels & unsplash 🙂

  • @sashaprecious663
    @sashaprecious663 19 днів тому

    Please who’s willing to teach me around Abuja Nigeria. It has always been my passion but I need a mentor. I’m loyal for this please

    • @uixDesignAcademy
      @uixDesignAcademy 19 днів тому

      Thank for your interest, my course is coming for ui ux design and starting online classes, it will benefit you 🙂,

    • @sashaprecious663
      @sashaprecious663 19 днів тому

      @@uixDesignAcademy I’m willing and will be waiting

  • @mithumishti6631
    @mithumishti6631 20 днів тому

    Great video... I learn so much!!! But i am having a bit problem with my line height.. It’s been auto with 120% and when i put your numbers they don’t seem to work right.. They become too small.. What should i do?? I put other things just as you say.. And it is working like a charm... And also is there any way to get lessons from you?? I know you put very valuable time in here! Which is too good to be true.. I just want i lil guide line.. Like start to finish.. I did took a class about figma in skillshare. But let me tell you i learn wayy too many things from your video.. Feeling blessed just by finding your channel.. What should i do!? Can you give me any suggestions?

    • @uixDesignAcademy
      @uixDesignAcademy 18 днів тому

      Thank you for your interest in our channel, I'm working on course and also planing to start online classes so you can benefit from it, also you can contact me through insta, so we can discuss the issue you are facing. I hope that will sounds good to you😍

  • @sandhiyav2191
    @sandhiyav2191 20 днів тому

    Very very useful thank you so much

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

    Sir verbs kaise sikhna hai vo bhi batana aap

    • @uixDesignAcademy
      @uixDesignAcademy 20 днів тому

      you can watch & follow my latest tutorials so you will learn everything 😍

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

    Bas aap start karo course

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

    Hello sir 50 days practice karungi

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

    Cool!! 😍, btw, what's image picker u used?

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

      I use UI Faces figma plugin for photos & pexels for images.

  • @Coolworld977.
    @Coolworld977. 22 дні тому

    Good

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

    kindly assist...I want to ask many questions coz I have many issues about this video.. plz answer me

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

    how to learn web design?

    • @uixDesignAcademy
      @uixDesignAcademy 23 дні тому

      Please watch this tutorial, It will help you to learn web design: ua-cam.com/video/VoP-ZPJTepI/v-deo.html

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

    Wow...your design is very nice..how about the admin panel? Do you also design it? Because the person who will own this app must have its management panel

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

      Yes I can do design on demand also but I charge for that to do personal project 😝

  • @curiousYT.
    @curiousYT. 25 днів тому

    Can u plz tell me how to add those messages and profile icons in figma

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

      you an watch this tutorial, so you will learn form it: ua-cam.com/video/12R8GC_un_w/v-deo.html

  • @QuyNguyen-ri2ol
    @QuyNguyen-ri2ol 27 днів тому

    thank