Last week Figma released Variants, one of the key features announced in the keynote at Config Europe. Many teams already started updating their design systems, making them easier to use and implement in code. If you don’t know where to start, this issue includes a large overview of resources and tips on using them. (I was caught a little off guard by an early release and now working on updating the book. The free update should be available in the next few weeks.)

Don’t miss a tutorial on creating isometric illustrations, Figma55 video on supercharged boolean options, Anima 4.0 release, and a few interesting updates from the competitors. Enjoy the issue!

— Eugene

Variants

🚀 Create and Use Variants

Variants are here, even ahead of schedule! 🎉 They let us combine variations of the same component, simplifying the Assets panel and mapping components more closely to code. This in-depth help article shows how to use them.

⏯ Figma Tutorial: Variants

Comprehensive tutorial, if you prefer a video format.

🌎 Figma Variants Playground

This playground walks you through everything you need to know to start working with Variants.

📄 Creating and Organizing Variants

Best practices for creating and organizing Variants by Figma Designer Advocate Anthony DiSpezio.

📄 Bridging Design and Code with Variants

A deep dive into how Variants were built and what challenges the team faced along the way.

📄 Figma Variants Intro

A quick introduction to Figma Variants and how to work with them effectively by Rojcyk.

🐦 Joey Banks: Generate a toggle for the Variants

Setting the value of a property to be either true/false, yes/no, or on/off will generate a toggle in the side panel to make it even easier to switch between options.

🐦 Nikolas Klein: Extending preserved overrides

Figma will now preserve all supported overrides, including overrides to fill and stroke properties, and blur or shadow effects. This Twitter thread provides some context on how the new implementation works with text overrides.

🐦 Juli SomBAT: Using Variants in Spotify web design system

In this example, they replaced 105 button components with just 3. (Sounds like they’ve been using Variants for a while, as Dylan Field used Spotify design system Encore to present the feature in his Config keynote.)

🐦 Mattias Johansson: Using Variants in Spotify mobile design system

Another example from Spotify. Here, they moved from 36 to 4 track row components.

🐦 Tobias Negele: Using Variants to clean up components in Polaris

Shopify used Variants to clean up their local design system for retail.

🌎 Super Variant Bros

This project was included in the last issue, but now Joey added more Mario characters and Variants support. Super fun to play with.

📄 Use the Inspect panel

The Inspect panel was also updated this week to make translating design to code easier. Now it provides extra details like documentation, parent component, and animation behaviors. Watch a quick demo by Rogie.

Using Figma

📄 Creating Isometric Illustrations Made Easy

“Recently, we tried to design some isometric illustrations for one of our projects and we discovered how easy it is to make such visuals in Figma. Here’s a tutorial!”

📄 Speed Up Your Workflow With Figma Plugins

Smashing Magazine published an in-depth look at several plugins that can speed up your design workflow.

⏯ Figma TV

A new project showing how talented designers use Figma.

⏯ Supercharged Boolean Options

A new video by Figma55, quickly demoing a few tips on using Boolean Operators.

⏯ 10 Tips to Work 10x Faster in Figma

Carola Pescio Canale, Product Designer at Dropbox, shares a short list of her favorite tips and shortcuts to speed up Figma workflow.

🐦 Rogie: Preserve icon colors when you swap out icons

Using a Union boolean operator to preserve colors is a mind-blowing hack! 🤯

🐦 Luis Ouriach: Rearrange items with the little pink dot

Don’t miss a response from Nikolas Klein, showing how to resize objects while respecting the distance between them.

🐦 Luis Ouriach: Dark mode in Figma

Damn, that actually works surprisingly well in Chrome. Too bad it forces dark mode on all other websites as well.

🐦 Miguel Cardona: Duplicate line segments

Great tip! Other replies to Rogie’s original tweet are also worth checking out.

⏯ In the File: Designing together with Herman Miller and BASIC

“Building a great relationship between a client and their agency is easier said than done. Join us as we sit down with the BASIC agency and their client, Herman Miller’s Design Within Reach, and get an inside look into how they built a transparent process that works.”

Resources

Anima

Anima has announced the launch of version 4.0, which will allow designers to create prototypes in Figma that are translated into components in React with the click of a button. See an article on TechCrunch or watch an overview by Femke.

🌎 Cover page status pills

Want to indicate the status of your design project in the file browser? This community file includes three different styles and already uses Variants.

🎲 Figopoly

Fully playable version of Monopoly made inside Figma.

💰 Werk UI Kit

110 modern website layouts for a design studio, agency-, corporate- or freelance websites.

Plugins

💰 Overlay

This issue is rich in code generation tools! A new plugin transforming design components into React, Vue, or HTML components. The author provides some context and explains how it works in the article “Introducing Figma to React”.

Font Fascia

List all font families and styles used in a document, and see where exactly they are used. I found this plugin really useful while working on the recent project — first, when switching to a different typeface, and later while reducing the number of webfonts in a project.

Competition

📄 3D Transforms in Adobe XD

Excited to see Adobe shipping new exciting features. “We’re introducing an entirely new way to design in XD with 3D Transforms. Now, you can move and rotate objects forwards, backwards, and across planes to bring depth and perspective to your designs and create new types of user experiences.”

📄 Part of your world: Why we’re proud to build a truly native Mac app

Sketch team wrote a beautiful essay on why they are committed to building a native Mac app. I love high-quality Mac apps, and Sketch is definitely one of them, but most of the time, design apps are not used in solitude. When it comes to collaboration, web-based multiplayer apps are just more open and efficient. See also comments on Hacker News.

Backstage

📄 Behind the feature: the hidden challenges of autosave

“We recently expanded autosave in Figma so you can work offline without worrying about losing changes. Engineer Rudi Chen takes us behind the scenes of building this update: how we made product decisions, managed large merge conflicts, and navigated the complexities of Figma’s multiplayer technology.”