Lately, Figma rolled out the beta for the latest interactive parts function that enables defining interactions and animations immediately into the variants and propagates them to each part occasion. Which means that it’s now attainable to create a part with states (hover, energetic, clicked, focus) and make it interactive so that each copy of the part will inherit those self same interactions by default, serving to rather a lot within the prototyping part.
Right here’s a comparability instance of how the workflow will change:
As you may see within the instance above, it requires 4 screens and eight interactions to make the prototype work as an actual product. And if I wished to make use of three switches, I must add much more screens and interactions.
Within the subsequent instance, it solely requires one display screen and one part with two variants for the interactions, and the change is similar so it may be duplicated as many occasions as wanted:
Utilizing Interactive Elements simplifies not solely the ultimate prototype but in addition the logic behind it, making it simpler to discover ways to construct, preserve and replace the prototypes.
Now, earlier than we begin:
Interactive Elements (Beta Entry)
You have to join for the Interactive Elements Beta program to start out experimenting with this new function as it’s not but accessible within the present steady launch. Becoming a member of the Beta is free and when you submit the shape, it shouldn’t take greater than two or three days earlier than you see Interactive Elements seem in your Figma design device.
I’ve created a Figma design file with the examples from this text. When you be part of the Beta, you may duplicate my design and comply with alongside extra simply.
Earlier than Beginning
It’s obligatory to know some key Figma components that we’re going to use, in the event you’re already aware of them you may skip this half and begin immediately with the primary tutorial (part: “Create your first Interactive Part”).
Consider these as objects that, when duplicated, create a reference to its copy (known as occasion) and when the part is modified, the occasion receives the identical adjustments. You can even apply overrides to situations (that are mainly model adjustments to the part properties which permit for some customization).
These are the totally different kinds a part can have and are normally used to use totally different properties similar to dimension or states.
Be taught extra about Variants →
Interplay Particulars Panel
It’s essential to know the Interplay Particulars panel as a result of it permits us to outline the totally different interactions and animations for our interactive parts. Figma has quite a lot of data on their web site so I’ll embody hyperlinks for these of you that wish to dig deeper.
Although this isn’t contained in the panel, the hotspot is the component the place the interplay will occur, in our case, every variant shall be an interactive hotspot for which you’ll outline triggers and actions.
These are recognized in improvement as Occasions and are the alternative ways we the consumer can activate an interplay.
On Click on,
Extra details about Triggers →.
On this setting, you may outline what’s going to occur when the interplay is activated; for interactive parts, we’ll use Change To which permits swapping the variants inside a part.
Swap With (overlay),
That is the ultimate goal of the motion. In my examples, I’ll use a variant because the vacation spot to swap it from Change OFF to Change ON.
Figma comes with a set of pre-defined transitions that may be helpful for some circumstances (transfer in, push, slide-in) however I all the time favor to go together with Good Animate and outline my very own transitions because it’s very easy to make use of — it mainly checks the layer names and if there are adjustments between the chosen body and the vacation spot body, it’s going to animate these layers.
Easing refers back to the manner the animation strikes, it’s mainly how the component accelerates and decelerates. I’m going to make use of two settings for this tutorial: Ease In and Out for the change, and Linear for the loops, however take into consideration that it’s additionally attainable to outline a customized easing so that you may wish to study extra about Easing.
Creating Your First Interactive Part
Now that you’ve got all the knowledge you can begin making your first interactive part. I’ll present you a quite common case by making a easy change that has two states (Off and On) and use the variants to copy these states.
Create A Part
Step one is to create a part.
Utilizing the Rectangle device (R), create a gray rectangle (#A7A9BC) 56×32 pixels in dimension and apply a nook radius of 16 px.
Utilizing the Ellipse device (O) create a white circle (#FFF) 24×24 pixels in dimension and place it over the rectangle within the left half, leaving 4 px of spacing. That is the way it ought to look:
Mix these two components right into a single part utilizing Ctrl/Cmd + Alt + Ok (or utilizing the Part icon from the highest bar in Figma):
Observe: Right here and somewhere else, I’ll use the Home windows/Mac common key notation, the place the Ctrl key in Home windows corresponds to the Cmd key on the Mac; Alt in Home windows is the equal of Alt/Choice on the Mac, so I’ll use Alt for brief, and Shift is similar on each platforms.
Add A Variant
Choose the part you’ve simply created and, in the fitting panel (contained in the Design tab), click on on the plus button close to Variants:
It is going to generate a purple body with a dashed border that represents the group of variants you’ve gotten.
You must have two variants by now, use the primary one for the Off state and the second for the On state.
Apply a unique model to the On state to make it the energetic choice, I like to recommend utilizing a blue background (#0B5FFF) and transfer the circle to the fitting.
These are the states of the change which can be going to alter from Off to On (and vice-versa) when the consumer clicks on the change.
Helpful tip: For this case it’s not obligatory but when it’s essential to add extra variants you may choose a part contained in the field and click on the purple plus button, it’s going to add a replica of the chosen part and resize the field routinely. (It’s additionally attainable to resize the field manually as if it was a body and freely duplicate and prepare the variants inside it.)
As you’ve seen, we’ve created these parts by duplicating them contained in the variant group however it is also attainable to create them individually and mix them as variants, the ultimate end result shall be precisely the identical. If you wish to do this technique simply create and choose two parts, the fitting panel will then have one other motion known as “Mix as variants,” click on it and performed — you’ll now have the identical two variants.
This different is de facto helpful when you have already got totally different parts and solely must outline the variants, in the event you’re engaged on a library it’s going to provide help to replace it with out having to recreate every thing from scratch.
Identify Your Variants
Naming the variants received’t have a direct impact over the ultimate end result (until you employ the identical title greater than as soon as), however defining the names and hierarchies will assist you’ve gotten every thing higher organized and comprehensible for different colleagues which may want to make use of the prototype for different initiatives.
By default the principle group of variants is known as “Property 1”, you may change this from the sidebar when deciding on all the group. I counsel renaming this to “State” since we’re going to make use of Off and On states.
Renaming a single variant is finished by utilizing the identical course of however it’s essential to choose the only variant contained in the group and in the identical panel you’ll discover the names “Default” and “Variant 2” that you could overwrite, for the change title these must be “Off” and “On”.
In consequence, the layer names of the variants shall be routinely modified to “State=Off” and “State=On”.
Enjoyable truth: In case your part solely has two variants and you employ the names “Off” and “On”, it’s going to present a change as an alternative of a dropdown within the vacation spot!
Let’s Make It Interactive!
Now that you’ve got the part and the variants it’s time to use the interactions.
Click on on the Prototype tab (on the top-right aspect of the display screen) to open the Prototype panel and activate its options.
Choose the Off variant (it ought to have a blue dot) and drag it over the On variant to attach it.
Double-check that you’ve got chosen the entire variant and never simply the background layer, this can make the interplay work even when the consumer clicks on the circle component.
Within the Interplay Particulars panel set the set off to On Click on.
Be sure that the motion is ready to Change To.
Change the animation to Good Animate and use Ease In And Out for a pure feeling.
I will translate these settings right into a single sentence to clarify what’s going to occur: when the consumer Clicks on Off State then Change to On State utilizing Good Animate with Ease In And Out at 300 milliseconds.
Apply the identical settings to the On State variant in order that when clicked once more it, will flip off the change. (Observe: Figma will bear in mind the interplay settings utilized to the weather contained in the group and can apply the identical settings when dragging a brand new interplay so on this case, you’ll solely must double-check.)
Accomplished! If you wish to examine if it really works it’s essential to embody one of many variants right into a body, choose the body after which click on on the presentation button (represented by the play icon) that’s positioned over the tabs.
It ought to permit you to flip On/Off each change individually.
Nevertheless, if you wish to see the true energy of this function, duplicate the part within the body a number of occasions (no less than three or extra) and activate them individually within the presentation.
Utilizing Extra Than Two Variants
This function turns into very highly effective if you add a number of variants and join them individually to make a practical part. Right here is an instance the place I’ve linked a complete of six variants with small adjustments to the background shade to recreate the a number of states of a button, a traditional within the net design trade these days.
That is the checklist of the totally different states for this part, together with additionally the triggers we’re going to make use of to alter from one variant to a different.
Default — Default,
Hover — WhileHover,
Pressed — MouseDown,
Lively — MouseUp (It could possibly be attainable to make use of On Click on for a similar end result),
Hover whereas Lively — WhileHover,
Pressed whereas Lively — MouseDown.
Helpful tip: It’s attainable to make use of MouseDown to simulate the button being pressed however not launched after which use MouseUp to activate a transition, it’s a pleasant interplay element that makes the button really feel extra actual.
Nested Interactive Elements
As for the common parts, you too can create nested interactive parts.
Utilizing the identical instance of the dropdown it will be attainable to create a single interactive part known as Dropdown with two interactive parts inside it: the Dropdown Button and the Dropdown Menu. This may provide help to management how the button and the menu work together with one another, permitting you to outline which variant of the button will set off the opening of the menu.
Observe: It could be attainable to create one other nested part for the dropdown menu choices and use the override to alter the totally different texts.
The principle advantage of utilizing nested interactive parts is the brand new degree of modularity that it gives for prototypes, you can outline the interactions individually and blend them into infinite interactive parts. The Dropdown Menu could possibly be included in different parts (a card, for instance) with out having to prototype the way it works each single time.
It’s attainable to simulate actual Hover and Click on results. (Giant preview)
We are able to go even additional, it’s additionally attainable to navigate from a variant to an exterior body, you may join the only variant to the body by utilizing the On Click on set off and Navigate To motion. On this instance I’ve linked every one of many actions from the Dropdown Menu part to an exterior body with a gray rectangle in the identical place because the menu (Proper, High, Left, Backside).
When one among these actions is clicked, it’s going to navigate to the linked body because it occurs with common prototypes, the true magic occurs when it’s essential to reuse the Dropdown Menu for one more part, it’s going to have all of the interactions inside already performed, so that you don’t have to attach it over and over.
This dropdown menu is a superb instance of how actual an interactive part can get. (Giant preview)
This workflow and the options of the nested parts are wonderful for product design circumstances the place you’ve gotten tons of frames to attach as they may scale back the quantity of labor required to create a high-fidelity prototype for testing, and even if you wish to create a parts library for prototypes.
That was all for the introduction to Figma interactive parts. As you may see, it’s fairly straightforward to make use of this function to create and join interactions inside a prototype. But it surely’s additionally attainable to create numerous sorts of particular results utilizing variants.
Within the following part, I’ll take an in depth take a look at these!
It’s lastly attainable to make infinity loops inside Figma with out an excessive amount of effort and in addition you may create numerous spinners and loading indicators.
Components may be resized to create infinite loops. (Giant preview)
To create a loop, use the After Delay set off set to 1 ms to swap the variants routinely and join no less than two of them.
Observe: 1 ms is the minimal period of time we are able to set in Figma to alter from a variant to a different and make it an nearly instantaneous change; and, because of the AfterDelay set off, it’s going to occur routinely. It’s attainable to make use of a better delay time in the event you want the loop to seem like it has a pause between the variants.
Let me begin the following a part of the article with a be aware about how surprisingly Figma handles rotation.
Figma has a bizarre strategy to rotate components, it appears to be restricted from -179º to a most of 180º and doesn’t enable to go additional than these values. As well as, there is no such thing as a strategy to outline a rotation path so in the event you attempt to rotate from 0º to 180º and vice-versa, as an alternative of doing a 360º flip, it’s going to first rotate to 180º after which come again to 0º (like a swing).
So, to let the system establish appropriately the rotation you will want to make use of no less than three variants.
Right here’s how you are able to do it:
Create a part with three variants: VariantA, VariantB, VariantC (for this instance I modified an ellipse to make the triangle form).
Apply the next rotation to the weather inside the variants (not the variants themselves).
VariantA: set the component to 0º and join the variant to VariantB.
VariantB: set the component to -120º and join the variant to VariantC.
VariantC: set the component to 120º and join the variant to VariantA to finish the loop.
All of the interactions ought to have After Delay (1ms) as a set off and a Linear easing.
The end result shall be a impartial spinner that may have three small pauses of 1 ms every due to the variant swap, not excellent however quick and for a prototype, it’s ok — and you can be in all probability the one one that may discover the pauses anyway.
Helpful tip: You may both use the identical animation time for every variant to make a linear loop, or you may play with the animation utilizing a quicker time for some variants and a slower time for others, this can simulate a curved easing.
The rotation is similar however the animation occasions are totally different. (Giant preview)
I wouldn’t counsel utilizing Figma interactive parts for complicated spinners, for such circumstances it is likely to be higher to create the spinner with a devoted animation app (similar to After Results) and import it into the prototype as a GIF.
Interactive parts permit you to embody extra pleasant particulars into prototypes. I’ll return to the change instance to indicate you easy methods to add micro-interactions to this part utilizing MouseDown and On Click on.
To recreate this instance it’s essential to apply some adjustments to the construction of the change:
Make a replica of the Off state change that you simply already created.
Create one other ellipse form of 16*24 px, place it over the earlier ellipse (the circle).
Unify the 2 ellipses as a boolean group utilizing Union.
Be taught extra about Boolean teams →.
Apply 32 px of border-radius to the Union layer, this can create the distortion impact you may see within the instance.
Create the part (Ctrl/Cmd + Alt + Ok).
Variants and Prototype
You’ll want a complete of 4 variants to make this work: OffState, OffStatePressed, OnState, and OnStatePressed.
Use the Mouse Down set off to simulate the mouse being pressed and activate the distortion by transferring the larger ellipse 8 px to the opposite aspect.
Use the On Click on set off to alter states from Off to On.
3D Animation With A Sequence Of Photographs
Earlier than we proceed, I wish to thank Andrea Cau, the writer of this cool 3D sequence that I’m going to make use of for example.
That is extra of a hack to combine 3D animations right into a Figma prototype, you can additionally use GIFs however this manner you acquire full management over the pictures, not simply play/cease, permitting you to create a prototype that simulates an interface to rotate objects, generally seen in automobile web sites the place you may rotate the automobile.
Think about an e-commerce web site with a 3D mannequin that you could flip round. (Giant preview)
On this case, I’ve used 9 photographs (you can use extra, or much less, relying on the rotation you want), the essential steps to breed this interplay are:
Create one variant per picture (on this case 9 variants shall be wanted) and embody one picture in each, following the sequence order.
Create the arrow button, it is going to be the Hotspot.
Join the fitting arrow to the following variant (repeat for each variant).
Join the left arrow to the earlier variant (repeat for each variant).
Use the Immediate animation as an alternative of Good Animate to keep away from the fade in/out impact and create the phantasm of motion.
The extra I exploit this function the extra I believe it is going to be a game-changer for corporations working within the areas of net and product design. Mastering interactive parts and variants will enable designers to supply higher, extra superior, and practical prototypes with much less effort, providing you with the liberty to work on the precise designs and focus much less on the design device itself.
As talked about earlier, I’ve created a Figma group file with the examples from this text (and some extra experiments that I’ve been doing in the course of the testing of the brand new function). When you be part of the Beta, be happy to duplicate my design, comply with alongside or begin experimenting, and share your outcomes! Play with the animation occasions, change the easing, attempt to rotate, scale components, attempt to nest totally different interactive parts.
In case you have questions or one thing is just not fully clear, depart a query within the Feedback part beneath, or ping me on Twitter (@emi_cicero) — I’d be glad to assist! 🙂
Figma interactive parts playground
Interactive Elements in Figma (video by @mds)
Superior Interactive Elements in Figma (video by @mds)
SketchTogether interactive parts video