- Видео 97
- Просмотров 691 625
Chinsk Design
Бразилия
Добавлен 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 ...
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 ...
Просмотров: 690
Видео
How to Design a Minimalist Sign Up Screen for Mobile Apps | Figma Tutorial
Просмотров 1632 месяца назад
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
Просмотров 2342 месяца назад
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
Просмотров 1313 месяца назад
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
Просмотров 2473 месяца назад
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
Просмотров 2394 месяца назад
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
Просмотров 8736 месяцев назад
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,9 тыс.6 месяцев назад
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
Просмотров 4087 месяцев назад
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
Просмотров 3187 месяцев назад
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
Просмотров 4347 месяцев назад
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
Просмотров 7748 месяцев назад
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
Просмотров 3578 месяцев назад
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
Просмотров 3629 месяцев назад
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
Просмотров 4 тыс.9 месяцев назад
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
Просмотров 39110 месяцев назад
Toggle Switch Button Animation in Figma
Loading Dots Animation | Figma Tutorial
Просмотров 99010 месяцев назад
Loading Dots Animation | Figma Tutorial
Radio Button with Hover Effect | Figma Animation
Просмотров 72911 месяцев назад
Radio Button with Hover Effect | Figma Animation
Snake Loading Animation | Figma Tutorial
Просмотров 90811 месяцев назад
Snake Loading Animation | Figma Tutorial
Figma Number Animation | Micro Interactions
Просмотров 3,8 тыс.Год назад
Figma Number Animation | Micro Interactions
Like Button Animation | Figma Micro Interactions
Просмотров 467Год назад
Like Button Animation | Figma Micro Interactions
Arrow Button Animation | Figma Micro Interactions
Просмотров 3,1 тыс.Год назад
Arrow Button Animation | Figma Micro Interactions
Image Carousel in Figma | Micro Interactions
Просмотров 601Год назад
Image Carousel in Figma | Micro Interactions
Loading Animation in Figma | Interactive Components
Просмотров 589Год назад
Loading Animation in Figma | Interactive Components
How to create Multiple Checkbox in Figma | Interactive Components
Просмотров 925Год назад
How to create Multiple Checkbox in Figma | Interactive Components
Counter Animation in Figma | Micro Interactions
Просмотров 795Год назад
Counter Animation in Figma | Micro Interactions
Mobile Carousel Animation | Figma Micro Interactions
Просмотров 1,3 тыс.Год назад
Mobile Carousel Animation | Figma Micro Interactions
Animated Gradient Button | Figma Micro Interactions
Просмотров 832Год назад
Animated Gradient Button | Figma Micro Interactions
Very very useful, thanks mate. Subscribed.
Thank you! A little bit slow, but informative.
Thank you so much, thia ia very helpful
Is it because of different versions? I can't find "layer" on my page. So I can't choose "pass through" to 0%
Hi!😃 I'll try to record an update to this tutorial, but you can click on the "water drop" icon to access blend mode. Let me know if it works.
thank you so much brother ...
I’m glad to help! Thank you so much for the feedback! Have a great week!
this is actually the worst tutorial of all time
Thank you so much! This is an excellent tutorial.
Hi!😃 Thank you so much for the feedback! Have a great week!
Really helpeddd
Hi!😃 I’m glad to help! Thank you so much for the feedback! Have a great week!
Thank you so much for this! Do you know how to make it keep spinning after reaching 100% of the progress bar? Like start it all over again in looping. Thank you!
Hi! 😃 Thank you so much for the feedback! I'll try to record a tutorial about it. Did you achieve it?
Hello, thanks for your content. I follow every step but at the end the cart moves but I can't see the blue circle with the 1. Thanks in advance.
Hi!😃 Thank you so much for the feedback! Did you make it work?
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?
Hi!😃 I'll try to record a tutorial about it. Did you achieve it?
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?
Hi! I'll try to record a tutorial about it. Did you achieve it?
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!