- Видео 167
- Просмотров 2 046 065
Nick Babich
Добавлен 1 сен 2022
A channel about User Experience and User Interface Design
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
#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
Eisenhower matrix in product management | How to prioritize tasks effectively
Просмотров 3206 месяцев назад
Eisenhower matrix in product management | How to prioritize tasks effectively
Notification Bell Icon Animation in Figma
Просмотров 3 тыс.8 месяцев назад
Notification Bell Icon Animation 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
I needed that and it randomly appears on my feed thank you
Thanks for this video, really helpful
Thank you for an easy to understand and to-the-point video. This helped a lot.
Thank you so much for the video, really helpful.
i tried this but it doesnt show in prototype ahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh tasukete!!!
FAQ section source code (Codepen): codepen.io/babichnick/pen/BaXXEyM
класс, спасибо! Урок помог создать нужное меню
but when i press play in figma the image doesnt show?
TYSM
This is well detailed and Top-notch. Very straight to the point and educative too, thanks Nick.
very clear 👍👍
Thanks for the tutorial.
That's how tutos should be made ahah!! Congrats!!🙌
God bless you sir
How am I you going to integrate this in to a design I’m working on
Loading animation spinner Codepen: codepen.io/babichnick/pen/bGXJzEv
👍👍
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
Useful!!!!😊
Excelent tip!!
using Claude because it's my dear grandfather's name
awesome
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!
Smart work 😂😂😂 bro
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
how to you change button size
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
привет, что делать, если при открытии одного пункта, его содержимое накладывается поверх следующих?
Thank you
Beautiful
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.
Thanks
easy and straight to the point tutorial. Thank you!
It doesn't select the right layers
very nice
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.
Thank you !
But this way you can't change the "done" part width in an instance
Echoing others here - straight to the point, good insights, thanks!
Thank you so much
At .22 it suddenly jumped from 2 rectangles to 3 rectangles. How did that happen? Thanks!
It works thanks for the video
tks u very much
Thank you very much. This tutorial was very helpful to my current project✌
Thank you so much for this being trying for over an hour and I got it just watching your video at once
No need to curve manually, just add corner radius to 8. or something
Nice stuff I learned here. Thank you very much! =)
Well done
Thank you 👍
TY
I have a problem with this plugin. It doesn't select my text and change it