Issue #63 • May 2nd, 2022

A Two-Month Recap

Hi friends! It’s been a minute. On February 25th, I took a break from Figmalion after Russia attacked my home country Ukraine. While I moved to the US almost 10 years ago, my family and friends are still there. Most of them had to flee their homes to get to safety. After two months, dealing with war and its consequences became a part of our daily lives, and now I’m trying to return to regular activities and get some sense of normalcy. I’m grateful to everyone who sent me words of support — that meant a lot!

Working on this issue reminded me how much I love design, great tools, and this community. So many exciting things happened during the last two months! While I couldn’t include everything, this issue should be a good recap of the most important things.

— Eugene

Figma Updates

Little big type updates

A few typographic updates: the new default font size list (finally including 16px default on the web!), Inter replaced Roboto as a default font, and support for faux superscripts and subscripts that can be applied to any font — check out Tom Lowry’s behind the scenes deep dive for juicy details.

Localization, languages, and listening

Dylan Field shared three steps that Figma takes to become a more global company. First, Figma incorporated in Japan, set up an office in Tokyo, and started working on localizing Figma into Japanese. Second, they’re expanding in EMEA by opening offices in Paris and Berlin. And last but not least, Figma finally added support for RTL languages! Great news for designers working with Arabic, Hebrew, and Urdu who relied on 3rd-party plugins in the past. See thread by Lauren Budorick on why implementing RTL support was a huge undertaking.

We’ve made some updates to permissions on branches

“These fixes improve the user experience for users who only have access to the branch, so that they can more effectively work within the branch and are less likely to face errors.”

Desktop app tab updates

Tabs now show new Figma, FigJam, and prototype favicons. Using an emoji in the file name automatically updates the default icon. Tabs also can be pinned to the left side of the tab bar or dragged out of the existing window to create a new one (super useful for keeping an actual-size preview while working zoomed in).

FigJam Updates

FigJam improvements

Several updates to make brainstorming and diagraming even easier in FigJam: a simplified toolbar, text resizing, sticky stamps and highlights, image borders, and more.

Use the latest version of widgets placed on a board

Manually update widgets that are already placed on a board.

FigJam for iPad: space to explore and ideate

FigJam is now available on iPad! Beta testing was announced back in January, and I’m really glad they started with FigJam. While I can’t see myself using the iPad for high-fidelity work, it’s perfect for making low-fidelity sketches with Apple Pencil or laying out flows. See the Twitter thread by Robert Bye, Product Manager of Mobile and Desktop Apps at Figma, on making some of these decisions while building the app.

Even more FigJam improvements

More ways for teams to customize their workspace and freely express themselves: organize documents into Sections, more colors (including adding your own!), sticky note resizing, and more.

Some gifts to celebrate FigJam’s first birthday!

Three new features in FigJam: washi tape (which was first introduced as an April Fools’ joke!), fun chat, and new stickers.

#FigJam

Using Figma

Naming Variants

Joey Banks shares how he typically names Variants in Figma and the approach he tries to take whenever he is feeling stuck.

Tidy workspace, tidy mind: How to optimize collaboration in Figma

Interesting way to organize a large Figma workspace using a department store floor map as a mental model.

#Organizing

5 principles for using .base components the right way

Ridd discusses a few key principles for using base components: How often are you iterating on the component? How complex is it? Avoiding problems with Interactive Components. Pairing primitives with slots. Bringing in base components early on to speed up the process.

Removing base components

Speaking of base components, Greg Huntoon explains why he decided to stop using them and how he used Automator plugin to decouple base components from the design system.

#Components & Variants

Interactive Components with Lottie files

Nice trick on using “after delay” animation in combination with a Lottie file to avoid an infinite animation loop and play it only once.

Light controller for illustration

A cool and creative way to use a component as a light controller.

Jordan Singer’s experiments

Fascinating thread showing how countless experiments with Figma plugins and API finally led to the development of Automator. This thread was published in March, and two months later today, Jordan announced a $3M seed round for his company — can’t wait to see what he will build next!

#Jordan Singer

Building Custom Tables in Figma

Buzz Usborne published a walkthrough of creating scalable and customizable tables in Figma using a single component.

#Tutorials

Webflow vs. Figma (and when to use them)

Charlie Marie explains why she values and uses both Figma and Webflow in her process.

FigJam 101: Introduction tutorial for creating flows & brainstorming

Charli Marie helps get started with using FigJam by introducing the tools for creating user flows, sitemaps, wireframes, and brainstorming activities.

Made in Figma

Turning Red

Vijay has some next-level patience and perseverance — it took 19K vector shapes to create the realistic fur of the panda. Mind-blowing!

Robotnik

Fantastic photo-realistic portrait of Jim Carrey as Robotnik from the Sonic movie.

Apple Event invite

A new tutorial by Fons Mans on how to recreate an Apple Event invite.

Community

Interface Inventory Blueprint

Interface Inventory is a key research activity before any design system is started. See also the thread by Jan Toman on why he created this resource.

#Design Systems

Tweet kit (UI Kit)

Unwrapping Twitter’s tweet as a Design system component.

Plugins

Storybook Connect

“I’m thrilled to announce that Storybook Connect for Figma is now in beta. It’s a Figma plugin which brings your stories into the design workspace. That streamlines design handoff and UI review because teams can reference code components alongside their designs.”