Figma Animated Heart Icon | Interactive Components
In this tutorial, I will show you how to make an Animated Heart Icon / Like Button in Figma with Interactive Components. Also, you will learn how to use Frames, Multiple Components, Figma Properties, Variants, Figma Prototype and Figma Smart Animate.
In this video I show you:
00:00 Intro
00:25 Heart Icons Variants
01:28 Bring to Front
01:40 Align Horizontal Centers
01:55 Create Frame
02:31 Duplicate Frame
02:45 Spread the Icons
04:15 Set the Opacity
04:58 Create Multiple Components
05:15 Combine as Variants
05:26 Prototype
======
Watch my others Figma Interactive Components tutorials:
Animated Swipe to Delete: • Figma Swipe to Delete | Interactive Compon...
Floating Action Button (FAB): • Floating Action Button Animation in Figma ...
Search Bar (Keyboard Input Animation): • Search Bar (Keyboard Input Animation) | Fi...
Loading Animation: • Loading Animation | Figma Interactive Comp...
Interactive Star Rating: • Figma Star Rating Animation | Interactive ...
Interactive Slider: • Figma Slider Animation Tutorial | Interact...
Interactive Button: • Figma Interactive Button Tutorial | Prototype
Radio Buttons: • Figma Interactive Components | Radio Button
Checkbox: • Checkbox | Figma Interactive Components wi...
Dropdown Menu: • Figma Dropdown Menu Tutorial | Prototype
Input Fields: • Figma Interactive Components | Input Field
Progress Bar: • Figma Progress Bar Tutorial | Prototype
Toggle Switch Button: • Figma Toggle Switch Button | Interactive C...
======
Don't forget to like, subscribe and turn on notifications to watch new ui ux design videos and figma tutorials