After optimizing our design system UI kit to include Figma's new variants feature, we wanted to share everything we learned along the way to help fellow designers improve their own systems! In this article, I'll explain some advanced methods that will make building and maintaining complex components much easier.
If you're unfamiliar with variants, checkout our previous article "Figma Variants 101". There, you'll learn why variants are valuable and how to get started using them.
👀 Keep an eye out for our design system and some freebies at the end of the article.
Creating a unique variant for every possible size, type, state, ect., can result in a LOT of components that need to be created and maintained. The most efficient way to handle this is to have all variations share one, or a few, base components. These base components will provide consistency and be used to make bulk changes.
How to use base components
Create one base component with every possible pointer placement (hidden) and use to create multiple variants. Then, customize each variant by toggling the pointer layer visibility on/off so every variant has a unique pointer placement.
Create multiple base components, one for each size & icon placement, and use to create multiple variants. Then, customize each variant by overriding the color styles to create different types and states.
For more complex components, create atoms that can be nested inside the variants directly, or in their base components. These atoms will provide additional consistency and allow for easy bulk edits across a large number of variants.
If you're unfamiliar with the concept of "atoms" checkout Brad Frost's online book "Atomic Design".
How to use component specific atoms
Create atoms for the label, carrot, hint text, feedback massages, and placeholder/input text. Then nest them into each base component and create variants. In each variant, toggle the atom's layer visibility on/off or swap with like atoms (e.g. feedback messages) to create unique states.
Create atoms for every possible header and cell type. Then nest them into each base component and create variants. In each variant, swap atoms to create unique columns types.
Learn the best, most efficient, way to build and use every component with UI Prep's Design System UI Kit. It has all the components and styles you need to get started and can be completely customized in less than 2 minutes.
Get the UI Prep design system
Learn with a UI Prep Freebie