Features: Components & Variants

All you need to know to start using Variants in Figma

A short overview of Variants, when to use them, current limitations, and how to get started.

Styling the wrapper around Variants

One of the unexpected features, but can be useful when organizing your design system.

Neat, you can style the wrapper around variants in @figmadesign pic.twitter.com/a21pO8YQ7K
— Steve Ruiz (@steveruizok) November 2, 2020

Office hours: Get started with Variants

Figma’s Designer Advocates share how Variants work and answer questions.

Override Improvements and More

A few quality-of-life improvements to components, team libraries, and the Inspect tab.

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.

With Variants in @figmadesign, 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! 🎛️ #FigmaTip pic.twitter.com/C2zuDh6lUw
— Joey Banks (@joeyabanks) October 28, 2020

Rogie: Preserve icon colors when you swap out icons

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

Here it is. A workaround for your buttons to preserve icon colors when you swap out icons.

This has been another #TotallyRadFigmaTip from ya boi.

Here's the @Figmadesign file: https://t.co/USmdie8ldt #figmatips #figmatip pic.twitter.com/bueqfLyVFS
— ˗ˏˋrogieˎˊ (@rogie) October 30, 2020

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.

Tobias Negele: Using Variants to clean up components in Polaris

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

We’ve been playing around with variants in @figmadesign for a few weeks and leveraged the feature to clean up components in #Polaris for Retail, one of our local design systems. This makes it so much easier to choose and switch between variants. There’s no going back. @ShopifyUX pic.twitter.com/cmElLM23fB
— Tobias Negele (@tobiasnegele) October 27, 2020

Mattias Johansson: Using Variants in Spotify mobile design system

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

Had some fun playing with @figmadesign variants for our Spotify mobile design system. In this example, moving from 36 to 4 track row components, resulting in a much cleaner asset panel! ✨ Having both global and variant descriptions was a nice bonus! pic.twitter.com/V3tWdNfUa4
— Mattias Johansson (@mattiasjo) October 28, 2020

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.)

Psyched to integrate @figmadesign variants into our Spotify web design system. It's so much easier to use this way- we had 105 buttons components before and will now have 3! 🤯 pic.twitter.com/An3N0e6QiH
— Juli Sombat (@jsombat) October 28, 2020

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.

Quick @figmadesign FYI: With Variants we are also extending what overrides are preserved when swapping instances or changing variants.

But the rules for variant changes are a bit stricter. I’ll explain in the thread, but you can also read up upon it here: https://t.co/vLFORquEOI
— Niko (@nikolasklein) October 23, 2020

Figma Variants Intro

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

Bridging Design and Code with Variants

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

Creating and Organizing Variants

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

Figma Variants Playground

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

Figma Tutorial: Variants

Comprehensive tutorial, if you prefer a video format.

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.

Prepare for Variants

While feature introducing Variants of the same component is currently in beta, this help article provides recommendations on how to prepare for its release in November.

New Instance Swap Menu and Inspect Tab

Two features announced on the Config Europe are already live! New Instance Swap menu and updated Inspect tab help both designers and developers navigate large, complex libraries in Figma.

Embracing the tension between code and design

Announcements from the above keynote, presented as a blog post. “We believe in embracing concepts from engineering and design, adopting the rigor and reusability of code while preserving the rapid iteration and uninhibited exploration that makes visual design so powerful. […] When code and design components mirror each other, teams can move much more efficiently. Today, we announced Variants, Interactive Components, and improvements to Auto Layout that will allow teams to do just that.”

#Components & Variants