Udayraj Sathe
Udayraj Sathe
  • 21
  • 433 901
Recreating Illustration — Figma Vector Tutorial — Part 3 — 📎With Practice File
Learn to design illustrations in Figma using simple Vectors tools and boolean operations. Figma is an extremely powerful vector design tool. You can follow this video to learn how to illustrate in Figma.
Link to practice file
www.figma.com/community/file/989250857681305156/Advanced-Vector-Tutorial-by-Udayraj-Sathe
Figma Vector Tutorial - Part 1 - Vector Shapes, Boolean operations
ua-cam.com/video/THV3B0awjV4/v-deo.html
Figma Vector Tutorial - Part 2 - Icon design in Figma
ua-cam.com/video/rlforAQadFU/v-deo.html
Vijay Varma's Illustration library
illlustrations.co/
Figma is my personal favorite Design Tool. It's one of the fastest-growing design tools right now. That's why I am creating a complete course on this to help new designers which will cover the Basics and Expert features of Figma.
If you're a beginner to Figma or planning to switch to Figma from Sketch/Adobe XD, don't forget to subscribe to this channel and hit the bell icon.
-----------------------------------------------
ABOUT ME
I am Udayraj, and I’ve created this channel to share the things I learned in the last 5 years of my career. On this channel, I’ll share Figma Tutorials, Adobe XD tutorials, Various Prototyping Tools & lots of design tips.
I am a UX Designer with 5+ years of experience. I have worked with Startups as well as Fortune 500 companies in various domains such as - Healthcare, E-commerce, Logistics/Supply Chain, Infotainment, Mobile Gaming & E-Learning.
Please subscribe and say hi in the comments or connect with me on social media :)
-----------------------------------------------
SOCIAL
Personal Website: www.udayrajsathe.com/
LinkedIn: www.linkedin.com/in/udayrajsathe
Instagram: udayraj.sathe
Twitter: udayrajsathe
-----------------------------------------------
#figma #design #tutorial #ui #ux
Переглядів: 2 736

Відео

Designing icons - Figma Vector Tutorial - Part 2 - 📎 With Practice File
Переглядів 5 тис.3 роки тому
Learn to design icons in Figma using simple Vectors. Figma can be used for iconography. It's an extremely powerful vector design tool. Here I have shown my process of creating icons. Link to practice file www.figma.com/community/file/989250857681305156/Advanced-Vector-Tutorial-by-Udayraj-Sathe Figma Vector Tutorial - Part 1 - Vector Shapes, Boolean, Flatten vs Outline ua-cam.com/video/THV3B0awj...
Shapes, Boolean, Flatten vs Outline - Figma Vector Tutorial - Part 1
Переглядів 11 тис.3 роки тому
Mastering vector design in Figma is easy. Learn to use Rectangle, Line, Ellipse, Polygon, and Star shapes. Learn how to use boolean operations, Nested boolean groups to create complex vector shapes. Finally, discover the difference between Flatten and outline stroke. Link to Practice file - www.figma.com/community/file/989250857681305156/Advanced-Vector-Tutorial Part-1-&-2 Figma Styles Tutorial...
Figma Interactive Components Tutorial - 15 Examples 📎 With Practice File
Переглядів 21 тис.3 роки тому
In this Figma tutorial, Learn Interactive components with practical Mobile and Web Design Examples. Figma just launched its biggest update ever. This is like Component states in Adobe XD. Timestamps are added below the links. Link to Practice File - www.figma.com/community/file/948292820072016890/Interactive-Components-w/-UA-cam-Tutorial Figma Beta Signup - docs.google.com/forms/d/e/1FAIpQLSctE...
Figma Parallax Text Animation Using Smart Animate - 📎 With Practice File
Переглядів 11 тис.3 роки тому
Learn this cool Parallax Outline Text Animation using just Smart Animate in this Figma Animation Tutorial. Download Practice File - www.figma.com/community/file/937997870051538337/Parallax-Outline-Text-Animation-w/-UA-cam-Tutorial Timestamps - 0:00 Intro 0:31 Animation Breakdown 1:16 Practice File Link - Tutorial Begins Here 9:02 Final Animation Special Thanks to Aristide Benoist for sharing it...
Confetti Figma Animation using Lottie & Smart Animate - 📎 With Practice File
Переглядів 33 тис.3 роки тому
Learn to use Animated GIF files to create Confetti - Figma Button Animation using Lottie Plugin & Smart Animate. Practice File www.figma.com/community/file/923830083281342180/Confetti-Animation-w/-UA-cam-Tutorial Aaron's Dribbble Shot- dribbble.com/shots/10992700 Button LottieFiles Website link- lottiefiles.com/ Playlist for Free and most complete Figma Course ua-cam.com/play/PL-erl8HrUz4tRGAU1...
Prototyping Anchor Link / Scroll To Position - 📎 With Practice File
Переглядів 41 тис.3 роки тому
We now have Anchor Link as New Prototype Action in Figma's December update. Watch this Figma Tutorial to add 'Scroll To' Interactions or 'Anchor Link' Interactions to your designs. Here's a link to Practice File- www.figma.com/community/file/919353340841181691/Anchor-Link-w/-UA-cam-Tutorial Figma's Official Playground File- www.figma.com/community/file/918189250907220365/Figma-Scroll-to-Playgro...
Mastering New Figma Auto Layout - 15+ Examples 📎 With Practice File
Переглядів 28 тис.3 роки тому
In this Figma tutorial, Learn all the basics & New Features of the new Auto Layout Figma update from November 2020. Learn with 15 Examples and Practice File. Learn to Create Auto Layout Buttons, Lists, Tabs, Forms, Alerts, Calendar, Cards, Responsive design, Client Logos & testimonials Section. 📎 Practice File link- www.figma.com/community/file/915339795040977120/New-Auto-Layout-w/-UA-cam-Tutor...
Image Accordion Menu - Figma Animation using new Auto Layout & Smart Animate
Переглядів 7 тис.3 роки тому
Figma Animation Tutorial. Horizontal Accordion style Image Menu Website Animation. This Animation uses the latest Auto Layout Update (November 2020) and Smart Animate. Prototyping Tutorial Link- ua-cam.com/video/rUIhP66a2l0/v-deo.html Playlist for Free and most complete Figma Course ua-cam.com/play/PL-erl8HrUz4tRGAU16Nr-o3IUQ5WR82JB.html Figma is my personal favorite Design Tool. It's one of th...
Figma Variants Tutorial - Now Design 10x Faster - 📎 With Practice File
Переглядів 8 тис.3 роки тому
'Component States' like Feature is now in Figma as Variants. Watch this Figma Variants tutorial to uncover the True Potential of this November 2020 update. Now learn to use Figma Components like a PRO. Link to Practice Variants File - www.figma.com/community/file/910872250173862884/Try-Variants-w/-UA-cam-Tutorial Timestamps - 0:00 Intro 0:58 Instance Swapping - Figma October Update 1:34 Creatin...
Figma Parallax Image Animation Using Smart Animate - 📎 With Practice File
Переглядів 67 тис.4 роки тому
Learn Parallax Image and Scroll animation tutorial in Figma using Smart Animate and a little bit of Photo Editing. It's very easy to create animations and micro-interactions in Figma. Link to Figma File www.figma.com/community/file/894229815956029720/Figma-Parallax-Animation-Practice-File Timestamps - 0:00 Intro 1:03 Removing Background 1:38 Parallax Image Animation 5:30 Parallax Scrolling Figm...
Page Indicator Bounce Effect - Figma Animation Tutorial using Smart Animate
Переглядів 17 тис.4 роки тому
Learn to animate Pagination micro-interaction in Figma using Smart Animate (XD's Auto Animate alternative in Figma). Follow this series to learn advanced animations in Figma. ua-cam.com/play/PL-erl8HrUz4v3GGcQRUoV-6-Xz4uDc06x.html Inspiration Design on Dribbble - dribbble.com/shots/6858533-Pagination Playlist for Free and most complete Figma Course ua-cam.com/play/PL-erl8HrUz4tRGAU16Nr-o3IUQ5WR...
Counter & Slider - Number animation in Figma using Smart Animate
Переглядів 42 тис.4 роки тому
Learn to create Number animation in Figma for Counters/Stepper, Slider, and Loading screens using Smart animate (Tap & Drag) - Using updated features in 2020. Timestamps - 0:00 Intro 0:25 Counter Animation (Multiple Screens) 2:09 Counter Animation (One Screen overlay) 4:45 Slider Animation Prototyping Tutorial - ua-cam.com/video/rUIhP66a2l0/v-deo.html Figma is my personal favorite Design Tool. ...
Prototype in Figma Tutorial - All Triggers & Transitions - 📎 With Practice File
Переглядів 63 тис.4 роки тому
In this Figma Prototyping Tutorial, learn all triggers such as Tap, Drag, Time, Mouse Hover, Pressed, Mouse Enter, Mouse Leave, Touch Down & Touch up, etc. with practical examples. Link to Figma file for practice www.figma.com/community/file/880438643197199866 Timestamps - 0:00 Intro 0:40 Prototype Basics 2:20 Animations / Transitions Section 4:57 Smart Animate 6:24 Time Trigger Prototype Examp...
Figma Components Tutorial - Using instances, Overrides, Swapping + Bonus hack
Переглядів 5 тис.4 роки тому
In this Figma Tutorial, Learn to create Components, Nesting Components, Using Instances & Overrides. Get practical tips & hacks to use this feature to the fullest. This video covers August 2020 updates. Timestamps - 0:00 Intro 0:45 Components Basics 01:55 Using Instances & Overrides 03:27 Organise Components in groups 04:26 Nested Components 05:10 Bonus Hack 06:45 Swapping Components Playlist f...
Figma Color, Text & Effect Styles - Create, organise & publish
Переглядів 3,2 тис.4 роки тому
Figma Color, Text & Effect Styles - Create, organise & publish
Figma Auto Layout Tutorial - Button, Alerts, List, Calendar & Cards [OLD]
Переглядів 9 тис.4 роки тому
Figma Auto Layout Tutorial - Button, Alerts, List, Calendar & Cards [OLD]
Responsive Design Tutorial in Figma - Free Figma Course 2020 - Ep 3
Переглядів 21 тис.4 роки тому
Responsive Design Tutorial in Figma - Free Figma Course 2020 - Ep 3
Mastering Figma frames - Learn concepts with examples
Переглядів 6 тис.4 роки тому
Mastering Figma frames - Learn concepts with examples
Figma Introduction Tutorial for Beginners - A step by step guide
Переглядів 7 тис.4 роки тому
Figma Introduction Tutorial for Beginners - A step by step guide
3 Ways To Create Pixel Perfect Designs - Figma Tips & Tricks Series
Переглядів 26 тис.4 роки тому
3 Ways To Create Pixel Perfect Designs - Figma Tips & Tricks Series

КОМЕНТАРІ

  • @RaghadMahmoud-v8v
    @RaghadMahmoud-v8v 19 днів тому

    انت رائع

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

    I have created 2 frames for light and dark modes. Inside these frames are my screens. How do i preview the screens since they are child frames?

  • @SamuelYau-x3r
    @SamuelYau-x3r 2 місяці тому

    top work my man thank you

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

    For me the Hamburger menu isnt showing options where I can scroll to.

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

    thank you for giving this files🥰🥰🥰

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

    Hi bro , please make a video for dropdowns

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

    hi, i created an accordion as shown above, but when i place it in my website layout, the page doesn't scroll any further in the prototype. its like its a separate flow or something. could you plz guide?

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

    Adobe Xd or Figma? And why

  • @Alikhan-xm1xq
    @Alikhan-xm1xq 6 місяців тому

    Damn boy this is so good!!!

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

    Thank you for the explanation. But I have problem please, I am not getting the animation part when I prototype. Also the subtitle and title are not giving the same animation as yours, please help.

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

    Brilliant ❤

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

    how do you flatten a boolean group to a single shape so we can export a clean SVG?

  • @NaySouza-f7t
    @NaySouza-f7t 10 місяців тому

    Thank you so much for this video!!!!

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

    thanks a lot for making us understand the basics of prototyping uday, kudos to you 👏

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

    Thanks! it really solves my problem for my wireframe!

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

    how do i resize the images once we make the duplicate of 5? im having trouble

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

    thanks my man

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

    Really good and professional video content :)

  • @Jennie-ot1mz
    @Jennie-ot1mz Рік тому

    Thanks!

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

    Easy and Amazing. Thanks for sharing.

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

    Brilliant

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

    nice!

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

    how to increase the stroke size of the outline icon? please clarify

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

    Thanks for your tutorial! I'm wondering for the last part of the tutorial if the outline one would be the version we draw our icons.

  • @katdale-b2d
    @katdale-b2d Рік тому

    Thank you so much!!!!! I was trying to figure out how to do the Tap & Hold interaction for two days now !!! You're a lifesaver!!! <3

  • @imca-b-10rajwanijatishmano4

    Thank you so much! Amazing examples💯

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

    wow this was so clever of you

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

    Need more tutorials from you sir...

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

    THE BEST!!

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

    Great Udayraj Hope you will do other illustrations like that in Figma

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

    For the counter component when I try it the numbers keep moving lower to the bottom. So 0 starts in the middle, then 1 gets lower 2 a little bit lower then 3 is a the bottom of the component I've tried see why this is happening but can't find a reason Anyone else have this problem?

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

    Superb Bro loved it

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

    This was great, thank you

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

    thanks for the tutorials friend. you are a great help!

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

    Hi Udayraj, nice example. Thanks for sharing. I Wondering how can we give the same 'Anchor Option' functionality to the other page. Assume, we have all segregated content on the other page and give hyperlinks to a particular section from the homepage.

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

      I was looking for the same issue here... Until now, I think is not possible to link to a section on another page... If someone knows how to do this I would appreciate it a LOT!

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

    hi. couldn't understand the horizontal and vertical scrolling @15.00. new to figma, were you having components/ elements additional to the screen ?

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

    hey, can you also cover how the selected menu item also changes state to give user an indication of where they r in the navigation menu along with the page scroll

  • @AK-eg4ho
    @AK-eg4ho Рік тому

    in search of gold, i got diamond one.... thanks bro for this all type.. in one shot...🙌🤲❤

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

    @udayrajsathe you have broken down the subject very well and explained it with clarity! How and when to use the Auto layout is more important than explaining what it is and what it does. Kudos for this tutorial!

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

    Awesome, thank u sir 💖

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

    Helpful video

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

    14:24 This part simply didn't work for me at all. the buttons were responsive, but the text vanish on the clip content. Tried everything

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

    Amazing tutorial! Unfortunatly figma chances all the time, so take a bit more time to figure where is everything

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

    Excellent Work.

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

    Thank you so much! You are fantastic!

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

    Can I know what app you use in the video to temporarily store the file in between drag and drop action?

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

    Thank you so much!!!! You are amazing sir!

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

    excelente!!!

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

    this type of explanation is what is needed on youtube, well done friend.

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

    Thank you