Designing micro-interactions with Figma interactive components

Rodrigo Osornio
Bootcamp
Published in
4 min readMar 8, 2021
An image showing components created with Figma interactive components feature

During the last days I have been exploring the new beta feature of Figma, ‘Interactive Components’. This feature is a great tool for the product designers, it offers new advantages and possibilities. In this post I show some of the explorations I have been doing, mostly on micro-interactions.

First, here’s what I think…

This feature may not be totally new on the product design software environment. I have already used a very similar feature some months ago in other apps like XD. However, it is true that at this moment Figma is The Tool. Adding this feature makes it even more cool. From my experience using this in other applications, this beta seems like a great implementation. The interactive components, together with the variants, the powerful auto-layout and the multi-player, place Figma in a better position.

Having the interactions saved on a design library makes it easier to create more realistic and more complete prototypes. This is a great asset for the initial design research and pre-MVP testing. As this area becomes more advanced, some people mention that soon we will be creating MVP’s directly from Figma. I think that this might be true someday, but at this moment achieving the cleanliness and scalability of the code feels far away.

In the field of the design systems, this tool will make easier to design the micro-interaction and motion of the different components and screens. In terms of documentation, it will also help to communicate this information with the development teams. The scalability and parametrization of the UI kits will also be a great advantage.

The Explorations

1. Input field: I started playing with a simple input field, defining its different states and micro-interactions. One nice thing about this, is that when you create instances of the component you just have to edit the text once, not in each variant.

Showing the states and interactions to create an input field interactive component.
Input field interactions
An input field prototype showing its different states and micro-interactions.
Input field prototype

2. Loader: this is a simple loader component that loops indefinitely. This is an example of how the motions could be created directly with Figma and included in the design system documentation. These kind of animations could be then replicated with svg/css animations.

Showing the states to create a loader component.
Loader interactions
A loader prototype animation, that loops indefinitely
Loader prototype

3. Upload button: playing with the micro-interactions of an icon button. The interesting part about this one is that it is re-using the loader as a nested interactive component (amazing Figma!)

Showing the states and interactions to create an upload button interactive component.
Upload button interactions
An upload button prototype showing its different states and micro-interactions.
Upload button prototype

4. Save button: this interaction alternates between the use of text and icons.

Showing the states and interactions to create a save button interactive component.
Save button interactions
A save button component prototype showing its different states and micro-interactions.
Save button prototype

5. Activate button: now playing with icons and text simultaneously.

Showing the states and interactions to create an activate button interactive component.
Activate button interactions
An activate button prototype showing its different states and micro-interactions.
Activate button prototype

6. Dropdown: this micro-interactions can be defined at a library level and then re-used along the different flows and wireframes (I haven’t already explored this on a project).

Showing the states and interactions to create a dropdown interactive component.
Dropdown interactions
A dropdown component prototype showing its different states and micro-interactions.
Dropdown prototype

7. Subscribe component: this is an exploration that combines interactions from the previous components. Having input fields on the prototypes, where you could actually type, it’s a desired feature. I used a hack here, not exactly the most efficient solution. Is there something in the roadmap for this feature Figma?

A subscribe button prototype showing its different states and micro-interactions.
Subscribe prototype

I always try to remind myself that tools are just tools. Designers should be able to create with whatever they have. But having this tool is really helpful and makes things funnier and easier. Thanks Figma!

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. Bootcamp is a collection of resources and opinion pieces about UX, UI, and Product. To submit your story: https://tinyurl.com/bootspub1

Rodrigo Osornio
Rodrigo Osornio

Responses (14)

What are your thoughts?