Building Complex Figma Variants

Carol Chan
Jan 28 · 7 min read

When I started tackling variants with many properties, I realized that things can get exponentially more complex. With the help of my team, I was able to narrow down the scope of the component I was trying to build, come up with a plan, and test thoroughly.

I’ve compiled my learnings in this guide. This is for designers who have basic knowledge of variants in Figma and have created a couple already. Hopefully, it can help you break down your variant and provide some suggestions on what to consider before building it out.

As an example, I’ll walk through how I created a collapsible card component. Although we are calling it a collapsible card on our team, this component may be more widely known as an accordion. When collapsed, it can be clicked on to expand and show more content.

Collapsed example from Carbon Design System
Expanded example from Carbon Design System

The variant I’m building will include 6 header properties, 2 card types, 2 component states, and 3 card states:

All the possible header properties
2 component states
2 card types

1. Plan out your information architecture.

Get a sense of how complex the variant you’re about to create is by multiplying all the properties together.

For example, if you have 2 types, 5 buttons and 3 states, you will end up with 2*5*3=30 variations.

It’s normal to have up to 1000 components within a variant — but for your own sanity, try to limit this as much as possible.

Mapping out different combinations of properties to compare complexity before beginning
  1. Always try to build a flat variant — Limit the amount of nesting and layers as much as possible.
  2. Think about states that will never exist together — This will help you determine what properties you need. In my collapsible card, I’d never have an avatar and a toggle at the same time, so I combined these properties into one (avatar-toggle) instead of having 2 booleans (avatar=yes/no, toggle=yes/no).
  3. Use nested variants consciously — Nested variants help reduce the number of components that need to be built, but also increases the chance of your variant breaking during configuration and requires more testing.
  4. All configurable elements should show up on the instance swapper panel — For the buttons in my collapsible card, I considered having a boolean property to show or hide a group of 5 buttons, and then leave the toggling of each button to designers. However, I realized designers would have to go 6 layers deep before reaching the configuration options and also might not be aware that buttons are available in this variant. It was more user-friendly for me to create a variant property named “buttons” with options “none, 1, 2, 3, 4, 5”.
  5. Your team might have to detach the variant for further customization — Think about how you can help designers properly configure their instance before detaching it from the main variant. This can help you determine the order of your properties as well. Our team usually leaves the state property to be configured last to account for this scenario.
  6. Separate the property that’s causing the most exponential expansion — If you’ve tried everything and you still have lots of variation, separate the property that’s causing the most exponential expansion into a variant of its own, and then nest it back to the ‘main’ variant. I was able to reduce my complexity this way — going from one variant with 768 variations to having two variants: collapsible card (12 variations), card header (288 variations).

2. Create a base component*

Before building out your variant, create a base component outside of your variant and put everything in there. Include all the layers you need to turn on or off, the number of buttons you want to make available, elements for different states etc.

Simple nesting of a base component

A base component helps safeguard against spending lots of time applying changes that may come up after iteration, testing, or experimentation.

For example, if my team decides we need have an additional button added as an option, I can just add 1 button to the base component and have it apply to my 288 variations — instead of going into each variation and adding a button (adding 1 button 288 times in my case).

Most of the complexity in the collapsible card involved content in the header, so I created a base component for this header base which I wrapped in another frame card header . I then used card header to create a nested variant for all the header variations I needed.

❖ header base is a base component for the nested ❖ card header variant

3. Test and experiment

Take your base component and experiment (try to break it!) before you start duplicating and customizing variant properties. Swap out icons, change the colours, check constraints, resize it, and use it in a “real-life scenario” to see if it works when your team is actually designing.

4. Actually make the variants

Now that you’re confident that you have a robust base component, build out your variant in an orderly fashion. I’ll leave this part up to you.

If you need a refresher, Figma has a great community file on variants 😊

Card header variant (288 variations)
Collapsible card variant (12 variations)
  • Assess as a team whether you want to prioritize the maintenance of your design system or its ease of use for designers. We decided to prioritize ease of use if we ever needed to make a decision. For this reason, sometimes our variants do not have a base component if it increases the number of layers that designers need to click through to get what they need.
  • Remember: Not all members of your team may be as excited about variants as you and don’t always have time to read documentation, so try to make things easy “out-of-the-box”.

5. Descriptions & final clean-up

Go through your layers and make sure it’s all neat and tidy. Add warnings on layers your team shouldn’t touch, and indicators on layers that your team needs to customize — emojis are great for this ⛔️ 🔄 .

Grab an instance of your variant and click through it. As you do so, check the instance swapper and look at the information that shows up. Does it make sense for someone who has a limited knowledge of variants? Have you added descriptions?

How the instance swapper panel changes as a designer clicks into each layer of the variant

FYI: Descriptions on the main component are shown on hover in the asset library too!

Make things foolproof with embedded instructions — For the collapsible card component, I added instructions to indicate when designers should detach their instance and replace certain content.

A collapsible card in the expanded state shows instructions to replace content.

6. Publish it!

Share your new variant with some instructions on how to use it.

My slack message in #ux-announcements
Gif to walkthrough the ❖ collapsible card variant

7. Ongoing iteration

Final note: It’s probably not going to be 100% right the first time. Share the variant with your team, let them use it and invite them to give you feedback.

A working version of this component, built by UX Dev Jamie Kupka, is available on our open source component library, Paprika. We’ve also published a static version of this variant on Figma community that you can dig through.

Hope this helps you on your variant creation journey 🥳

Big thank you to the Galvanize UX team for all their feedback in standardizing the collapsible card component and Jonathan Jakimon for helping me work through problems he’d already come across in building other variants. This piece is just a compilation of all the knowledge they’ve passed onto me! 😊

Build Galvanize

A window to the product, design, and engineering teams at…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store