Features

Figma Interactive Components Tutorial – 15 Examples

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

Making Pencil tool a little more interesting

Steve Ruiz shows a plugin he is working on and explains the process. Looks really cool!

making @figmadesign's pencil tool a little more interesting ✍️👀 pic.twitter.com/cbQua4ZMDT
— Steve Ruiz (@steveruizok) March 7, 2021

Issue #35
Mar 14, 2021
#Plugins

Figma Components 101

“Components are elements of your designs that you want to reuse — you can think of them like building blocks. Components help keep your designs consistent and allow you to quickly apply changes across multiple files and projects.”

Figma Tutorial: Create Animations in Your Web, UI Design & Prototypes

Mizko shows how to build animations with Figma’s Smart Animate feature.

Figma Tutorial: Smart Animate - Create UI & Web

Figma tips: Multi-themed components

“When scaling up your design systems, you’ll more often than not require a slightly different theme or treatment for different products or brands. By making use of nested components, team settings, and inheritance, we set this up really quickly within Figma.“

How to set up custom design linting in Figma using the Design Lint plugin

The plugin author’s tutorial on creating a design linter specific to your team.

Issue #35
Mar 14, 2021
#Plugins

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

Battleship Game

One more game made entirely in Figma using Interactive Components.

Go Game

Board to play Go with Figma.

Sudoku

Fully working Sudoku game made by Dave Williames. (Also see as a Community file.)

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

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.”

New macOS icon

Ryhan shows the process of creating a new Big Sur-ready icon for Figma desktop app.

Small update — today we’re rolling out a new macOS icon that’s designed to feel at home on Big Sur. pic.twitter.com/yWRPwslpkC
— Ryhan (@ryhanhassan) February 25, 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

Creating overlapping animations

Miguel shows how to create bouncing circles animation with different timings.

Hi everyone! Wanted to share something I'm excited for w/ interactive components in @figmadesign, overlapping animation!

Here I have three different interactive components using delay interactions to make bouncing circles with different timings. Let me know what you think! pic.twitter.com/xg6Dy3zmCP
— miggi from figgi (@miggi) February 26, 2021

Talky – Interactive Component Animation

If you’re in beta, check out this community file by Bruno Figueiredo.

Criss-Cross Game

Miguel builds a criss-cross game with a single frame and Interactive Components.

Interactive Components in Figma bring so much potential for prototyping interactions.

Sign up for the beta here! https://t.co/d4xztICaFA

This is one frame 👇🏽 pic.twitter.com/XKmgEr4FKj
— miggi from figgi (@miggi) February 25, 2021

Toggle Switch

Joey Banks creates a toggle switch as his first set of Interactive Components.

Creating my very first set of interactive components in @figmadesign. 🔥🎛️ pic.twitter.com/apIht8EpFb
— Joey Banks (@joeyabanks) February 26, 2021

#Features