Nick Babich
Nick Babich
  • 178
  • 2 115 454
Monochrome to color transition in Figma
In this tutorial, I will show you how to create a transition from black and white to color for your image in Figma. We will do it using Figma native toolkit (saturation for image) and ease out animation.
#figmatutorial #figmatutorials #figmatips #figma
Переглядів: 54

Відео

Text truncation in Figma
Переглядів 582 години тому
In this quick tutorial, I will show you how to properly truncate text in Figma #figmatips #figmatutorials #figmatutorial
Rotating circular text in Figma
Переглядів 864 години тому
In this tutorial, I will show you how to design rotating circular text in Figma. I'll use a plugin called 'Convert text to circle' to get the circular text and native Figma animated properties to rotate it. #figmatutorials #figmatutorial #figmatips #figma
Animated progress bar in Figma
Переглядів 1109 годин тому
In this tutorial, I will show you how to design an animated progress bar with a nice gradient style using the Figma native toolset. You will learn how to use auto layout and create linear gradients and animated transitions in Figma. #figmadesign #figmatutorial #figmatutorials #figma
Animated button in Figma
Переглядів 639 годин тому
In this tutorial, I will show you how to design a hollow button that turns into a checkmark icon on click. We will design a mouse hover state and button click interaction that will turn the button into a status indicator. #figmatutorial #figmatutorials #figma #figmatips
Infinite Loop Image Carousel in Figma
Переглядів 10412 годин тому
In this tutorial, I will show you how to create an auto-scrolling looped image carousel in Figma. You will learn how to simulate 3D effect using simple geometric objects and how to use prototype mode to create a nice animated scrolling experience for users. #figmatutorials #figmatutorials #figmadesign #figma
Bouncing loading animation in Figma
Переглядів 11116 годин тому
In this tutorial, I will show you how to design a bouncing loading animation in Figma using basic geometric shapes and animated effects. You will learn the difference between different animated curves, such as Bouncy, Ease In, and Linear. #figmatips #figmatutorial #figmatutorials #figma
Interactive Pay Button in Figma
Переглядів 15019 годин тому
In this tutorial, I will show you how to design interactive "Pay Now" button in Figma. We will design 3 states for the button-default, processing and success-and use animation transition between the states to make interaction more dynamic. #figmatips #figmatutorial #figmatutorials #figma
Image rotation on mouse hover in Figma
Переглядів 9521 годину тому
In this tutorial, I will show how to design a simple image rotation on mouse hover in Figma. You will learn how to use Figma Prototype mode to create nice visual effects for your design. #figmatips #figmatutorial #figmatutorials #figma
3D button in Figma
Переглядів 176День тому
In this tutorial, I will show you how to design an interactive pseudo-3D button triggered on hover. #figmatips #figmatutorial #figma
Image slider in Figma
Переглядів 44014 днів тому
In this tutorial, I will show how to create an interactive image slider (also known as carousel) in Figma. You will learn how to scale images to fit into content container and learn Figma prototyping basics #figmatutorial #figmaprototype #figma #figmatips
Star rating in Figma
Переглядів 15414 днів тому
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
How to code interactive FAQ section using HTML, CSS and JavaScript
Переглядів 14514 днів тому
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
Переглядів 16121 день тому
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
Переглядів 12921 день тому
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
Переглядів 215Місяць тому
How to measure user experience | Google HEART framework
Ready for Dev mark in Figma
Переглядів 404Місяць тому
Ready for Dev mark in Figma
Icon design in Figma
Переглядів 3,5 тис.3 місяці тому
Icon design in Figma
Prompt for Midjourney based on image
Переглядів 5383 місяці тому
Prompt for Midjourney based on image
Blur effect in Figma
Переглядів 2,8 тис.4 місяці тому
Blur effect in Figma
Linear and radial gradient in Figma
Переглядів 7714 місяці тому
Linear and radial gradient in Figma
Shadows in Figma
Переглядів 2,4 тис.4 місяці тому
Shadows in Figma
Interactive 3D Model in Figma
Переглядів 2,6 тис.4 місяці тому
Interactive 3D Model in Figma
Language localization in Figma
Переглядів 1,1 тис.4 місяці тому
Language localization in Figma
Light and dark theme in Figma
Переглядів 1,7 тис.5 місяців тому
Light and dark theme in Figma
Corner radius and smoothing in Figma
Переглядів 3,5 тис.6 місяців тому
Corner radius and smoothing in Figma
Page Indicator Animation in Figma
Переглядів 1,6 тис.6 місяців тому
Page Indicator Animation in Figma
Export Figma Design To GIF
Переглядів 10 тис.6 місяців тому
Export Figma Design To GIF
Eisenhower matrix in product management | How to prioritize tasks effectively
Переглядів 3287 місяців тому
Eisenhower matrix in product management | How to prioritize tasks effectively
Speed vs quality in product design
Переглядів 2637 місяців тому
Speed vs quality in product design

КОМЕНТАРІ

  • @alanmully589
    @alanmully589 Годину тому

    Very helpful but how do you make it possible to select one of these options?

  • @rubmindswithchacha2456
    @rubmindswithchacha2456 12 годин тому

    What I don’t understand is how do I incorporate it into the app I’m designing

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

    Hello Nick - Great video!, but I have a question, it is possible to have the same result code but not using JavaScript? If yes, could you please guide me? thank you!

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

      Thanks! Yes, its possible to use 'details' HTML tag. Although the section won't look as nice as with the use of JavaScript but it will be the same in terms of functionality. Here is a code sample for you codepen.io/babichnick/pen/MYgeLOP

  • @obito-269
    @obito-269 День тому

    🙏👍

  • @truongbao-cn3uk
    @truongbao-cn3uk День тому

    I did what you said, why didn't it turn around?

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

      Hello, double check that you rotate the group with text, not the frame itself.

    • @truongbao-cn3uk
      @truongbao-cn3uk 19 годин тому

      @@babichnick thank you soo much.

    • @truongbao-cn3uk
      @truongbao-cn3uk 19 годин тому

      @@babichnick I will always support you. Your channel has taught me a lot of good things. I have subscribed and like every video you have made.

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

    How can I edit/blend an image that I uploaded myself? Thank you in advance.

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

      Hello, as far I know Midjourney doesn't allow direct editing of existing photos

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

      @@babichnick Thank you for your reply. I'm trying to edit in Discord, basically combining an image and applying it to another. In short, taking a company logo (a graphic) and attempting to turn it into a metal object. Proving to be difficult, even in remix mode with several prompts.

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

    Hi Nick! Thanks for making this video🙂 Pls explain how did you derive on container width ie.1152, 680 & 320px.

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

      Hello Nikita! The widths of 1152px, 680px, and 320px for a container are derived from responsive design principles and the target screen sizes. These widths align with common design grid systems, such as the 12-column grid in Bootstrap. 1152px allows for a maximum container width for large screens (desktops). 680px is used for medium screens, like tablets in portrait mode and it's optimized for smaller content displays. 320px targets the smallest screens, such as smartphones in portrait orientation.

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

      @babichnick Thanks! for the detailed explanation 😊

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

    Perfect tutorial

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

    Thank you Nick. You made it so simple to understand.

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

    is figmap free?

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

    Hey Nick How am I now able to change the text/answer on the back of a new instance? I have the issue whenever I change the question/text in front, the text in the back is also automatically changed :(

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

    So simple and works nicely! Thanks

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

    How do you add the slider to a page/frame? If I drag the default variant on my page and present the prototype, the page dissapears when clicking the arrows.

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

      Hello, you should drag the component of the slider. In Assets tab (left panel) you will see Local Components. Click on it and you will see your component Slider. Drag and drop this component to the frame where you want to use it.

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

    ❤❤❤❤❤❤❤

  • @officialrishabhsaxena
    @officialrishabhsaxena 9 днів тому

    Nice tutorial

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

    Very educational, however for those of us that are newbies, you speak and move too fast.

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

    thank you so much, straight to the point

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

    super easy made! thanks Nick, keep them coming 🙌

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

    there is any way to apply this to ALL IMAGES IN A CAROUSEL? without the need to create single variant for each enlarged image

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

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

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

    Thanks for this video, really helpful

  • @Manisha._.029
    @Manisha._.029 16 днів тому

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

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

    Thank you so much for the video, really helpful.

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

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

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

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

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

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

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

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

  • @ChetnaRawat-o3v
    @ChetnaRawat-o3v 18 днів тому

    TYSM

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

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

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

    very clear 👍👍

  • @Nicolas-UserInterface-n4w
    @Nicolas-UserInterface-n4w 20 днів тому

    Thanks for the tutorial.

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

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

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

    God bless you sir

  • @rubmindswithchacha2456
    @rubmindswithchacha2456 22 дні тому

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

  • @babichnick
    @babichnick 22 дні тому

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

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

    👍👍

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

    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 24 дні тому

    Useful!!!!😊

  • @franksuarez2937
    @franksuarez2937 25 днів тому

    Excelent tip!!

  • @alldpy1131
    @alldpy1131 26 днів тому

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

  • @kishorekumarseenivasan
    @kishorekumarseenivasan 27 днів тому

    awesome

  • @MrTheraseus
    @MrTheraseus 29 днів тому

    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 Місяць тому

    Smart work 😂😂😂 bro

  • @renpolk
    @renpolk Місяць тому

    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 Місяць тому

    how to you change button size

  • @jeremygl1569
    @jeremygl1569 Місяць тому

    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 Місяць тому

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

  • @Helen_Matveyeva
    @Helen_Matveyeva Місяць тому

    Thank you

  • @BlazinglyPassionateHuman
    @BlazinglyPassionateHuman Місяць тому

    Beautiful

  • @winnetouch
    @winnetouch Місяць тому

    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.