Issue #35 •

Interactive Components and games

New use cases for Interactive Components keep rolling in. The creativity of the design community is truly mind-blowing! As you’ll see in this issue, Interactive Components have been used not only to add interactivity to standard UI elements like input fields and switches but also to create full-blown games like Sudoku, Go, or Minesweeper. (At this point, I began suggesting Figma to kids wanting to build video games. It’s a great intro to visual programming without actual programming.)

— Eugene

Sponsor

Check out these free Figma templates to speed up your workflow

SaaS Design is offering free starter UI templates to help save you time in Figma.

Learn more →

App Updates

Stay up to date on design work in Slack

“With the Figma app for Slack, you’ll be notified when you’re tagged in or invited to a file, someone replies to one of your comments, and new comments are made in files you’re subscribed to.”

Figma is working on voice chat

Makes so much sense. Figma is going after all collaborative tools.

Figma is working on Bulleted Lists

At this point, we all probably have built our own Auto Layout components for bulleted lists, but it still would be nice to get the real thing.

Interactive Components Beta

A list of cool things made with Interactive Components

Rogie compiled a giant list of cool demos and experiments.

Office Hours: Get started with Interactive Components

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

Figma for Classic Mac OS

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

Creating a pixel art grid

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

Creating a switch

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

Before and after Interactive Components

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

Interactive Illustration in Figma

Pablo’s live stream on creating an animated illustration in Figma.

“Navigate to” connections convert to “Change to”

Love Figma’s attention to detail.

Tree List

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

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 Interactive Components Tutorial – 15 Examples

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

Sudoku

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

Go Game

Board to play Go with Figma.

Battleship Game

One more game made entirely in Figma using Interactive Components.

Minesweeper

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

The FigMatrix has you

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

What’s New

Figma.gallery

Explore beautiful artworks created by artists pushing the boundaries of Figma as a design tool.

Using 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!”

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.

Inside Figma: tips from the team that builds Figma

“A few weeks back, we asked ten Figmates across engineering, product, design, and research to share what they love most about Figma, including their favorite use cases and tricks. During a recent live stream, they walked through speed tips and keyboard shortcuts, brainstorming exercises, and their most-used templates — all in five minutes or less.”

Creating a design system in Figma: a practical guide

Marc Andrew gives valuable tips and advice on the best way to start your own design system.

UFO game

Pablo Stanley explains how to create a simple UFO game.

Design and preview at the same time

Great tip from Rogie on designing zoomed-in and previewing work in actual size at the same time.

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

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

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

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

Plugins

Making Pencil tool a little more interesting

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

Backstage

Bringing Design Online, with Figma Co-Founder/CEO Dylan Field

In this episode of The Ones Who Succeed podcast, Campbell Baron talks to Dylan Field about his experience dropping out of University and becoming a Theil Fellow, raising 4 million dollars at 19 to start Figma, and lessons learned as the CEO of a design Unicorn.

Behind the feature: comments, contextually

“We recently introduced commenting on files in the Figma Community, allowing you to ask questions, share your opinion, or offer feedback. Here, engineer Emily Zhong shares how she and a team across design, product, and engineering thought anew about what it means to connect and engage in the community.”

Features

Topics

Design Tools

Figmalion

Issues:
173
Links:
3,283