Features

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

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.

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

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

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.

Supercharged Boolean Options

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

Issue #26
Nov 1, 2020
#Vectors
#Figma55

Speed Up Your Workflow With Figma Plugins

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

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.

We’re updating the Inspect panel so it’s even easier to translate designs → code. This week, you’ll start to see extra details like documentation, parent component, and animation behaviors.

Learn more ⤵️https://t.co/Qm5h7pXnnj
— Figma (@figma) October 28, 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

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

Color Picker Update

You can now type CSS color names into the color picker. Here is a good demo.

Desktop App: Better Copy as PNG

“Copy as PNG” now has a keyboard shortcut (⌘⇧C or Ctrl+Shift+C) and defaults to 2x resolution.

Using Real Data in Figma

Jacob used Google Sheets Sync plugin to fill his designs with real medicine names while designing an online pharmacy that delivers NHS prescription medicine.

Improve Your Design Handoff + Free Figma Template

“There are tons of tools and platforms available that ease out the design handoff. To maintain a smooth design handoff, both designers and developers must take place into the process. Here are some tips for the designers and developers on how to improve the design handoff.”

Why Motion Matters in Product Design

Design Lead Gabriela Schmitz from LottieFiles gave a talk at Figma Meetup. If you didn’t try it yet, Lottie has a popular plugin for Figma.

Issue #25
Oct 18, 2020
#Animation
#Lottie

Adding hover states

Rogie shows how to add a hover state and make nav component instances inherit all main component triggers.

Adding hover states in @figmadesign.

✨Bonus: Nav component instances inherit all main component triggers. I loved when I learned this. #FigmaTips https://t.co/3l7bBAmYKZ pic.twitter.com/rEyIj5DuTF
— ˗ˏˋrogieˎˊ (@rogie) October 9, 2020

The Forge — Type Foundries Archive

The Forge is a curated collection of premium font foundries. They provide hundreds of high-quality typefaces as downloadable trial fonts for testing.

Offline Autosave

Figma now won’t lose offline changes you make even if you close your browser or your computer crashes.

Issue #24
Oct 4, 2020
#App Updates

#Features