#Components & Variants

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.

Rogie: Preserve icon colors when you swap out icons

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

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.

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.

Bridging code and design components with Variants

“Combine variations of the same component for different interactive states, colors, and sizes to mirror your front-end code and simplify your asset library.” (Coming in November.)

Drag and drop Interactive Components into prototypes

“Add interactions between component variations in your design system and reuse them in your prototypes with no extra work.” (Launching in January 2021.)

Excited about creating variants?

Luis shows how converting the whole GitHub Primer buttons library to variants took less than a minute.

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

Office Hours: Complex Component Architecture

Rogie and Joey talk about best practices for building cards, dialogs, navigations, forms, and other forms of complex components.
Office Hours: Complex Component Architecture

Return to Instance after editing the Main Component

Meng To points to a useful feature that can be easy to miss.

Figma Components With a Fixed Aspect Ratio Elements

How to keep an aspect ratio of a nested element when resizing its parent. Really smart workaround!

Build It in Figma: Create a Design System — Components

“Part 2⁄5. Add to your design system by building foundational components and organize them using pages, frames, names, and descriptions.”
Build it in Figma: Create a design system —

Build it in Figma: Design a Responsive Website

In the first part, Rogie uses constraints and components to build navigation that scales from mobile to desktop. In the second part, he shows how to use Auto Layout to design flexible grids, hero, and card components that adapt to any browser size.

Build it in Figma: Design a responsive website

Office Hours: Mastering Components

“Join Designer Advocates Joey and Rogie as they dive into components: see them leverage constraints, apply auto-layout, explore negative frame spacing, styles, and more.”

Office Hours: Mastering components

Monument Valley level recreation with components and Auto-Layout

The link to a community project is in the replies.

Features

Topics

Design Tools

Figmalion

Issues:
193
Links:
3,553