Back to Browse

Figma Animated Heart Icon | Interactive Components

9.3K views
Jul 19, 2022
7:32

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: https://youtu.be/DuP_Zp2KClk Floating Action Button (FAB): https://youtu.be/R6Zfp0MI6b8 Search Bar (Keyboard Input Animation): https://youtu.be/Oiav0MXU2sQ Loading Animation: https://youtu.be/f3PS8Y1fiIY Interactive Star Rating: https://youtu.be/psl1ar21oC8 Interactive Slider: https://youtu.be/Y1Qu5h6w7CU Interactive Button: https://youtu.be/-BTCL-vHvRA Radio Buttons: https://youtu.be/k0D1l3lGs_M Checkbox: https://youtu.be/0jgvOyS3XsQ Dropdown Menu: https://youtu.be/e3K5ux4hOao Input Fields: https://youtu.be/wiBarR5SIRA Progress Bar: https://youtu.be/gIK-07miFOc Toggle Switch Button: https://youtu.be/N_0X5rb6miY ====== Don't forget to like, subscribe and turn on notifications to watch new ui ux design videos and figma tutorials

Download

0 formats

No download links available.

Figma Animated Heart Icon | Interactive Components | NatokHD