- 97
- 664 154
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!
How to Animate a Sign Up Screen Checkbox and Enable Button for Mobile App | Figma Tutorial
In this Figma tutorial, we will teach you how to create an interactive checkbox that enables a button when the user agrees to the terms and privacy policy. Watch as we guide you through animating this feature in a minimalist sign up screen, perfect for mobile apps.
You will learn:
How to design a checkbox interaction using Figma, how to animate a button changing from disabled (gray) to enabled (black) and best practices for creating user-friendly sign up forms.
Chapters
00:00 Intro
00:25 Creating Checkbox
02:11 Creating Agree to the Terms and Privacy Policy Design
03:42 Creating Button with Auto Layout in Figma
05:28 Creating Checkbox Animation in Figma
06:02 Button Color Transition from Disabled to Enabled
06:18 Prototype
This tutorial is ideal for UI/UX designers looking to add interactive elements to their designs. Follow along and elevate your design skills today!
Ready to level up your UI/UX design skills?
Don’t forget to hit the like button, subscribe for more tutorials, and click the bell icon to stay updated with our latest videos!
Check out our other tutorials:
Minimalist Login Screen: th-cam.com/video/D142potCsaM/w-d-xo.html
Minimalist Sign Up Screen: th-cam.com/video/Fl_3fPhHbB8/w-d-xo.html
You will learn:
How to design a checkbox interaction using Figma, how to animate a button changing from disabled (gray) to enabled (black) and best practices for creating user-friendly sign up forms.
Chapters
00:00 Intro
00:25 Creating Checkbox
02:11 Creating Agree to the Terms and Privacy Policy Design
03:42 Creating Button with Auto Layout in Figma
05:28 Creating Checkbox Animation in Figma
06:02 Button Color Transition from Disabled to Enabled
06:18 Prototype
This tutorial is ideal for UI/UX designers looking to add interactive elements to their designs. Follow along and elevate your design skills today!
Ready to level up your UI/UX design skills?
Don’t forget to hit the like button, subscribe for more tutorials, and click the bell icon to stay updated with our latest videos!
Check out our other tutorials:
Minimalist Login Screen: th-cam.com/video/D142potCsaM/w-d-xo.html
Minimalist Sign Up Screen: th-cam.com/video/Fl_3fPhHbB8/w-d-xo.html
มุมมอง: 499
วีดีโอ
How to Design a Minimalist Sign Up Screen for Mobile Apps | Figma Tutorial
มุมมอง 11621 วันที่ผ่านมา
In this Figma tutorial, we’ll walk you through the step-by-step process of designing a minimalist Sign Up screen that’s both functional and visually appealing. Whether you're a beginner or an experienced designer, you'll learn how to use Figma's powerful tools like Auto Layout to create responsive input fields and buttons that look great on any device. Chapters 00:00 Intro 00:09 Creating Text 0...
How to Design a Minimalist Login Screen in Figma | UI/UX Design Tutorial
มุมมอง 195หลายเดือนก่อน
In this tutorial, you'll learn how to design a clean and minimalist login screen using Figma. Perfect for modern web and mobile applications, this step-by-step guide will walk you through the process of creating a sleek and functional login interface. We’ll also explore how to use Figma’s Auto Layout feature to create responsive input fields and buttons. Whether you're a beginner or an experien...
Creating a Settings Loading Animation in Figma | UI/UX Design Tutorial
มุมมอง 106หลายเดือนก่อน
In this tutorial, you'll learn how to create a smooth and engaging settings loading animation using Figma. Perfect for enhancing the user experience in your mobile or web applications, this step-by-step guide will walk you through the entire process, from creating the gear icon component to animating the loading sequence. Whether you're a beginner or an advanced designer, this tutorial is packe...
Master Button Click Animation in Figma's New UI 3 - Step-by-Step Tutorial
มุมมอง 2002 หลายเดือนก่อน
Discover the capabilities of Figma's new UI 3 with this comprehensive tutorial on creating button click animations. In this video, you'll learn how to design and animate buttons that provide a smooth and engaging user experience. We'll cover everything from setting up your workspace in Figma, designing the button, applying click animations, and fine-tuning the interaction to make it look profes...
Navigation Bar Animation in Figma | Prototyping Tutorial
มุมมอง 2162 หลายเดือนก่อน
In this tutorial, I will show you How to Create Navigation Bar Animation in Figma using Micro Interactions, Motion Design and Figma Interactive Components. Also, you will learn how to use Figma Variants, Figma Prototype and Figma Smart Animate to create Animated Navbar. In this video I show you: 00:00 Intro 00:13 Navigation Bar Design 03:35 Navigation Bar Variants 04:45 Navigation Bar Prototype...
Button Click Fill Animation in Figma
มุมมอง 7384 หลายเดือนก่อน
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 Com...
Show Hide Password Animation in Figma
มุมมอง 1.4K5 หลายเดือนก่อน
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
มุมมอง 3695 หลายเดือนก่อน
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
มุมมอง 2986 หลายเดือนก่อน
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
มุมมอง 3476 หลายเดือนก่อน
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
มุมมอง 6736 หลายเดือนก่อน
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
มุมมอง 3137 หลายเดือนก่อน
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
มุมมอง 3187 หลายเดือนก่อน
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
มุมมอง 3.5K8 หลายเดือนก่อน
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
มุมมอง 3728 หลายเดือนก่อน
Toggle Switch Button Animation in Figma
Loading Dots Animation | Figma Tutorial
มุมมอง 9129 หลายเดือนก่อน
Loading Dots Animation | Figma Tutorial
Radio Button with Hover Effect | Figma Animation
มุมมอง 6459 หลายเดือนก่อน
Radio Button with Hover Effect | Figma Animation
Snake Loading Animation | Figma Tutorial
มุมมอง 85810 หลายเดือนก่อน
Snake Loading Animation | Figma Tutorial
Figma Number Animation | Micro Interactions
มุมมอง 3.2K10 หลายเดือนก่อน
Figma Number Animation | Micro Interactions
Like Button Animation | Figma Micro Interactions
มุมมอง 44211 หลายเดือนก่อน
Like Button Animation | Figma Micro Interactions
Arrow Button Animation | Figma Micro Interactions
มุมมอง 2.8K11 หลายเดือนก่อน
Arrow Button Animation | Figma Micro Interactions
Image Carousel in Figma | Micro Interactions
มุมมอง 585ปีที่แล้ว
Image Carousel in Figma | Micro Interactions
Loading Animation in Figma | Interactive Components
มุมมอง 563ปีที่แล้ว
Loading Animation in Figma | Interactive Components
How to create Multiple Checkbox in Figma | Interactive Components
มุมมอง 857ปีที่แล้ว
How to create Multiple Checkbox in Figma | Interactive Components
Counter Animation in Figma | Micro Interactions
มุมมอง 750ปีที่แล้ว
Counter Animation in Figma | Micro Interactions
Mobile Carousel Animation | Figma Micro Interactions
มุมมอง 1.3Kปีที่แล้ว
Mobile Carousel Animation | Figma Micro Interactions
Animated Gradient Button | Figma Micro Interactions
มุมมอง 783ปีที่แล้ว
Animated Gradient Button | Figma Micro Interactions
GREAT
Thank you so much for the feedback!😃
Thanks to your video, I could finish my project easier. I really like your tutorial, I have been time to research a lot video but I could not do. I'm so stress but fortunately I saw this and completed so well. Thank you.
at 10:20 how do you move your component to your mobile screen? I have done it but it doesn't work.
Shadows are nice, but spacing is not okay, sorry..
It will be highly helpful if you mention the hex code of each color you choose for your color palette
can able to share the it in write format btw great work
How did you make the numbers to scroll up to $900 from the text?
Sir why you are not make the quickly Plz every day upload the video
Hi!😃 I haven’t been uploading quickly because I’ve been busy with work, but I’ll try to post more frequently. Comments like yours motivate me to post more often, thank you so much for your feedback!🤩 If you can, please share the channel with your friends. What tutorial would you like to see next on the channel? Have a great week!
sorry... but i am finding it difficulty on how you made the image inside
Hi!😃 I can try to make a new more detailed tutorial. Do you have any tutorial suggestions?
Can anyone help me
Hello!😃 What's not working?
It didn’t work for me 😢
Hi!😃 What's not working?
@FerasALIShah 5 minutes ago set @pratibhalimbole5890 3 weeks ago Thank you so much 8:51 Reply @pratibhalimbole5890 3 weeks ago Thank you so much 8:51 2 Reply Chinsk Design · 1 reply @andrearodriguezojeda746 7 months ago excelente, vi muchos videos y no hay uno mejor explicado que este 2 Reply Chinsk Design · 1 reply @postal398 3 months ago Not so many videos showing how to do that, many thanks to you! 1 Reply Chinsk Design · 1 reply @arianemoki189 1 year ago Great content. It really helped me with my project. The only thing I would suggest is zooming in where you are hovering. The way it is now is kind of blurry. Keep posting videos, because they are amazing. 5 Reply Chinsk Design · 1 reply @iberco91 1 year ago Thank you very much, you save my life! 2 Reply Chinsk Design · 2 replies @anukrititripathi152 1 year ago Excellent Thankyou so much ! I request you to make more 2 Reply Chinsk Design · 3 replies @user-cf8qx1ve7x 1 year ago thanks for information 2 Reply Chinsk Design · 1 reply @ExpectZombiesHD 1 year ago Any Chance to make it circular? So that it starts again when you go over 24 hrs / 60 minutes? 1 Reply @aliciad5531 1 year ago Can you please show us how to make this in Adobe Xd? Thank you Reply @yanxiao5286 1 year ago NEXT TIME PLEASE ADD YOUR VOICE TO EXPLAIN THE TUTORIAL INSTEAD MUSIC, IT'S TO LOUD AND TOO NOISY. MANY THANKS. 1 Reply @myjourneywithjesus2 1 year ago I couldn't see anything 1 Reply Chinsk Design · 1 reply @user-ze9jg6xg9w 1 year ago But why you guys don't like to talk when teaching. It just makes people not to wanna click on the video. Not helpful at all. 1 Reply
set @pratibhalimbole5890 3 weeks ago Thank you so much 8:51
I was try it, but its not work. please help me
Hi!😃 What is happening?
hi would it be fine if you could share the sample design for this tutorial?
thank you
Hi!😃 I’m glad to help!
nice work. how do you space out your icons (time, signal, wifi, battery) and what sizes do you give them
Where do you get them?
How to make different responses to each question? I tried many times, but as long as I can change the question text, the response stays the same :(
Hi! I haven't tried this yet, but I could make a tutorial about it 😃
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
Hi!😃 I’m glad to help!
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!