Chinsk Design
Chinsk Design
  • Видео 97
  • Просмотров 691 625
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 ...
Просмотров: 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
Checkbox Animation in Figma
Просмотров 60711 месяцев назад
Checkbox Animation in Figma
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
Sticky Scroll | Figma Prototype
Просмотров 4,9 тыс.Год назад
Sticky Scroll | Figma Prototype
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

Комментарии

  • @agnidiptahomroy8656
    @agnidiptahomroy8656 4 дня назад

    Very very useful, thanks mate. Subscribed.

  • @ЕленаМатвеева-ш6р
    @ЕленаМатвеева-ш6р 11 дней назад

    Thank you! A little bit slow, but informative.

  • @abiola_olayajo
    @abiola_olayajo 12 дней назад

    Thank you so much, thia ia very helpful

  • @attang9051
    @attang9051 18 дней назад

    Is it because of different versions? I can't find "layer" on my page. So I can't choose "pass through" to 0%

    • @ChinskDesign
      @ChinskDesign 18 дней назад

      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.

  • @ngthampi99
    @ngthampi99 19 дней назад

    thank you so much brother ...

    • @ChinskDesign
      @ChinskDesign 19 дней назад

      I’m glad to help! Thank you so much for the feedback! Have a great week!

  • @shiningskies47
    @shiningskies47 21 день назад

    this is actually the worst tutorial of all time

  • @elizabethmorello-v9t
    @elizabethmorello-v9t Месяц назад

    Thank you so much! This is an excellent tutorial.

    • @ChinskDesign
      @ChinskDesign 18 дней назад

      Hi!😃 Thank you so much for the feedback! Have a great week!

  • @inderjanakarajan9389
    @inderjanakarajan9389 Месяц назад

    Really helpeddd

    • @ChinskDesign
      @ChinskDesign Месяц назад

      Hi!😃 I’m glad to help! Thank you so much for the feedback! Have a great week!

  • @MayanSantana-e8n
    @MayanSantana-e8n Месяц назад

    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!

    • @ChinskDesign
      @ChinskDesign 18 дней назад

      Hi! 😃 Thank you so much for the feedback! I'll try to record a tutorial about it. Did you achieve it?

  • @Danilo_joy
    @Danilo_joy Месяц назад

    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.

    • @ChinskDesign
      @ChinskDesign 18 дней назад

      Hi!😃 Thank you so much for the feedback! Did you make it work?

  • @raisulrana2134
    @raisulrana2134 Месяц назад

    GREAT

    • @ChinskDesign
      @ChinskDesign Месяц назад

      Thank you so much for the feedback!😃

  • @reieri2511
    @reieri2511 Месяц назад

    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.

  • @tamarazsofiadobo2291
    @tamarazsofiadobo2291 2 месяца назад

    at 10:20 how do you move your component to your mobile screen? I have done it but it doesn't work.

  • @anesthesia4346
    @anesthesia4346 2 месяца назад

    Shadows are nice, but spacing is not okay, sorry..

  • @designeringrow
    @designeringrow 2 месяца назад

    It will be highly helpful if you mention the hex code of each color you choose for your color palette

  • @sanobarrahaman9016
    @sanobarrahaman9016 2 месяца назад

    can able to share the it in write format btw great work

  • @atolagbejoshua100
    @atolagbejoshua100 2 месяца назад

    How did you make the numbers to scroll up to $900 from the text?

  • @ferasalishah
    @ferasalishah 2 месяца назад

    Sir why you are not make the quickly Plz every day upload the video

    • @ChinskDesign
      @ChinskDesign 2 месяца назад

      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!

  • @ifechukwuemmanuella8154
    @ifechukwuemmanuella8154 2 месяца назад

    sorry... but i am finding it difficulty on how you made the image inside

    • @ChinskDesign
      @ChinskDesign 2 месяца назад

      Hi!😃 I can try to make a new more detailed tutorial. Do you have any tutorial suggestions?

  • @zahracabdalla1810
    @zahracabdalla1810 3 месяца назад

    Can anyone help me

    • @ChinskDesign
      @ChinskDesign 2 месяца назад

      Hello!😃 What's not working?

  • @zahracabdalla1810
    @zahracabdalla1810 3 месяца назад

    It didn’t work for me 😢

    • @ChinskDesign
      @ChinskDesign 2 месяца назад

      Hi!😃 What's not working?

  • @ferasalishah
    @ferasalishah 3 месяца назад

    @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

  • @ferasalishah
    @ferasalishah 3 месяца назад

    set @pratibhalimbole5890 3 weeks ago Thank you so much 8:51

  • @ketanitemmaniezz
    @ketanitemmaniezz 3 месяца назад

    I was try it, but its not work. please help me

    • @ChinskDesign
      @ChinskDesign 3 месяца назад

      Hi!😃 What is happening?

  • @rowenafetalvero-dorado1325
    @rowenafetalvero-dorado1325 3 месяца назад

    hi would it be fine if you could share the sample design for this tutorial?

  • @saikiranmovva2587
    @saikiranmovva2587 4 месяца назад

    thank you

    • @ChinskDesign
      @ChinskDesign 4 месяца назад

      Hi!😃 I’m glad to help!

  • @ukeaguvictor9
    @ukeaguvictor9 4 месяца назад

    nice work. how do you space out your icons (time, signal, wifi, battery) and what sizes do you give them

  • @zosia1553
    @zosia1553 4 месяца назад

    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 :(

    • @ChinskDesign
      @ChinskDesign 4 месяца назад

      Hi! I haven't tried this yet, but I could make a tutorial about it 😃

  • @kaleb4256
    @kaleb4256 4 месяца назад

    Would love to know how to best translate and redline something like this for devs

  • @vamshilanka7183
    @vamshilanka7183 4 месяца назад

    Its not working properly

    • @ChinskDesign
      @ChinskDesign 4 месяца назад

      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 😃

  • @pratibhalimbole5890
    @pratibhalimbole5890 4 месяца назад

    Thank you so much ❤ 8:51

    • @ChinskDesign
      @ChinskDesign 4 месяца назад

      Hi!😃 I’m glad to help! Thank you so much for watching! Have a great week!

  • @MauriZub-24_34
    @MauriZub-24_34 4 месяца назад

    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?

    • @ChinskDesign
      @ChinskDesign 18 дней назад

      Hi!😃 I'll try to record a tutorial about it. Did you achieve it?

  • @ziyaandrn5986
    @ziyaandrn5986 4 месяца назад

    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?

  • @daniellademesa4815
    @daniellademesa4815 4 месяца назад

    Can I ask what if I want the number to be adding up?

    • @ChinskDesign
      @ChinskDesign 18 дней назад

      Hi! I'll try to record a tutorial about it. Did you achieve it?

  • @brendav1287
    @brendav1287 4 месяца назад

    hola, cómo haces para que la respuesta del acordeón de arriba no se mezcle con la pregunta de abajo?

  • @Spicyhealthyblog
    @Spicyhealthyblog 5 месяцев назад

    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.

  • @emeraldezy
    @emeraldezy 5 месяцев назад

    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

  • @FraolChali
    @FraolChali 5 месяцев назад

    👏🏽👏🏽👏🏽

    • @ChinskDesign
      @ChinskDesign 4 месяца назад

      Hi!😃 Thank you so much for the feedback! Have a great week!

  • @bimisha2040
    @bimisha2040 5 месяцев назад

    hi, why is rectangle there?

  • @faujianharrysalma9178
    @faujianharrysalma9178 5 месяцев назад

    Can someone help, mine is doesn't work

    • @faujianharrysalma9178
      @faujianharrysalma9178 5 месяцев назад

      I've click the R button, rotate, still doesn't work

    • @ChinskDesign
      @ChinskDesign 4 месяца назад

      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.

  • @SA-cb2it
    @SA-cb2it 5 месяцев назад

    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?

  • @OniiHvH
    @OniiHvH 5 месяцев назад

    4 seconds for a 1.48 Megabyte file would be horrifying

    • @ChinskDesign
      @ChinskDesign 5 месяцев назад

      😂😂😂 In the 2000s I already waited hours for a 5 Megabyte file 😅😅😅

  • @geronelo1435
    @geronelo1435 5 месяцев назад

    Espectacular, gracias por el aporte

    • @ChinskDesign
      @ChinskDesign 3 месяца назад

      Hi!😃 I’m glad to help!

  • @vball2308
    @vball2308 6 месяцев назад

    For some reason my cart starts to animate before clicking the button. Any idea what I’m doing wrong?

    • @ChinskDesign
      @ChinskDesign 5 месяцев назад

      Hi!😃 Check if you used the “On Tap” animation in the first interaction instead of “On Delay”. Let me know if it worked.

  • @favourogbuehi537
    @favourogbuehi537 6 месяцев назад

    Thank you Love how detailed the tutorial is

    • @ChinskDesign
      @ChinskDesign 6 месяцев назад

      Hi!😃 Thank you so much for the feedback! Have a great week!

  • @chiko14june
    @chiko14june 6 месяцев назад

    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

  • @jbicalhk
    @jbicalhk 6 месяцев назад

    moço, queria falar que não funcionou

  • @duyvuonghoang5368
    @duyvuonghoang5368 6 месяцев назад

    I just had to log in to thank you, OMG thanks soooooo much for you tutorial

    • @ChinskDesign
      @ChinskDesign 6 месяцев назад

      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!

  • @pamelamedina4809
    @pamelamedina4809 7 месяцев назад

    'promosm' 😀

  • @RolandoArroyo
    @RolandoArroyo 7 месяцев назад

    Hi from Peru ! Thanks ! great tutorial !

    • @ChinskDesign
      @ChinskDesign 6 месяцев назад

      Hi!😃 Thank you so much for the feedback! Have a great weekend!