- 160
- 1 813 519
Nick Babich
เข้าร่วมเมื่อ 1 ก.ย. 2022
A channel about User Experience and User Interface Design
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
#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
Thankyou so much for this tutorial. I liked your teaching style. :)
Thx
Will this include custom transitions / animations you have made? With prototyping
u r wasting my time with that editing arrow for dropdown menu lol, worst tutorial
Are you aware that your animated arrows rotates in wrong direction for expand/collapse accordion?
THank you!
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 :)
This is LIFE GIVING!!! Wow, Figma
hard to understand your mic levels are f'd
short and simple - perfect! :)
Super cool.
quick and easy to understand, thank you!
Thank you for this walkthrough. Very clear, straightforward, and best of all super flexible to apply in prototypes.
ure the best
Perfect
Thanks! Was very helpful.
👏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.
man work is legit
Thank you Nick ! realy good explanation :)
this man is going with speed of light, video must be ban
its not working,
Medium link shows different but here different 😂😂😂
I remember your name (Nick Babich) from the many and comprehensive articles you wrote in the Adobe Xd reference and community pages.
Short and concise. Sweet! Just the kind of tutorial I need. Thank you!
How this fuc*ing "select" came from ? 4:44
thank you
Hi there, I came here from the UX planet post about the guide to designing icons ❤
So did I!😉
amazing so simple and easy!
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?
Bro you saved me , I appreciate what you're doing
😁
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.
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?
As a beginner in Figma, your video was incredibly helpful to me. I'll definitely keep watching more of your content. Thank you!
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.
Thank you, appreciate the tutorial, but... the music... make it stop! lol
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??
Wonderful Tutorial!
thank you!
thank you!
Super convenient! Thank you!
nice review! 🙂
Wow! your tutorial is very very concise and easy to understand. Thank you!!
What did you click for the menu with REMIX MODE to appear??????
/settings
you have no idea how much your video saved my day. thank you so much
I want to hover and click. Someone help
This was the right length and perfect depth of understanding I needed.
Very helpful! Thanks!!!
good video love it. brother plz provide me some good free resources to learn uiux each process step by step.
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.