Features: Interactive Components

Introduction to Figma’s interactive components

“While it’s always been possible to animate controls using Figma prototypes, it required some crazy workarounds and a ton of views to be created. With the new functionality, it’s super easy, and it allows you to create some pretty nifty interactive and animating prototypes.”

Designing Micro-Interactions With Figma Interactive Components

Rodrigo Osornio shows a few cool micro-interactions made with Interactive Components.

Using Interactive Components & Variants to Create a Segmented Control

Joey Banks with a quick demo.

Using Interactive Components & Variants in @figmadesign to create a quick segmented control. ↔️✨ pic.twitter.com/VEfAxc9PG7
— Joey Banks (@joeyabanks) March 15, 2021

Input Field Interaction using Interactive Components in Figma

“A detailed video showing how to create an input field or text box using the interactive components feature in Figma. Now within a single frame, we can have a real input field experience in Figma.”

Figma’s Interactive Components Were Not Designed For This

Steve Ruiz looks at the evolution of prototyping tools in Figma: “Interactive Components might not have been meant to make text inputs or games, but when you give talented people simple tools to use, they can make some pretty amazing things. And I am sure that the feature was made to be fun — and in that sense, mission accomplished!”

The FigMatrix has you

Cool illustration and background animation made in Figma using the new Interactive Components.

The FigMatrix has you. Illustration and background animation done in @figmadesign using the new Interactive Components prototyping feature! If you have the beta, download and run it here:https://t.co/gPqCF1LFrq pic.twitter.com/CBSnSlUMgG
— Joey 🙃 (@mrhammn) March 1, 2021

Minesweeper

Any list of games won’t be complete without a Minesweeper.

🔥Here's a fresh new experiment I made using 'Interactive components' in @figmadesign...

A fully playable version of MINESWEEPER as a Figma Prototype!! 😱
Even with a working (mostly) timer.

Try it out:https://t.co/F0AxhM4JkG #InteractiveComponents #Experiment #Design #Figma pic.twitter.com/5rfCKyzEPc
— Dave Williames (@DavidWilliames) March 2, 2021

Started playing around with the beta of 'Interactive Components' in @figmadesign...

I managed to create a fully working game of Sudoku as a Figma Prototype 🔥
You even enter the numbers via your keyboard! 🤯

Try it out: https://t.co/qumffbs70A pic.twitter.com/oGUBQgWjro
— Dave Williames (@DavidWilliames) March 1, 2021

Figma Interactive Components Tutorial – 15 Examples

Nice demos of Interactive Components with a practice file by Udayraj Sathe.

Tree List

Building a collapsible tree list with Interactive Components, Variants, and Overrides.

✨ For anyone interested to see how I built this, I published my sample file to the @figmadesign community. The example includes how to use variants, nested variants, and interactive components while persisting overrides.

👉 Figma File: https://t.co/7uVxmlBAnq https://t.co/Tzs8cm3sd9 pic.twitter.com/bbitoLWPM4
— Miguel Solorio (@miguelsolorio_) March 2, 2021

Before and after Interactive Components

Speaking of switches, check out this comparison of before vs. after by Joey Banks.

The rough amount of screens it took to create this prototype *before* Interactive Components in @figmadesign versus the *single screen* it takes now... 🔥 pic.twitter.com/iMToTNlgHW
— Joey Banks (@joeyabanks) March 2, 2021

Creating a switch

Quick demo of using Interactive Components with Smart Animate by Pablo Stanley.

Creating a pixel art grid

Pablo Stanley builds a simple pixel art editor. (And here is another take with a color picker.)

Short tutorial creating a pixel art grid using the new interactive components from @figmadesign pic.twitter.com/o9iFaqHR5E
— Pablo Stanley (@pablostanley) March 4, 2021

Figma for Classic Mac OS

Fun project by Wesley van Breukelen. (I only wish pull-down menus looked right!)

Had some fun playing with Figma interactive components, variants and auto layout. ^^ @figmadesign pic.twitter.com/OII57Ggvcz
— Wesley (@Weszelnl) March 3, 2021

Office Hours: Get started with Interactive Components

Check out Figma’s office hours to get an Interactive Components demo and learn tips and tricks.

A list of cool things made with Interactive Components

Rogie compiled a giant list of cool demos and experiments.

Ok, wow. Figma released interactive components a few days ago it is already blowing my mind what you all have been able to make. I compiled a list of all the cool things y'all are making , here:

🧵
— ˗ˏˋrogieˎˊ (@rogie) March 1, 2021

Join Figma’s interactive components beta

“With interactive components, you can create reusable, shareable interactive elements for your prototypes. Sign up to get early access to the feature and help us improve before launch.”

Why Interactive Components are important for design system teams

See how Interactive Components can dramatically reduce the number of connections you create.

Interactive components are here my friends.

Here's a quick run through of what they mean and also why it's important for design systems teams.

🍜

Sign up for the beta here: https://t.co/PYXoKapYVL pic.twitter.com/dZdqJ1fhDd
— luis. (@disco_lu) February 25, 2021

#Interactive Components