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!
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.
“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.”
Ryhan shows the process of creating a new Big Sur-ready icon for Figma desktop app.
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.”
See how Interactive Components can dramatically reduce the number of connections you create.
Miguel shows how to create bouncing circles animation with different timings.
If you’re in beta, check out this community file by Bruno Figueiredo.
Miguel builds a criss-cross game with a single frame and Interactive Components.
Joey Banks creates a toggle switch as his first set of Interactive Components.
Kelsey Whelan shows a few examples of really cool animations and interactions.
A new tutorial by Mizko.
What an exciting leak! “FigJam is a new whiteboard space where you can explore ideas with your team.”
“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.”
Open-source design and prototyping alternative to Figma. Really cool to see!
How Dropbox uses Figma’s Smart Animate feature to illustrate product design concepts.
“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.”
“Explore what wireframing is, and why it’s worth doing it with Figma — the most-used UI design tool on the market today.”
“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 Sign-in and Registration components for the official Tailwind UI Figma kits.
Ran Segall explains why Figma is better for starting and experimenting on designs.
Joey Banks build a Segmented Control component using Auto Layout, Variants, and hidden layers.
“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.”
Miguel shows how to use “Set Default Properties” preference to style your new diagram arrows.
Luis shows how to create a cool glass effect using a Morph plugin.
“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.”
“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.”
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.”
On her 1st anniversary at Figma, Kelsey Whelan shares a few photos of their cool office.
An interview with Luis about working remotely and what it’s like to be a design advocate at Figma.
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.