Nick Babich
Nick Babich
  • Видео 167
  • Просмотров 2 046 065
Star rating in Figma
In this tutorial, I will show you how to design an interactive star rating in Figma. We will create a simple component that will allow users to choose a rating from 1 star to 5 stars.
#figmatutorial #figmatips #figma #figmaprototype
Просмотров: 40

Видео

How to code interactive FAQ section using HTML, CSS and JavaScript
Просмотров 432 часа назад
In this tutorial, I will show you how to create a simple FAQ section for your website using HTML & CSS and JavaScript. FAQ section source code (Codepen): codepen.io/babichnick/pen/BaXXEyM #html #css #cssanimation #cssloader
How to create animated circle loading spinner in HTML & CSS
Просмотров 10216 часов назад
In this tutorial, I will show you how to create a simple loading animation (infinite loading spinner) in HTML & CSS. We will define the element and animation rules as well as position the element in the center of a viewport using the Flexbox model. Loading spinner source code (Codepen): codepen.io/babichnick/pen/bGXJzEv #html #css #cssanimation #cssloader
Using Red and Green in Design
Просмотров 106День назад
In this tutorial, I will show how to use red and green colors in user interface design. You will learn the psychological meaning behind both colors, explore popular cases for using colors in UI design and understand how to make your design more accessible for color-blind users. #ui #uidesign #uidesigntutorial
How to measure user experience | Google HEART framework
Просмотров 14014 дней назад
Learn about the Google Heart framework that can be used to measure the user experience of any product. The framework organizes metrics into 5 district categories: Happiness, Engagement, Adoption, Retention, and Task Success. #ux #design #productdesign #metrics
Ready for Dev mark in Figma
Просмотров 283Месяц назад
In this tutorial, I'll review the "ready for dev" mark in Figma. You will learn how to mark design as ready for implementation, separate it from work-in-progress, and compare design versions side by side for visual audit. #figma #figmatutorial #figmatips
Icon design in Figma
Просмотров 2,8 тыс.2 месяца назад
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
Prompt for Midjourney based on image
Просмотров 4282 месяца назад
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
Просмотров 2,4 тыс.3 месяца назад
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
Просмотров 7083 месяца назад
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
Просмотров 2,1 тыс.3 месяца назад
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
Просмотров 2,2 тыс.4 месяца назад
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
Просмотров 9964 месяца назад
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,6 тыс.4 месяца назад
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
Просмотров 3,1 тыс.5 месяцев назад
Corner radius and smoothing in Figma
Page Indicator Animation in Figma
Просмотров 1,4 тыс.6 месяцев назад
Page Indicator Animation in Figma
Export Figma Design To GIF
Просмотров 9 тыс.6 месяцев назад
Export Figma Design To GIF
Eisenhower matrix in product management | How to prioritize tasks effectively
Просмотров 3206 месяцев назад
Eisenhower matrix in product management | How to prioritize tasks effectively
Speed vs quality in product design
Просмотров 2496 месяцев назад
Speed vs quality in product design
Minto Pyramid in product design
Просмотров 3476 месяцев назад
Minto Pyramid in product design
Notification Bell Icon Animation in Figma
Просмотров 3 тыс.8 месяцев назад
Notification Bell Icon Animation in Figma
Responsive layout grid in Figma
Просмотров 21 тыс.8 месяцев назад
Responsive layout grid in Figma
Interactive tooltip in Figma
Просмотров 6 тыс.9 месяцев назад
Interactive tooltip in Figma
Accessibility Testing in Figma
Просмотров 5 тыс.9 месяцев назад
Accessibility Testing in Figma
Scarcity in product design
Просмотров 2909 месяцев назад
Scarcity in product design
Venn Diagram in Figma
Просмотров 1,7 тыс.9 месяцев назад
Venn Diagram in Figma
OKR in product design
Просмотров 1,3 тыс.9 месяцев назад
OKR in product design
Dev Mode in Figma
Просмотров 8 тыс.9 месяцев назад
Dev Mode in Figma
7 Custom GPTs for Product Designers
Просмотров 83110 месяцев назад
7 Custom GPTs for Product Designers
Create custom style in Midjourney
Просмотров 3,3 тыс.10 месяцев назад
Create custom style in Midjourney

Комментарии

  • @isslamhedjaz2026
    @isslamhedjaz2026 4 часа назад

    I needed that and it randomly appears on my feed thank you

  • @milagrosisabel1205
    @milagrosisabel1205 22 часа назад

    Thanks for this video, really helpful

  • @Manisha._.029
    @Manisha._.029 День назад

    Thank you for an easy to understand and to-the-point video. This helped a lot.

  • @arzoogandhi3195
    @arzoogandhi3195 День назад

    Thank you so much for the video, really helpful.

  • @NANyopo
    @NANyopo День назад

    i tried this but it doesnt show in prototype ahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh tasukete!!!

  • @babichnick
    @babichnick День назад

    FAQ section source code (Codepen): codepen.io/babichnick/pen/BaXXEyM

  • @vasilievnaAT
    @vasilievnaAT 2 дня назад

    класс, спасибо! Урок помог создать нужное меню

  • @BabyGlass
    @BabyGlass 2 дня назад

    but when i press play in figma the image doesnt show?

  • @ChetnaRawat-o3v
    @ChetnaRawat-o3v 2 дня назад

    TYSM

  • @ibironkemorawo9
    @ibironkemorawo9 4 дня назад

    This is well detailed and Top-notch. Very straight to the point and educative too, thanks Nick.

  • @mohamedali6866
    @mohamedali6866 4 дня назад

    very clear 👍👍

  • @Nicolas-UserInterface-n4w
    @Nicolas-UserInterface-n4w 5 дней назад

    Thanks for the tutorial.

  • @MayDouelle
    @MayDouelle 5 дней назад

    That's how tutos should be made ahah!! Congrats!!🙌

  • @philipho9050
    @philipho9050 6 дней назад

    God bless you sir

  • @rubmindswithchacha2456
    @rubmindswithchacha2456 7 дней назад

    How am I you going to integrate this in to a design I’m working on

  • @babichnick
    @babichnick 7 дней назад

    Loading animation spinner Codepen: codepen.io/babichnick/pen/bGXJzEv

  • @edenkefale7129
    @edenkefale7129 8 дней назад

    👍👍

  • @JonoafYT
    @JonoafYT 8 дней назад

    From the tutorials i have seen everyone uses the rectangle to get the active variant. You can also use stroke on the autolayout just for the bottom, this also makes it easier to edit if you wanted to change it later

  • @footballafri6409
    @footballafri6409 9 дней назад

    Useful!!!!😊

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

    Excelent tip!!

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

    using Claude because it's my dear grandfather's name

  • @kishorekumarseenivasan
    @kishorekumarseenivasan 11 дней назад

    awesome

  • @MrTheraseus
    @MrTheraseus 14 дней назад

    Hi this is great! how can i make it so different cards have different properties for the flipped card? i can do changes to instances front but when clicked it just goest to the original (for example if I want to change the background color of the backside in one of the instances. Thanks!

  • @HomeeParmar-cp9gx
    @HomeeParmar-cp9gx 16 дней назад

    Smart work 😂😂😂 bro

  • @renpolk
    @renpolk 17 дней назад

    Thank you for this! The only video that isn't overly complicated. I've watched so many videos and none could fully demonstrate how to do this

  • @Divya-s3y
    @Divya-s3y 18 дней назад

    how to you change button size

  • @jeremygl1569
    @jeremygl1569 18 дней назад

    this video is a total waste of time. Nobody makes one radio button. So there is no way to have it as an interaction so that only 1 radio btn can be selected from different options. what an idiotic video

  • @rainbow6wag
    @rainbow6wag 19 дней назад

    привет, что делать, если при открытии одного пункта, его содержимое накладывается поверх следующих?

  • @ЕленаМатвеева-ш6р
    @ЕленаМатвеева-ш6р 19 дней назад

    Thank you

  • @BlazinglyPassionateHuman
    @BlazinglyPassionateHuman 19 дней назад

    Beautiful

  • @winnetouch
    @winnetouch 19 дней назад

    My company bought a Udemy course on Figma. It sucks. You were more concise and eloquent in 3 minutes then the Udemy course was in 20 minutes.

  • @lategrid5369
    @lategrid5369 21 день назад

    Thanks

  • @tchftg0
    @tchftg0 21 день назад

    easy and straight to the point tutorial. Thank you!

  • @NarineVardumyan-i3m
    @NarineVardumyan-i3m 25 дней назад

    It doesn't select the right layers

  • @Wamiltom
    @Wamiltom 26 дней назад

    very nice

  • @syedsufyanpervez7914
    @syedsufyanpervez7914 26 дней назад

    Honestly speaking, this is a useless interaction, solely because the drag works one variant to the other in a continuous drag and has no effect on the subject e.g. showing content scrolling with the bar drag. Respect to the author for putting up the video, my comment is specifically pointing at the interaction and not the creators work.

  • @KevinBEAUDRY-u5e
    @KevinBEAUDRY-u5e 26 дней назад

    Thank you !

  • @ArtiomNeganov
    @ArtiomNeganov 27 дней назад

    But this way you can't change the "done" part width in an instance

  • @Acthpa
    @Acthpa 27 дней назад

    Echoing others here - straight to the point, good insights, thanks!

  • @Abdul-h3j2j
    @Abdul-h3j2j Месяц назад

    Thank you so much

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

    At .22 it suddenly jumped from 2 rectangles to 3 rectangles. How did that happen? Thanks!

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

    It works thanks for the video

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

    tks u very much

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

    Thank you very much. This tutorial was very helpful to my current project✌

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

    Thank you so much for this being trying for over an hour and I got it just watching your video at once

    • @notch_àpple_op
      @notch_àpple_op Месяц назад

      No need to curve manually, just add corner radius to 8. or something

  • @EduardoOliveira-jf1tk
    @EduardoOliveira-jf1tk Месяц назад

    Nice stuff I learned here. Thank you very much! =)

  • @Frederick.Grant.Banting
    @Frederick.Grant.Banting Месяц назад

    Well done

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

    Thank you 👍

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

    TY

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

    I have a problem with this plugin. It doesn't select my text and change it