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