#Components & Variants

Use an IconWrapper to nest icons in your components

A smart way to resize icons without having to detach components, hide layers, or add variants.

Versioning components using variants

Greg Huntoon came up with a great approach for versioning components. Love how elegant and easy to use it is. Don’t miss the video at the end and the discussion in the comments.

Flower Patterns

Beautiful flower patterns built with Variants.

Design system updates

A few minor improvements to working with components and instances.

Use a master component when working with variants

Creating variants based on a master component makes it much easier to maintain multiple states.

5 Tips to Design Maintainable Inputs in Figma

“I build several design systems every year and have learned a lot about designing components that are easy to use and maintain. One of the most important ones being inputs. They deserve to be built with great care because of how important, frequently used, and complex they are.”

Reminder: never use variants for different icons

Gleb is right – icons as variants can’t be previewed or searched. In fact, Figma doesn’t recommend using variants to group different icons either. If you have different sizes or versions of the same icon, then you could combine these as variants instead.

Building a menu with nested components

Ridd shows how to build a menu component from multiple nested components.

Right and wrong ways to use Variants

Good thread by Ridd on creating variants from a single base component.

Using Auto Layout to make a table

New short video from Figma:55 on using Auto Layout and Variants to make a table.

Swap your individual variant properties from the right-click menu

A nice way to switch variants without leaving the context. I wonder why this change didn’t make it to the above list of updates?

Move Components Between Files — Master Plugin for Figma

Gleb Sabirzyanov shows how to move components between files using his Master plugin.

Move Components Between Files — Master Plugin for

Figma tips: Building flexible components using the “slot” method

Designer Advocate Luis: ​“We often find ourselves creating lots of different variations of similar components, this can be tedious and difficult to maintain. Using a technique called ​“slots”, we can swap out components very easily from a single component.”
Building flexible components using the "slot"

Placeholder Components — Editable components without detaching in Figma

Adam Ruthendorf-Przewoski introduces the concept of Placeholder Components.
Placeholder Components — Editable components

Publish individual components

You can now select specific components to publish changes in your libraries. Miguel Cardona gives a quick demo in the video, and Figma’s Director of Product Sho Kuwamoto provides context behind this release.

Using Interactive Components & Variants to Create a Segmented Control

Joey Banks with a quick demo.

Tree List

Building a collapsible tree list with Interactive Components, Variants, and Overrides.

Figma tips: Multi-themed components

“When scaling up your design systems, you’ll more often than not require a slightly different theme or treatment for different products or brands. By making use of nested components, team settings, and inheritance, we set this up really quickly within Figma.“
Multi-themed Figma components

Figma Components 101

“Components are elements of your designs that you want to reuse — you can think of them like building blocks. Components help keep your designs consistent and allow you to quickly apply changes across multiple files and projects.”
Figma Components 101

Segmented Control component

Joey Banks build a Segmented Control component using Auto Layout, Variants, and hidden layers.

Features

Topics

Design Tools

Figmalion

Issues:
193
Links:
3,553