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!
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.
Comprehensive tutorial, if you prefer a video format.
This playground walks you through everything you need to know to start working with Variants.
Best practices for creating and organizing Variants by Figma Designer Advocate Anthony DiSpezio.
A deep dive into how Variants were built and what challenges the team faced along the way.
A quick introduction to Figma Variants and how to work with them effectively by Rojcyk.
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.
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.
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.)
Another example from Spotify. Here, they moved from 36 to 4 track row components.
Shopify used Variants to clean up their local design system for retail.
This project was included in the last issue, but now Joey added more Mario characters and Variants support. Super fun to play with.
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.
“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!”
Smashing Magazine published an in-depth look at several plugins that can speed up your design workflow.
A new video by Figma55, quickly demoing a few tips on using Boolean Operators.
Carola Pescio Canale, Product Designer at Dropbox, shares a short list of her favorite tips and shortcuts to speed up Figma workflow.
Using a Union boolean operator to preserve colors is a mind-blowing hack! 🤯
Damn, that actually works surprisingly well in Chrome. Too bad it forces dark mode on all other websites as well.
“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.”
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.
Want to indicate the status of your design project in the file browser? This community file includes three different styles and already uses Variants.
Fully playable version of Monopoly made inside Figma.
110 modern website layouts for a design studio, agency-, corporate- or freelance websites.
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”.
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.
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.”
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.
“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.”