Swipe to Remove - All Cards | Figma Interactive Components

Опубликовано: 04 Октябрь 2024
на канале: Chinsk Design

3,315

157

In this tutorial, I will show you how to make Swipe to Remove (All Cards) in Figma with Figma Interactive Components. To demonstrate the animation (Swipe to Delete / Remove), I will use a Food Delivery App Cart Screen. Also, you will learn how to use Figma Auto Layout, Frames, Components, Variants, Figma Prototype and Smart Animate.

In this video I show you:

00:00 Intro
00:31 Create the Remove Button
01:25 Frame Selection
02:00 Position the Frames
02:38 Create Component
02:53 Add Variant
03:40 Prototype Part 01
04:42 Duplicate Components
06:43 Prototype Part 02
07:53 Figma Auto Layout
08:05 Prototype Part 03

======

Watch my others Figma Interactive Components tutorials:

Automatic Carousel:    • Figma Automatic Carousel Animation Tu...

Circle Progress Bar:    • Circular Progress Bar Animation | Fig...

Sound Wave Animation:    • Figma Sound Wave Animation | Interact...

Dynamic Island Animation:    • Dynamic Island Animation in Figma | P...

Dropdown Menu List:    • Dropdown Menu with Scroll Animation |...

Animated Modal Overlay:    • Animated Modal Pop Up | Figma Overlay...

Time Picker Animation:    • Time Picker Animation | Figma Interac...

Animated Heart Icon:    • Figma Animated Heart Icon | Interacti...

Animated Swipe to Delete:    • Figma Swipe to Delete | Interactive C...

Floating Action Button (FAB):    • Floating Action Button Animation in F...

Pulse Loading Animation:    • Figma Pulse Animation | Loading Scree...

Animated Like Button:    • Animated Like (Heart) Button | Figma ...

Search Bar (Keyboard Input Animation):    • Search Bar (Keyboard Input Animation)...

Loading Animation:    • Loading Animation | Figma Interactive...

Animated Countdown:    • Animated Countdown Timer | Figma Inte...

Interactive Star Rating:    • Figma Star Rating Animation | Interac...

Interactive Slider:    • Figma Slider Animation Tutorial | Int...

Interactive Button:    • Figma Interactive Button Tutorial | P...

Radio Buttons:    • Figma Interactive Components | Radio ...

Checkbox:    • Checkbox | Figma Interactive Componen...

Dropdown Menu:    • Figma Dropdown Menu Tutorial | Prototype

Input Fields:    • Figma Interactive Components | Input ...

Progress Bar:    • Figma Progress Bar Tutorial | Prototype

Toggle Switch Button:    • Figma Toggle Switch Button | Interact...

======

Don't forget to like, subscribe and turn on notifications to watch new ui ux design videos and figma tutorials