Figma Interactive Components | Figma Variants Tutorial

Подписаться 47 тыс.

Просмотров 27 тыс.

50% 1

Figma Components:
• Figma Components Tutorial
Figma Smart Animate Tutorials:
• Figma Hover | Figma Bu...
• Figma Smart Animate | ...
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:
help.figma.com...
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: www.youtube.co....
--
Let's Connect
Dribbble: dribbble.com/a...
Blog: / angeladelise

Наука

Опубликовано:

15 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 38

@medodahman9986 2 года назад

She stopped posting and this made me upset I miss her tutorials

@sulaimandev 5 месяцев назад

I miss your videos, "Lets get started" feels nostalgic. In 2020 I used to watch your videos when I started learning programming.

@jasonfolding7 2 года назад

Thank you for making these videos. You have a very clear way of explaining things that make it easy to understand.

@farfara27 3 года назад

thank you! I love short videos showing specific features of the software. Your example and narrative is clear!

@TheTimefritter 2 года назад

Thanks for this tutorial, this was exactly what I was looking for! And like the other comments mention, your narration is perfect.

@astratow 2 года назад

When are you coming back?

@brianmorgan5880 Год назад

I don't know, but she dropped out of sight 2 years ago. I discovered her website. The copyright stopped at 2021. She listed Brooklyn, NY. I am a NY resident but not from the city. NYC, like most big cities, have become unsafe. I'm afraid that she ran into trouble. If you are really interested, she listed her last employer in her resume. They might know more.

@chiggywiggy524 8 месяцев назад

@@brianmorgan5880please don't say that! 😢

@npr721 3 года назад

Dudette, this is life changing for me. Your videos are amazing! You earned a subscription! =)

@sia7001 3 года назад

Thank you for saving my life! I really appreciate your videos 💕

@kelindrawn 3 года назад

Thanks for the video! Can’t wait for Figma to release this feature (I dare not using it in production files as it is in beta..)

@justjaylin 3 года назад

why I can't see the Interaction's layer "change to" the section?

@Ghezu24 2 года назад

Finally! Just what i was looking for

@miayestone2316 2 года назад

Thank you for helping me out with this amount of knowledge

@marcsill453 2 года назад

Can someone explain to me how the device (phone) bezel shows up in Prototype view but not on the Design view. I must have missed that memo. :\

@codelta2 3 года назад

Hi Angela Thanks so much for the great tutorial as always. Really appreciate your great effort with the quality content :) Also just want to know, what is the microphone you use to record your videos?

@luisleonardolazogamarra9578 2 года назад

thank so much, your tutorials are amazing

@luma.cabral 3 года назад

Hi Angela, your content is pretty amazing! Thanks for that

@AiExplainedd 3 дня назад

Mam I'm waiting for you, and will wait forever 😭

@simsandwins8998 2 года назад

May 2022 still don't see this feature released =(

@4Mulator Год назад

Hi Angela! your tutorials have been so helpful. Thank you for sharing your knowledge. I was wondering what you think about Figma vs Sketch. I'm on the fence as to which to use??

@sveekey-210 2 года назад

At the moment to make Interactive components work you need to close and open the prototype tab ("R" button won't help). Otherwise, it won't work. Cost be half an hour to figure this out T_T

@anaespuigperello9144 2 года назад

this just saved me. Thanks!

@zalodias123 2 года назад

Hey Angela! Loving your tutorials. Do you plan on releasing more in the future? You haven't been around these past few months...

@tymiller2596 3 года назад

Can you do a video on HTML Partials? Like how to include common elements such as header and footer in all pages. Some that the Navigation menu can be updated in one place.... Thanks

@fernandanocedal5027 3 года назад

Hi Angela. I love your videos !! I have a question... In Figma the option "Change to" doesn't come, you know why? :(

@yoghurtlowfat 3 года назад

I think first you have to join the beta program. She included the link under the video already. (:

@homebreed9002 2 года назад

Why does animation like SIDE does not appear for variants?

@technic_and_programming 2 года назад

Спасибо.

@EmmanuelNgwandu 2 года назад

Happy new year, new content please

@nywebdiva 2 года назад

EXCELLENTE. Thank you

@foriprint9895 2 года назад

Not Working Toggel Button Can You Guide ?

@palgun. 8 месяцев назад

Are you there?

@oluandleshiameduoye714 3 года назад

Hey figma fam Please can someone help? I can't get the 'change to' drop down to appear- I've done updates and even recreated my components but nothings working :( x

@fidelisteeraboh8683 2 года назад

try to apply for figam beta. i watched this video for two weeks until i understood

@fagnersales532 2 года назад

Dude, you're perfect

@talafim 3 года назад

Nice, but useless for now. What is the point to do this if you cannot show/hide other components on the same screen while the switch changes its state? Anyway, thank you very much for the video.