Figma Interactive Components | Figma Variants Tutorial

Published: 07 June 2021
on channel: 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

On this page of the site you can watch the video online Figma Interactive Components | Figma Variants Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Angela Design 07 June 2021, share the link with friends and acquaintances, this video has already been watched 27,767 times on youtube and it was liked by 503 viewers. Enjoy your viewing!

31,298,381

262K