Interactive Components beta, FigJam, and Dropbox’s use of Smart Animate
Exciting updates from Figma this week! First, they added comments to Figma Community, so now you can ask questions or provide feedback on plugins and files. Second, Interactive Components announced on the previous Config reached public beta! I collected a few demos and experiments made by early beta testers. Last but not least, news leaked about FigJam, a new whiteboard space Figma is working on — can’t wait to learn more!
Don’t miss an article on how Dropbox uses Smart Animate to illustrate product design concepts, a guide on switching between light and dark modes, a video stream of building an official Tailwind UI Figma kit, and an open-source Figma alternative. Enjoy!
— Eugene
Sponsor
Northwestern’s Online MS in Information Design and Strategy
Build the in-demand skills, such as UX, UI, and HCI, to drive user interactions. Choose a track in content strategy, analytics, or learning design.
App Updates
Introducing Comments to Figma Community
“Now, you can communicate with fellow creators in the Figma Community via comments. Give in-context feedback on files. Suggest feature ideas for plugins. Ask a fellow creator how they did something. Or, simply share some love.”
New macOS icon
Ryhan shows the process of creating a new Big Sur-ready icon for Figma desktop app.
Interactive Components Beta
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.
Creating overlapping animations
Miguel shows how to create bouncing circles animation with different timings.
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.
Toggle Switch
Joey Banks creates a toggle switch as his first set of Interactive Components.
What you can make with Interactive Components
Kelsey Whelan shows a few examples of really cool animations and interactions.
Figma Tutorial: Create Interactive Components with a Real Project
A new tutorial by Mizko.
What’s New
Figma is working on FigJam
What an exciting leak! “FigJam is a new whiteboard space where you can explore ideas with your team.”
The precipitous rise of Figma and fall of InVision
“In 2017, InVision was the top prototyping tool, with 60% of UXTool survey respondents indicating they used it. Only three years later, their user share fell to 23%, with more than half of those people only using it as a secondary tool. In contrast, Figma has seen an explosion of growth and popularity, rising from about 8% of respondents using the tool in 2017 to about 57% in 2020.”
Penpot
Open-source design and prototyping alternative to Figma. Really cool to see!
Using Figma
Illustrating concepts using Figma’s Smart Animate
How Dropbox uses Figma’s Smart Animate feature to illustrate product design concepts.
Switchable styles from light to dark mode in Figma
“We will teach you how to choose the right shade and contrast of colors, how to structure them properly according to their uses. In addition, we will talk about how colors should be properly applied to Light and Dark modes, followed by some tips and tricks, and finally, teach you a quick and easy way to switch from Light to Dark mode with just a few buttons.”
An Introduction to Wireframing with Figma
“Explore what wireframing is, and why it’s worth doing it with Figma — the most-used UI design tool on the market today.”
A Front-end developer using Figma
“In this post I want to tell you my first experience with Figma, how I am defining my design system, what resources I have found and how to create slides with your own brand.”
Live-Building Figma Kits for Tailwind UI with Auto Layout and Layout Grids
Live-building Sign-in and Registration components for the official Tailwind UI Figma kits.
Why You Should Never Start Your Web Design Process in Webflow
Ran Segall explains why Figma is better for starting and experimenting on designs.
Segmented Control component
Joey Banks build a Segmented Control component using Auto Layout, Variants, and hidden layers.
Baseline Grids with Auto Layout
“In this Figma Tip, learn to set up a 4px baseline grid using layout grids, and how to set offset values to your text blocks using auto layout to account for fonts’ different baselines and keep a consistent vertical rhythm in your designs.”
Using “Set Default Properties”
Miguel shows how to use “Set Default Properties” preference to style your new diagram arrows.
Figma Tips: Adding a glass effect to your designs
Luis shows how to create a cool glass effect using a Morph plugin.
In the File: Build tooling for your team’s ideal workflow
“Building your own tools isn’t just for large teams. Join us as we talk to Daniel Destefanis, Product Design Manager at Discord, and Shaina Hantsis, UX/UI Designer at Avaya, about how to build private plugins with a limited budget and resources.”
Resources
Inclusive Design illustrations
“This file contains character stickersheets and illustrations from Microsoft Inclusive Design’s toolkit. They are commonly used when referencing Microsoft’s Inclusive Design methodology and the diversity in human abilities and preferences.”
Plugins
Auto Layout Styles
Just a few days ago, I tweeted that Auto Layout needs Styles, and now Pavel Laptev releases a plugin just for that! “The plugin brings an experience of Figma styles to the Auto Layout feature. You can make separate configurations of Auto Layouts, save and load them, lock or change at any time.”
Backstage
A few photos of Figma HQ
On her 1st anniversary at Figma, Kelsey Whelan shares a few photos of their cool office.
Luis Ouriach — Design Advocate at Figma
An interview with Luis about working remotely and what it’s like to be a design advocate at Figma.
My Figma Interview Experience (SWE Internship)
Maria Sitkovets recorded her journey of applying to Figma for a software engineering internship, doing the online coding assessment, and getting the opportunity to do the final round of interviews.