- 178
- 2 115 454
Nick Babich
Приєднався 1 вер 2022
A channel about User Experience and User Interface Design
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
#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
Corner radius and smoothing in Figma
Переглядів 3,5 тис.6 місяців тому
Corner radius and smoothing in Figma
Eisenhower matrix in product management | How to prioritize tasks effectively
Переглядів 3287 місяців тому
Eisenhower matrix in product management | How to prioritize tasks effectively
Very helpful but how do you make it possible to select one of these options?
What I don’t understand is how do I incorporate it into the app I’m designing
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!
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
🙏👍
I did what you said, why didn't it turn around?
Hello, double check that you rotate the group with text, not the frame itself.
@@babichnick thank you soo much.
@@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.
How can I edit/blend an image that I uploaded myself? Thank you in advance.
Hello, as far I know Midjourney doesn't allow direct editing of existing photos
@@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.
Hi Nick! Thanks for making this video🙂 Pls explain how did you derive on container width ie.1152, 680 & 320px.
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.
@babichnick Thanks! for the detailed explanation 😊
Perfect tutorial
Thank you Nick. You made it so simple to understand.
is figmap free?
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 :(
So simple and works nicely! Thanks
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.
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.
❤❤❤❤❤❤❤
Nice tutorial
Very educational, however for those of us that are newbies, you speak and move too fast.
thank you so much, straight to the point
super easy made! thanks Nick, keep them coming 🙌
there is any way to apply this to ALL IMAGES IN A CAROUSEL? without the need to create single variant for each enlarged image
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.