Nick Babich
Nick Babich
  • 160
  • 1 813 519
Icon design in Figma
You will learn how to create simple and advanced icons in Figma. You will understand how to size and position icons properly in a frame, make the most of simple tools like geometric objects, and create & use key shapes to craft sophisticated icons. Lastly, you will learn how to export icons from Figma in SVG to use in your project.
#figmatips #figmatutorial #figma
มุมมอง: 879

วีดีโอ

Prompt for Midjourney based on image
มุมมอง 161หลายเดือนก่อน
In this tutorial, I will show how to generate a prompt for Midjourney based on your image upload. I will use Midjourney and ChatGPT to generate prompts for a particular image. #midjourney #midjourneytutorial #midjourneytips
Blur effect in Figma
มุมมอง 1Kหลายเดือนก่อน
In this tutorial, I will show you how to create layers and background blur in Figma. You will learn tips and tricks for selecting the right blur value, preparing layer blur images for your project, and conducting blur tests for the visual hierarchy of your design. #figma #figmatips #figmatutorial
Linear and radial gradient in Figma
มุมมอง 3552 หลายเดือนก่อน
In this tutorial, I will show you how to create linear (colors blend from one to another along a straight line) and radial gradient (colors radiate from a central point outward in a circular pattern) in Figma. You will also learn some useful tricks for creating a smooth transition between colors in a gradient. #figmatutorial #figmatips #figma #figmadesign
Shadows in Figma
มุมมอง 1.2K2 หลายเดือนก่อน
In this tutorial, I will show you how to create drop shadows in Figma. You will learn all the properties of a Drop Shadow that Figma offers: X, Y, Blur, Spread, Color, and Opacity. You will also learn the UX difference between subtle shadows and deep shadows in UI design. Lastly, you will learn how to use drop shadows to improve text legibility and readability. Corner radius and smoothing in Fi...
Interactive 3D Model in Figma Prototype
มุมมอง 9162 หลายเดือนก่อน
In this tutorial, I will show how to add a fully interactive 3D model of any object to your design created in Figma. I will use 3 tools for that: @splinetool for storing 3D model, Figma for UI design and @AnimaApp for creating interactive prototype with embedded 3D model in it. Credits: 3D model of a wooden toy by Ujjwal Chauhan #figmatutorial #figmatips #spline #3d #3dmodeling
Language localization for design mocks in Figma
มุมมอง 6032 หลายเดือนก่อน
In this tutorial, I will show how to do language localization for UI using string variables. You will also learn how to quickly switch between language mode using a simple dropdown right in Figma. #figma #figmatips #figmadesign
Light and dark modes in Figma
มุมมอง 1.1K2 หลายเดือนก่อน
In this tutorial, I will show how to create light and dark UI modes in Figma using color variables. You will also learn how to switch between two color modes dynamically. #figma #figmatutorial #figmatips
Corner radius and smoothing in Figma
มุมมอง 1.9K4 หลายเดือนก่อน
In this tutorial, I will show how to set corner radius for UI elements like frame and rectangle. You will also learn what corner smoothing is and how to choose the right smoothing for iOS. You will see how to choose the correct corner radius for nested UI elements. 01:09 How to choose the right corner radius in web & mobile design 01:21 Default corner radius for Apple iOS 01:36 Changing the cor...
Page Indicator Animation in Figma
มุมมอง 1.1K4 หลายเดือนก่อน
In this tutorial, I will show how to design a simple animated page indicator in Figma. We will create a page indicator using basic Figma objects, turn it into a component, and animate it in Prototype mode. #figma #figmadesign #figmatutorial
Export Figma Design To GIF
มุมมอง 4.6K4 หลายเดือนก่อน
In this tutorial, I will show you how to export any visual design from Figma to a GIF file. This comes in handy when you need to create a demo for stakeholders or add a nice visual to your Dribbble or Behance portfolio. Figma Plugin (TinyImage Compressor): www.figma.com/community/plugin/789009980664807964/tinyimage-compressor #figma #figmadesign #figmaplugins
Eisenhower matrix in product management | How to prioritize tasks effectively
มุมมอง 2855 หลายเดือนก่อน
How to prioritize tasks by importance and urgency? Use the Eisenhower matrix for this. Named after US President Dwight Eisenhower, this tool is especially useful when you have dozens of tasks you need to work on and feel like you're not making good progress. 00:16 How to use the Eisenhower matrix 01:40 Example of using the Eisenhower matrix for product design tasks
Speed vs quality in product design
มุมมอง 2225 หลายเดือนก่อน
Simple technique that will help you to find a trade-off between speed and quality when building your product.
Minto Pyramid in product design
มุมมอง 2985 หลายเดือนก่อน
Minto Pyramid is an effective communication tool to quickly and clearly communicate complex issues to busy people. In this video, I will show you how to use this tool to communicate product design details.
Notification Bell Icon Animation in Figma
มุมมอง 2.3K6 หลายเดือนก่อน
Notification Bell Icon Animation in Figma
Responsive layout grid in Figma
มุมมอง 16K7 หลายเดือนก่อน
Responsive layout grid in Figma
Interactive tooltip in Figma
มุมมอง 4.3K7 หลายเดือนก่อน
Interactive tooltip in Figma
Accessibility Testing in Figma
มุมมอง 4.2K7 หลายเดือนก่อน
Accessibility Testing in Figma
Scarcity in product design
มุมมอง 2637 หลายเดือนก่อน
Scarcity in product design
Venn Diagram in Figma
มุมมอง 1.4K8 หลายเดือนก่อน
Venn Diagram in Figma
OKR in product design
มุมมอง 1.2K8 หลายเดือนก่อน
OKR in product design
Dev Mode in Figma
มุมมอง 8K8 หลายเดือนก่อน
Dev Mode in Figma
7 Custom GPTs for Product Designers
มุมมอง 7788 หลายเดือนก่อน
7 Custom GPTs for Product Designers
Create custom style in Midjourney
มุมมอง 2.8K8 หลายเดือนก่อน
Create custom style in Midjourney
GPT Store is a disaster
มุมมอง 1.2K8 หลายเดือนก่อน
GPT Store is a disaster
Booking.com UX review
มุมมอง 6638 หลายเดือนก่อน
Booking.com UX review
Netflix UX review
มุมมอง 1.9K9 หลายเดือนก่อน
Netflix UX review
Jobs To Be Done (JTBD) in FigJam
มุมมอง 2K9 หลายเดือนก่อน
Jobs To Be Done (JTBD) in FigJam
User Flow Design In FigJam
มุมมอง 13K9 หลายเดือนก่อน
User Flow Design In FigJam
Customer journey mapping in Figjam
มุมมอง 13K9 หลายเดือนก่อน
Customer journey mapping in Figjam

ความคิดเห็น

  • @shubhamsclub9718
    @shubhamsclub9718 4 ชั่วโมงที่ผ่านมา

    Thankyou so much for this tutorial. I liked your teaching style. :)

  • @DoubleTrIpLe-p2q
    @DoubleTrIpLe-p2q 14 ชั่วโมงที่ผ่านมา

    Thx

  • @Nico-zl5oe
    @Nico-zl5oe 2 วันที่ผ่านมา

    Will this include custom transitions / animations you have made? With prototyping

  • @yvoneconcepcion2707
    @yvoneconcepcion2707 4 วันที่ผ่านมา

    u r wasting my time with that editing arrow for dropdown menu lol, worst tutorial

  • @vekanoid
    @vekanoid 4 วันที่ผ่านมา

    Are you aware that your animated arrows rotates in wrong direction for expand/collapse accordion?

  • @kuralaybiehler5638
    @kuralaybiehler5638 5 วันที่ผ่านมา

    THank you!

  • @NoelLeeman
    @NoelLeeman 10 วันที่ผ่านมา

    With Typescales you can also select a text object with your base font and size and it will base the generated system from that. Top tip :)

  • @dancastady8571
    @dancastady8571 11 วันที่ผ่านมา

    This is LIFE GIVING!!! Wow, Figma

  • @xjobiex
    @xjobiex 15 วันที่ผ่านมา

    hard to understand your mic levels are f'd

  • @claudiam.8853
    @claudiam.8853 15 วันที่ผ่านมา

    short and simple - perfect! :)

  • @sangio_davese
    @sangio_davese 16 วันที่ผ่านมา

    Super cool.

  • @Gobutterfingers16
    @Gobutterfingers16 16 วันที่ผ่านมา

    quick and easy to understand, thank you!

  • @sangio_davese
    @sangio_davese 16 วันที่ผ่านมา

    Thank you for this walkthrough. Very clear, straightforward, and best of all super flexible to apply in prototypes.

  • @charljustinedarapisa6758
    @charljustinedarapisa6758 17 วันที่ผ่านมา

    ure the best

  • @mikearthur2431
    @mikearthur2431 18 วันที่ผ่านมา

    Perfect

  • @Hajbibi
    @Hajbibi 18 วันที่ผ่านมา

    Thanks! Was very helpful.

  • @caleb_ngugi
    @caleb_ngugi 19 วันที่ผ่านมา

    👏Thanks! Your video has clarified a lot I didn't understand about IA. The step by step is also very useful as I'm working on a web app project.

  • @mileslegend
    @mileslegend 19 วันที่ผ่านมา

    man work is legit

  • @nilakman
    @nilakman 19 วันที่ผ่านมา

    Thank you Nick ! realy good explanation :)

  • @meerzaighamali9713
    @meerzaighamali9713 19 วันที่ผ่านมา

    this man is going with speed of light, video must be ban

  • @imrannaeem2102
    @imrannaeem2102 20 วันที่ผ่านมา

    its not working,

  • @dhemanth01
    @dhemanth01 20 วันที่ผ่านมา

    Medium link shows different but here different 😂😂😂

  • @bernardremacle8699
    @bernardremacle8699 21 วันที่ผ่านมา

    I remember your name (Nick Babich) from the many and comprehensive articles you wrote in the Adobe Xd reference and community pages.

  • @europa012
    @europa012 22 วันที่ผ่านมา

    Short and concise. Sweet! Just the kind of tutorial I need. Thank you!

  • @Pranjaldarkcoc
    @Pranjaldarkcoc 23 วันที่ผ่านมา

    How this fuc*ing "select" came from ? 4:44

  • @br1580
    @br1580 23 วันที่ผ่านมา

    thank you

  • @shawnh4528
    @shawnh4528 24 วันที่ผ่านมา

    Hi there, I came here from the UX planet post about the guide to designing icons ❤

  • @AaradhyaShukla
    @AaradhyaShukla 28 วันที่ผ่านมา

    amazing so simple and easy!

  • @beyondistrict
    @beyondistrict 28 วันที่ผ่านมา

    As a product designer, what do you think about using a single grid of 12 columns in code for all web, tablet and mobile devices?

  • @realmoha-c5q
    @realmoha-c5q หลายเดือนก่อน

    Bro you saved me , I appreciate what you're doing

  • @ShammahAfolabi-mr7fr
    @ShammahAfolabi-mr7fr หลายเดือนก่อน

    😁

  • @aaron4820
    @aaron4820 หลายเดือนก่อน

    Damn, I really wish you could have the "content" change itself in variant when you click another button with the interaction as if you're firing an event, or have one interaction affect another component, that way you don't have to replicate the same thing over and over, feel redundant, my thinking's probably all geared incorrectly while using this app.

  • @retrogamerdaddy
    @retrogamerdaddy หลายเดือนก่อน

    Is it possible to change text on hover? like can we have different buttons and each one will have some different text on tool tip?

  • @lilliilililliilliiiliilili
    @lilliilililliilliiiliilili หลายเดือนก่อน

    As a beginner in Figma, your video was incredibly helpful to me. I'll definitely keep watching more of your content. Thank you!

  • @Whitewolfblackpanther
    @Whitewolfblackpanther หลายเดือนก่อน

    This was great except for some reason, my hovering isn't working properly. It hovers over 3 numbers at a time? Anyways, I liked the content and video, I did have to pause and keep rewinding several times because I'm new and it moved so quickly! An experienced UX designer would probably know exactly what you're saying. Thank you for helping me! I'll go back and remake this.

  • @dankither2586
    @dankither2586 หลายเดือนก่อน

    Thank you, appreciate the tutorial, but... the music... make it stop! lol

  • @chaitanya5612-k9j
    @chaitanya5612-k9j หลายเดือนก่อน

    This won't work if the instance image is changed...If I change the instance image for both variants while hovering it still animates to main image of component Anyone know how to fix this??

  • @sreehariavikkal8670
    @sreehariavikkal8670 หลายเดือนก่อน

    Wonderful Tutorial!

  • @MariiaSaleck
    @MariiaSaleck หลายเดือนก่อน

    thank you!

  • @MariiaSaleck
    @MariiaSaleck หลายเดือนก่อน

    thank you!

  • @theado3183
    @theado3183 หลายเดือนก่อน

    Super convenient! Thank you!

  • @artis_global
    @artis_global หลายเดือนก่อน

    nice review! 🙂

  • @octbc
    @octbc หลายเดือนก่อน

    Wow! your tutorial is very very concise and easy to understand. Thank you!!

  • @DreamFinch
    @DreamFinch หลายเดือนก่อน

    What did you click for the menu with REMIX MODE to appear??????

  • @rizkywazza
    @rizkywazza หลายเดือนก่อน

    you have no idea how much your video saved my day. thank you so much

  • @henrykmatthew3900
    @henrykmatthew3900 หลายเดือนก่อน

    I want to hover and click. Someone help

  • @chroni
    @chroni หลายเดือนก่อน

    This was the right length and perfect depth of understanding I needed.

  • @asmaarooj6490
    @asmaarooj6490 หลายเดือนก่อน

    Very helpful! Thanks!!!

  • @opsnax1468
    @opsnax1468 หลายเดือนก่อน

    good video love it. brother plz provide me some good free resources to learn uiux each process step by step.

  • @elapt1c
    @elapt1c หลายเดือนก่อน

    i hope they up the amount of messages you get for free, because i really love claude but i dont have a job and cant afford 20$ a month.