New FigJam tools. Visual regression testing. Color management.
Welcome to the last issue of 2021! I hope you’re taking some time off work and enjoying the holiday season. It’s been a busy year for me — besides launching the new website and redesigning this newsletter, I shared 715 links in 26 issues of the Figmalion. To find the best things to share, I reviewed 30–35 thousand items in my internal daily digest. That’s quite a lot! 😅
The team at Figma was busy too. Here is a shortlist of my favorite updates shipped this year: quick action menu, bulleted and numbered lists, desktop app for Apple Silicon, Branching, knockout shadow, Interactive Components, new comments, and of course FigJam! (Reminder that App Updates topic is the most comprehensive way to see all changes.)
Looking forward to what 2022 will bring us!
— Eugene
Sponsor
Master UI Design
Discover practical tips with real examples, understand design, and what skills are essential to grow as a designer.
App Updates
New FigJam tools: Highlighter and Eraser
Two new tools in an improved FigJam toolbar: Highlighter (Shift‑M, hold Shift for straight lines) to highlight text and objects and Eraser (Shift-Delete) to delete individual strokes to correct and refine your sketches. See also this tweet from Miggi on how to bring doodles made with Highlighter from FigJam to Figma.
More ways to see and manage your FigJam editors
Admins on the Organization plan now have more ways to see who’s using FigJam and who’s in need of an editor license.
What’s new in Figma: December 2021
“In this last month of 2021, we introduced more ways to make collaboration and creation a breeze, so that nothing gets in the way of your productivity.” A few FigJam updates, a new mobile app for Figma, and partially rolled out new comments.
New frame presets and device frames
Figma added new MacBook Pros, Surface Pro 8, and small and large Androids to the frame presets.
What’s New
Frame 2021: design by the numbers
“Like always, the Figma Community impressed us with not only what but how they build in Figma and FigJam. Here, we’re sharing the trends, insights, and surprises we’ve observed about working together, apart.”
How Figma built FigJam, a whiteboard where “the humanity shines through”
Fast Company: “When COVID-19 struck, Figma users needed a brainstorming tool, fast. FigJam aims to make collaboration more natural — and it’s just getting started.” (Use a private browsing mode to avoid a paywall.)
The Figma prototype challenge: 15 tips in 15 days
Designer Advocate Ana Boyer ran a 15-day prototyping challenge to help the Figma Community learn how to take advantage of the new features and level up their prototyping game. In this post, she is sharing a recap of all tips, along with Figma Community files to get you started.
Turn your Figma design into a live Tilda website in minutes
The team at Awwwards explains how Tilda differs from other website builders and why it’s the best tool for web designers who work on Figma and want to create professional websites without writing code.
How We Structure Design Team Meetings at OneSignal
Lee Munroe shows how the design team at OneSignal structures their meetings, including Figma design crits and fun activities in FigJam.
Using Figma
Visual regression testing for design systems with Figma branches
Jan Toman wrote a guide for using Figma branches to improve the reliability of UI components. His approach of always using branches for design system contributions and creating a set of visual regression tests is similar to the best practices in the development world and should really help with making a design system more robust.
Color management in Figma
Dan Hollick explains why colors in Figma can be different from the colors found on the web. Personally, I usually keep the Figma desktop app in sRGB color space to avoid surprises, only switching to Unmanaged for specific tasks.
How the Figma design team creates sub-brands
In this episode, Charli Marie talks to Remilla (Senior Brand Designer) and Damien (Creative Director) from Figma’s Brand Studio team about how they enable anyone in the company to create brand assets in Figma while still maintaining quality and consistency.
10 Component Tips in Figma
Danny Sapio with a few quality tips for working with components.
Combining shapes
Combining components and shapes to create more advanced shapes.
Fun Figma illustration tips
Ana Boyer shares four tips for illustrating in Figma.
Create a UI into a 3D Perspective in Figma
Learn how to add 3D Perspective to your UI in Figma.
Default Libraries in Drafts
“When you create a file in your drafts, you may have a lot of asset libraries to navigate if your organization and teams have multiple published libraries enabled by default. But what if you only want to see specific libraries when you’re exploring an idea in drafts?”
Resources
File Thumbnail Kit for Figma
Joey Banks created a thumbnail template for files in Figma. “Easily add teammates’ avatars, custom fields and statuses, and instance swap between templates or themes.”
lolsys — DAW
Generic MIDI player by Filipe Soares.
Plugins & Widgets
Warp Tools
Warp your designs using Smudge, Twirl, Bulge, Pinch, Arc, Flag, and Free Transform tools. This premium plugin brings the typical warp tools known from other vector apps to Figma.
Mad Lib
Fill-in-the-blank sticky note, where different people can fill out different parts of the sentence. Works great for e.g. ice breakers, user story templates, and critical user journeys.
Backstage
Ode to Auto Layout
Anthony DiSpezio with an ode to Auto Layout 👏
Figma’s Redesigned Comments, with Ryhan Hassan
Hosts of the Layout podcast joined by a friend of the show Ryan Hassan, designer at Figma, to tell us all about how they’ve redesigned Comments.