Figma Interactive Components Guide
April 17, 2021 by Hannah Wright
Have you been wanting answers about Figma interactive components? In this post, I'll discuss details around: What they are, how to use them (tutorial + prototype example), and how to get involved in the beta to get early access.
Figma Interactive Components BetaIf you're wondering about the official release date, a specific date has not yet been announced.
But not to worry: you can apply to join the beta in the meantime and start using it even sooner!
So, what's the best way to signup for early access?
You can check out the link they shared here. Simply fill out your details (it's a quick form) and their team will be in touch.
So, what kind of timeline can you expect?
If you're feeling impatient, don't worry! Rest assured, you'll get access pretty quickly once you've applied.
According to their team, as of March 1, 2021, it was taking up to a couple of days to get approved for early access.
In other words, you won't need to wait much longer. Just be extra doubly sure that you applied for yourself AND all members of your team to ensure you can all access it ASAP.
That's right, at least as of today, you'll want to make sure any and all members of your team have filled out the form.
What it Does for Your Designs: Bringing Life to Your UI
You may be wondering: why use this feature? What does it do, exactly?
Well, it's an awesome way to bring life to your prototypes.
Basically, it lets you create real-life interactions between your components.
For example, if you have a button, you'll be able to click it and therefore show the normal, hover, and pressed states as though it is really happening (in real-time) when presenting your prototype.
That way, people will be able to see firsthand how your design is supposed to work.
Therefore, it's less work for you.
Plus, it helps you cut back on a lot of that back-and-forth, and overall helps you better communicate your ideas to developers, your boss, and other stakeholders.
Simply put, it's amazing!
And it is changing the way we interact with prototypes completely.
Interactive Components Prototype Tutorial & Example
You know what they say: the best way to learn something new is to just dive in.
If you prefer to learn by doing, then this tutorial's for you.
Continue reading for the full tutorial. Oh, and I encourage you to follow along and try it out yourself! It's the best way to learn and get firsthand experience right away.
2. Create Multiple Components
So, let's start with a basic checkbox example.
First, create two different checkboxes: one for "checked," and the other for "unchecked."
Next, select both of them and create them into multiple components.
2. Combine As Variants
After that, select "Combine as variants" from the righthand panel.
This shows that they are related.
3. Create Your Links/Interactions
Next, click the "Prototype" tab.
After that, select the dot on the component you want to link, and drag it to the next step (it will display an arrow showing you the link).
Then, from the "Prototype" tab, click "On click" as the interaction type. And from the drop-down, choose "Smart animate."
Now, you'll want to create a reverse interaction so that you'll also be able to "uncheck" the box back to its empty state.
To do this, simply select the "checked" box and hold down + drag the dot to the "unchecked" box. Under "Interactions," use the same settings as above.
4. Organize Your File to Clean It Up a Bit + Copy and Paste
Now is a good time to clean up your file a bit.
In this example, I'm creating a new page called "Components" and then selecting them + moving them to the "Components" page so that they're not in the way of the design.
Now, let's add our component to our table by dragging it from the "Assets" panel on the left.
After that, we can copy + paste to display them all the way down the table.
5. Select your frame and click "Present."
Now, click your checkbox from the prototype.
You'll notice that anytime you click on a checkbox in the prototype, it'll immediately switch to the "checked" state!
Plus, anytime you uncheck it, it'll reflect those changes in real-time, too. Almost like you're in the actual final product :-) which makes it especially great for user testing, presenting to your team in the most accurate way, and much more.
Pretty cool, huh?
PS: If you want to check out the finished example from this tutorial, you can duplicate the file here. It's a separate file from the one before. This can be especially helpful if it didn't work when you followed along, and you're not sure why.
Help! I can't find "change to"
When making a connection, if you don't want to deal with making connections via the arrows, you can also create a "if this, then that" action by using the "change to" under your prototype settings.
If you can't find the "change to" in order to select the destination variant:
First, make sure that you're on the "Prototype" tab.
Next, make sure that you've selected one individual sub-variant component that should be nested under a master component.
It'll look like this:
To view "change to," simply click on the info underneath "Interactions" in the right panel.
Still can't find it? Chances are, you're not in the early access group yet. You can apply right away and after a short wait, try it out.
I can't enable interactive components, but my colleague can. Why?
So, your coworker is using this feature with no problems, but you can't seem to because it's not inactivated in the settings. What gives?
As it turns out, both of you would need to be accepted to the test pilot in order to both use it. But not to worry: this just means that you'll have to apply to use it - but no worries, it usually doesn't take long!
Practice Makes Perfect
The trick to anything in life is consistency.
To really master this new feature, give it a try yourself and play around with it. The more you do, the better you'll get.
Pretty soon, you'll be building these interactions with little to no hesitation! It'll become automatic and will save you time.
Plus, your prototypes will be super fancy and realistic! :-)
Whether you're presenting your ideas to your boss or a colleague, now you'll be able to communicate your ideas in a more clear and concise manner.
With such realistic interactions, people will be able to see your vision in the way you intended.
Therefore, no guesswork and no hassle to be had.
Plus, your file will be better organized, and you'll be saving your own time in the process.
So, what do you think about this new functionality?
Has it made your life better as a designer?
If you're like many others out there, this is a game-changer that completely changes (and enhances) the way you work. We hope you like it just as much as we do.