- 91
- 612 152
Chinsk Design
Brazil
Приєднався 21 кві 2021
Welcome to our channel!
We create videos about UI Design, UX Design tips and Figma Tutorials.
It's a pleasure to welcome you to our channel.
Join us for regular design content. Thank you!
We create videos about UI Design, UX Design tips and Figma Tutorials.
It's a pleasure to welcome you to our channel.
Join us for regular design content. Thank you!
Button Click Fill Animation in Figma
Check out my latest tutorial where we dive into creating Button Click Fill Animation in Figma, exploring Figma variants, interactive components and prototype in Figma. Also, you will learn how to create a button click animation in figma, animated button prototype and much more.
Chapters:
00:00 Intro
00:20 Create Button Variants
02:29 Create Button Prototype
Watch my others Figma Interactive Components and Figma Animation Tutorials.
Remember, learning is a continuous process, so don't stop here! Keep practicing, keep experimenting, and most importantly, keep creating. We'll be back with more figma tutorials and quick guides to help you on your ui ux design journey.
Stay tuned for more figma animation tutorials and don't forget to like, subscribe and turn on notifications.
Chapters:
00:00 Intro
00:20 Create Button Variants
02:29 Create Button Prototype
Watch my others Figma Interactive Components and Figma Animation Tutorials.
Remember, learning is a continuous process, so don't stop here! Keep practicing, keep experimenting, and most importantly, keep creating. We'll be back with more figma tutorials and quick guides to help you on your ui ux design journey.
Stay tuned for more figma animation tutorials and don't forget to like, subscribe and turn on notifications.
Переглядів: 543
Відео
Show Hide Password Animation in Figma
Переглядів 7082 місяці тому
Check out my latest tutorial where we dive into creating show hide password animation in Figma, exploring Figma auto layout, variants, interactive components and prototype in Figma. Also, you will learn how to create a password field in figma, animated show hide eye icon in figma, visible invisible password animation and much more. Chapters: 00:00 Intro 00:17 Create Variants 04:18 Create Protot...
Pulsing Loading Animation in Figma
Переглядів 2872 місяці тому
Check out my latest tutorial where we dive into creating Pulsing Loading Animation in Figma, exploring figma variants, interactive components and prototype in figma. Also, you will learn how to create loading animation in figma, ripple effect animation and much more. Chapters: 00:00 Intro 00:13 Pulsing Loading Variants 03:49 Pulsing Loading Prototype Watch my others Figma Interactive Components...
Figma Typing Animation
Переглядів 2543 місяці тому
Check out my latest tutorial where we dive into creating Typing Animation in Figma, exploring figma variants, interactive components and prototype in figma. Also, you will learn how to create figma prototype interactions, how to animate components in figma, create figma animation, figma prototype and much more. Chapters: 00:00 Intro 00:19 Figma Variants Typing Animation 02:35 Figma Prototype Ty...
How to Make Like Thumbs Up Button Animation in Figma - Figma Tutorial
Переглядів 2403 місяці тому
Check out my latest tutorial where we dive into creating Like Thumbs Up Button Animation in Figma, exploring figma variants, interactive components and prototype in figma. Also, you will learn how to create animated thumbs up icon, like button in figma, create figma variants, figma animation, figma prototype and much more. Chapters: 00:00 Intro 00:21 Create Like Frame 00:52 Create Thumbs Up Ico...
Input Text Field with Label Animation | Figma Interactive Components
Переглядів 5224 місяці тому
Check out my latest tutorial where we dive into creating Input Text Field with Label Animation in Figma, exploring figma variants, interactive components and prototype in figma. Also, you will learn how to create animated input text field in figma, create figma variants, figma animation, figma prototype and much more. Chapters: 00:00 Intro 00:23 Create Input Text Field with Label Variants 06:04...
Loading Payment Processing Animation | Figma Interactive Components
Переглядів 2514 місяці тому
Check out my latest tutorial where we dive into creating Payment Processing Animation in Figma, exploring figma variables, interactive components and prototype in figma. Also, you will learn how to create animated Payment Processing in figma, create figma variants, figma animation and much more. Chapters: 00:00 Intro 00:15 Create Variants 02:33 Create Prototype Watch my others Figma Interactive...
Loading Text Animation with Jumping Ball | Figma Interactive Components
Переглядів 2535 місяців тому
Check out my latest tutorial where we dive into creating Loading Text Animation with Jumping Ball in Figma, exploring figma variables, figma interactive components and prototype in figma. Also, you will learn how to create animated text in figma, loading variants, figma animation and much more. Chapters: 00:00 Intro 00:20 Create Loading Variants 04:39 Create Loading Prototype Watch my others Fi...
Shake Button Animation | Figma Interactive Components
Переглядів 2,7 тис.5 місяців тому
Check out my latest tutorial where we dive into creating Shake Button Animation in Figma, exploring figma variables, interactive components and prototype in figma. Also, you will learn how to create animated button in figma, button variants, figma animation and much more. Chapters: 00:00 Intro 00:18 Create Button Variants 03:06 Create Button Prototype Watch my others Figma Interactive Component...
Toggle Switch Button Animation in Figma
Переглядів 3086 місяців тому
In this tutorial, I will show you how to make Toggle Switch Button Animation in Figma using Micro Interactions in Figma with Figma Interactive Components. Also, you will learn how to use Frames, Create Component, Variants, Prototype and Smart Animate. In this video I show you: 00:00 Intro 00:16 Create Toggle Switch Button Variants 04:20 Prototype Toggle Switch Button Watch my others Figma Inter...
Loading Dots Animation | Figma Tutorial
Переглядів 7856 місяців тому
Check out my latest tutorial where we dive into creating Loading Dots Animation in Figma, exploring figma variants, interactive components and prototype in figma. Also, you will learn how to create animated loading dots from scratch in figma, figma animation and much more. Chapters: 00:00 Intro 00:17 Create Frame 00:40 Create Ellipses 01:31 Create Variants 03:56 Prototype Watch my others Figma ...
Checkbox Animation in Figma
Переглядів 3996 місяців тому
Check out my latest tutorial where we dive into creating checkbox animation in figma, exploring figma variables, interactive components and prototype in figma. Also, you will learn how to create animated mutiple checkbox in figma, checkbox variants, figma animation and much more. Chapters: 00:00 Intro 00:25 Create Frame 00:52 Corner Radius 01:05 Add Stroke 01:20 Add Check Icon 01:49 Create Comp...
Radio Button with Hover Effect | Figma Animation
Переглядів 4707 місяців тому
Check out my latest tutorial where we dive into creating radio buttons, exploring figma variables, hover effect, and prototype in Figma. Also, you will learn how to make a single choice radio button, create radio button variant, figma hovering animation, figma interactive components and much more. Chapters: 00:00 Intro 00:29 Create radio button 02:24 How to create radio button variant 07:15 How...
Snake Loading Animation | Figma Tutorial
Переглядів 7757 місяців тому
In this tutorial, I will show you how to make Snake Loading Animation using Micro Interactions in Figma with Figma Interactive Components. Also, you will learn how to use Frames, Create Component, Figma Variants, Figma Prototype and Figma Smart Animate. In this video I show you: 00:00 Intro 00:17 UI Design 02:23 Create Variants 05:18 Prototype Watch my others Figma Interactive Components tutori...
Figma Number Animation | Micro Interactions
Переглядів 2,2 тис.8 місяців тому
In this tutorial, I will show you how to make Number Animation using Micro Interactions in Figma with Figma Interactive Components. Also, you will learn how to use Frames, Create Component, Create Figma Variants, Figma Prototype and Smart Animate. In this video I show you: 00:00 Intro 00:14 Create Variants 03:34 Prototype Watch my others Figma Interactive Components tutorials: Animated Navigati...
Like Button Animation | Figma Micro Interactions
Переглядів 3728 місяців тому
Like Button Animation | Figma Micro Interactions
Arrow Button Animation | Figma Micro Interactions
Переглядів 2,2 тис.8 місяців тому
Arrow Button Animation | Figma Micro Interactions
Image Carousel in Figma | Micro Interactions
Переглядів 5199 місяців тому
Image Carousel in Figma | Micro Interactions
Loading Animation in Figma | Interactive Components
Переглядів 4989 місяців тому
Loading Animation in Figma | Interactive Components
How to create Multiple Checkbox in Figma | Interactive Components
Переглядів 79610 місяців тому
How to create Multiple Checkbox in Figma | Interactive Components
Counter Animation in Figma | Micro Interactions
Переглядів 69511 місяців тому
Counter Animation in Figma | Micro Interactions
Mobile Carousel Animation | Figma Micro Interactions
Переглядів 1,2 тис.11 місяців тому
Mobile Carousel Animation | Figma Micro Interactions
Animated Gradient Button | Figma Micro Interactions
Переглядів 704Рік тому
Animated Gradient Button | Figma Micro Interactions
Button Sound Wave Animation | Figma Micro Interactions
Переглядів 466Рік тому
Button Sound Wave Animation | Figma Micro Interactions
Add Product to Bag Animation | Figma Micro Interactions
Переглядів 1,5 тис.Рік тому
Add Product to Bag Animation | Figma Micro Interactions
Seesaw Loading Animation | Micro Interactions in Figma
Переглядів 696Рік тому
Seesaw Loading Animation | Micro Interactions in Figma
Button Animation | Figma Micro Interactions
Переглядів 759Рік тому
Button Animation | Figma Micro Interactions
Add Item Animation | Figma Micro Interactions
Переглядів 1,2 тис.Рік тому
Add Item Animation | Figma Micro Interactions
Loading Animation | Figma Micro Interactions
Переглядів 696Рік тому
Loading Animation | Figma Micro Interactions
Would love to know how to best translate and redline something like this for devs
Its not working properly
Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked 😃
Thank you so much ❤ 8:51
Hi!😃 I’m glad to help! Thank you so much for watching! Have a great week!
in case i add to cart 2 products and then in the cart frame i delete one of the products. how can i make the animation that the cart goes from 2 to 1?
Hello! I love the work you do. I want to ask a question, how can I make a high-quality screen recording of the prototype I designed?
Can I ask what if I want the number to be adding up?
hola, cómo haces para que la respuesta del acordeón de arriba no se mezcle con la pregunta de abajo?
Please sir thank you for ypou videos they're all helpful, please try to add write up so we can see what you selected like numbers you use thank you.
Your videos are so detailed. Thanks for all you do. Kindly see if you can help by letting us know some of the keyboard short cuts you use. This would help also. Thanks
👏🏽👏🏽👏🏽
Hi!😃 Thank you so much for the feedback! Have a great week!
hi, why is rectangle there?
Can someone help, mine is doesn't work
I've click the R button, rotate, still doesn't work
Hi! 😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
I tried this with an element in my prototype but when the state changes the variant shows far from original place of the variant one, why is this happening and how to fix it?
4 seconds for a 1.48 Megabyte file would be horrifying
😂😂😂 In the 2000s I already waited hours for a 5 Megabyte file 😅😅😅
Espectacular, gracias por el aporte
For some reason my cart starts to animate before clicking the button. Any idea what I’m doing wrong?
Hi!😃 Check if you used the “On Tap” animation in the first interaction instead of “On Delay”. Let me know if it worked.
Thank you Love how detailed the tutorial is
Hi!😃 Thank you so much for the feedback! Have a great week!
Using a mask for the first quarter ensures the component to be more flexible. The problem happens when you are asked to use a transparent or semi-transparent background
moço, queria falar que não funcionou
I just had to log in to thank you, OMG thanks soooooo much for you tutorial
Hi!😃 Thank you so much for the feedback!I’m glad to hear this. Comments like this motivate me to keep posting more tutorials.🤩 What do you want to learn next? Have a great weekend!
'promosm' 😀
Hi from Peru ! Thanks ! great tutorial !
Hi!😃 Thank you so much for the feedback! Have a great weekend!
thanks for explaining! wish there was a download link for the working file.
Not so many videos showing how to do that, many thanks to you!
Hi!😃 Thank you so much for the feedback! Have a great week!
Not working in windows
Hi! Try restarting the prototype mode
Thank you 🙏🏾
Hi! 😃 I’m glad to help! Thank you for watching! Have a great weekend!
Nice video
Hi!😃 Thank you so much for the feedback! Have a great week!
I like the way you explain Thanks a lot, but I dont know how to add this "Heart" into an image, I mean the "Heart" is within a frame I could not add it into image or some bar without the frame white color of the "Heart"
Hi😃 thank you very much for the feedback! You can remove the fill of the frame. Let me know if it worked.
@@ChinskDesign Oh😅😅😅😅 yes it worked 😍😍😍😍thank you so much
😅 I’m glad to help! Have a great week!
Many Thanks 💗💗💗@@ChinskDesign
Why when I press review? The circle doesn't turn for me.
I'm facing the same problem. The circle isn't rotating.
Hi! 😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
irritating watching you dawdle around the screen with your mouse, would really benefit some words and also not using hot keys we can't see!
The first tutorial that actually works for me. Thank you! 😍
Hi!😃 I’m glad to help!🤩 Thank you so much for the feedback! What do you want to learn next? Have a great weekend!
Cool !
Hi! 😃 Thank you so much for the feedback! Have a great week!
Less but important ❤❤ subscribed
Hi!😃 Thank you so much for the feedback and your subscription!❤️ I will continue sharing more tutorials here on the channel! Have a great week!
Wow!!! Thank you
Thank you so much for the feedback!😃 Have a great weekend!
WOOW!!! Greate!
Thank you so much for the feedback!🤩 Have a great week!
EASY AND TO THE POINT
Great video! For an interactive keyboard, I understand how to use conditional logic and set variables for the input text field. But how do I get the cursor to move to the right after I type the first letter? I've tried applying that text value to nothing in mode 1, but it still stays put & it won't allow me to connect that variable to that nothing value.
Hi!😃 Thank you very much for the feedback!🤩 I haven't tried this yet, but you can try adding the letter together with the “|” key to simulate the cursor. For example “a|”, “b|” etc. Let me know if it worked.
bro how do you seperate that group of colours on design board ?
Hi!😃 I create a square with the rectangle tool, add round corners and white stroke. Then I fill it with the color.
Helpful Video :)
Hi!😃 Thank you so much for the feedback!I’m glad to help. Have a great week!
It's not working, I followed all the steps but not working T^T
Thank you!
hello, how do you drag the number? I cannot drag the number to the other side..
Hi Natalia!😃 Check if you followed the tutorial step by step. Also try restarting the prototype. Let me know if it worked.
where can i fidn that triple arrow asset?
Awesome
Thank you so much for the feedback!🤩 Have a great weekend!
@@ChinskDesign I have uploaded my work, learned through your channel on my behance page....it's in my profile description.
it doesnt work
Hi! 😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
it kind of pulses but doesn't spin
Hi!😃 Try restarting the prototype mode and follow step by step. Let me know if it worked.
Thanks Good Tutorial
Hi!😃 Thank you so much for the feedback!
did not worked, the circle is just static
Hi!😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
How did you make the pasting happen downwards? Mine is happening rightwards.
good
Thank you so much for the feedback!😃 Have a great weekend!