Figma for Edu: Prototyping 201, interactions

00:00 Introduction
01:48 Scroll to interactions
19:45 Sticky scrolling interactions
24:51 Smart animate
33:54 Easing demonstrations
37:17 Interactive components
42:55 Questions

____________________________________________________

Find us on ⬇️

____________________________________________________

#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

[kadgraphics]

I love the way you teach. Thank you for this amazing session.

[johnesmaina]

@miggy from figgy The lesson is quite an eye opener of what to practice on and different interaction actions. My favorite part was actually getting to know that you can convert those particular designs to lottii animations. Let's keep designing..

[SatyamBarnwal]

This was just dope. amazing session. learned a lot!

[kimberlyspicer]

Thank you for this video! I learned so much in a short time.

[TheItzen]

Awesome video! Bookmarked it right away!
Which micro interactions are a good idea to include inside a design system component?
For example, the bloom on google's design system can be included inside your button component which makes it look and behave like the real button.

[perredicarlo]

The buttons used in the examples here are either rectangles, text objects, or a simplified component with no interactivity. That’s different from everyday prototyping when you’ve already built buttons and nav bars with interactivity. We’re trying to Scroll To using a navigation bar or another button with states so a button turn from “active” to “selected”. When there are two On Clicks on a prototype, I can trigger the behavior of one or another. Not both. If I use an On Click and a Mouse Up, same failure. One always kills off the other. Could you point us to a demo that changes both a button’s state AND scroll to simultaneously (or after a delay)?

[kelvinni]

All the animation are cool but how do we hand it off to the engineers?

[pusakis]

Hi friend! I have a question that I couldn't find the answer to. Does Figma have a behavior or variant for prototyping radio buttons? Specifically, I'm looking for a single selection component where clicking one option deselects the others in the prototype (without building component variants for each selection). Thank you in advance. Best regards, Maru from Argentina.

[breezeokami]

Bro, the smart animation called "Load Circle" was so complicated that I studied it for two days to get an effect😭

[arbenlocaj]

Where can i follow a course in figma professional?! Thnx!

[ke]

Is this doable in code (and/or is Figma writing the code [in dev mode perhaps])?

[nooriesheikh]

prototyping was never that fun and easy to learn thank you!!

[SA-cbit]

Is there a any way to get undo button on screen in figma? So that it can be accessed with mouse. I am trying to use it but this software is so not intuitive it is unbelievable! Undo is used so much in any design software and they have made it so difficult, what if I don’t use keyboard while designing, I can’t use undo quickly, by mouse first go to edit and then undo! How does this make sense to makers of this software! Using it raises my blood pressure it is so frustrating!

[susa]

Excuse me! Who is going to need a non-functional map panning Prototype - for what reason? Certainly not for user testing ! Figma has a lot of work todo to provide regular simulated interaction that are suitable for RAPID prototyping ! Show me how to apply interactions to NESTED instances so that it works! That would truly help to provide some kind of value to the process.

[shifatmasud]

@figma, @spline & @rive You guys should collaborate. We can't wait for a new revolution in Interactive Design.