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.
The variant I’m building will include 6 header properties, 2 card types, 2 component states, and 3 card states:
Order of operations:
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.
Things to consider / best practices:
- Always try to build a flat variant — Limit the amount of nesting and layers as much as possible.
- 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).
- 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.
- 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”.
- 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.
- 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.
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.
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 😊
- 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?
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.
6. Publish it!
Share your new variant with some instructions on how to use it.
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! 😊