Floating Action Button Animation in Figma | Interactive Components

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ต.ค. 2024
  • In this tutorial, I will show you how to create another type of Animated Floating Action Button (FAB) in Figma with Interactive Components. Also, you will learn how to use Groups, Frames, Components, Variants, Figma Prototype and Figma Smart Animate.
    In this video I show you:
    00:25 Intro
    00:30 Make an Ellipse
    00:50 Add Drop Shadow
    01:25 Make Another Ellipse
    01:55 Add two Drop Shadows
    03:10 Duplicate the Ellipse
    03:40 Add Icons
    05:15 Send the Small Ellipses to Back
    05:30 Create a Frame
    05:40 Duplicate the Frame
    05:50 Decrease Size of Small Ellipses
    07:00 Create Multiple Components
    07:15 Combine as Variants
    07:25 Prototype
    ======
    Watch my others Figma Interactive Components tutorials:
    Animated Like Button: • Animated Like (Heart) ...
    Search Bar (Keyboard Input Animation): • Search Bar (Keyboard I...
    Loading Animation: • Loading Animation | Fi...
    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

ความคิดเห็น • 2