Figma Interactive Components | Figma Variants Tutorial

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

27,767

503

Figma Components:
   • Figma Components Tutorial

Figma Smart Animate Tutorials:
   • Figma Hover | Figma Button Hover Effe...
   • Figma Smart Animate | Animation Tutor...

In this video I go over how to create Interactive Components in Figma. Interactive Components is a new feature that is currently in beta (see beta link below). With this feature enabled you can add interactivity to components at the variant level, instead of relying on page level animations and transitions. In this tutorial I show you how I streamline my process of prototyping a Settings page, by replacing 8 frames to show all the possible states with only 1 frame. I create a switch component, create variant states and then add interactivity between these two states.

Enjoying this tutorial? Subscribe to stay up to date with my latest content:    / @angeladesign737

Figma Beta Program:
https://help.figma.com/hc/en-us/artic...

In this video I show you:
0:00 - Intro
0:15 - Starting Project
2:35 - Creating Variants
4:12 - Creating Interactive Components
5:46 - Using Interactive Components

Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...

--

Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog:   / angeladelise