Accordion Animation | Figma Interactive Components

Подписаться 6 тыс.

Просмотров 16 тыс.

50% 1

In this tutorial, I will show you how to make Accordion Animation in Figma with Figma Interactive Components. Also, you will learn how to use Frames, Figma Auto Layout, Vertical Scrolling, Components, Variants, Prototype and Smart Animate.
In this video I show you:
00:00 Intro
00:26 Create Heading
01:32 Create Answer
02:30 Add Auto Layout
02:55 Create Component
03:15 Create Variants
03:55 Prototype 01
04:52 Create Frame
05:23 Add Auto Layout to Frame
05:40 Prototype 02
06:40 Vertical Scrolling
======
Watch my others Figma Interactive Components tutorials:
Notification Animation: • Notification Animation...
Animated Swipe to Remove: • Swipe to Remove - All ...
Audio Message Animation: • Audio Message Animatio...
Button Ripple Effect: • Button Ripple Effect |...
Automatic Carousel: • Figma Automatic Carous...
Circle Progress Bar: • Circular Progress Bar ...
Sound Wave Animation: • Figma Sound Wave Anima...
Dynamic Island Animation: • Dynamic Island Animati...
Dropdown Menu List: • Dropdown Menu with Scr...
Animated Modal Overlay: • Animated Modal Pop Up ...
Time Picker Animation: • Time Picker Animation ...
Animated Heart Icon: • Figma Animated Heart I...
Animated Swipe to Delete: • Figma Swipe to Delete ...
Floating Action Button (FAB): • Floating Action Button...
Pulse Loading Animation: • Figma Pulse Animation ...
Animated Like Button: • Animated Like (Heart) ...
Search Bar (Keyboard Input Animation): • Search Bar (Keyboard I...
Loading Animation: • Loading Animation | Fi...
Animated Countdown: • Animated Countdown Tim...
Interactive Star Rating: • Figma Star Rating Anim...
Interactive Slider: • Figma Slider Animation...
Interactive Button: • Figma Interactive Butt...
Radio Buttons: • Figma Interactive Comp...
Checkbox: • Checkbox | Figma Inter...
Dropdown Menu: • Figma Dropdown Menu Tu...
Input Fields: • Figma Interactive Comp...
Progress Bar: • Figma Progress Bar Tut...
Toggle Switch Button: • Figma Toggle Switch Bu...
======
Don't forget to like, subscribe and turn on notifications to watch new ui ux design videos and figma tutorials

Наука

Опубликовано:

6 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 24

@suyashhandke Год назад

thats superb!! thanks for the tutorial.

@ChinskDesign Год назад

Hi! I’m glad to hear that!🤩 Thank you so much for watching, share the channel with your friends!😃 I will keep posting videos every week and share much more knowledge. Have a great week!

@TamilSelvan-fc7nd Год назад

Thanks for the video Chinsk Design, it was very informative and useful, need more videos like this, have a nice day😊

@ChinskDesign Год назад

Hi!😃 I’m glad to hear that, feedback like this makes me motivated to keep making more videos🤩 Thank you so much!🙏 Have a nice day!

@balogunoluwapamilerin942 Год назад

One thing about Chinsk is he is going to make you feel like a pro while learning, thank you for this👍

@ChinskDesign Год назад

Hi! 😃 I’m glad to hear that, feedback like this makes me motivated to keep making more videos🤩 Thank you so much!🙏 Happy to know that my goal of sharing knowledge is being achieved!😃 Have a great week!

@henriqueribeiro6938 Год назад

Thank you for tis simple and effective video tutorial 👍

@ChinskDesign Год назад

Hi Henrique!😃 I’m glad to help!🤩 Thank you so much for the feedback! Which tutorial do you want to see here on the channel? Have a great week!

@mairasantos7882 Год назад

Thank you!😆

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

Hi Maira!😃 I’m glad to help!🤩 Have a great weekend!

@saikalkaparbekova3765 Год назад

thanks! helpful

@ChinskDesign Год назад

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

@brendav1287 11 дней назад

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

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

How did you make the pasting happen downwards? Mine is happening rightwards.

@AbhishekKumar-zf9bn Год назад

Thanks a lot 😁 I am very happy to learn this tutorial. I have a dought 🧐 When all the question are closed than the remaining space in the page is much more when we tap to open the accordion. How it can be fixed on both condition (closed/open)

@ChinskDesign Год назад

Glad to help!😃 In this case you can fill the empty space with more “Accordions” or with some illustration at the top.