There's a right way and a wrong way to use variants in @figmadesign. When used correctly, they can be the most powerful part of your entire workflow. These are the 5 steps I do for every single component I create 👇
01 — Create a "base" component This will function as the single source of truth for all of your variants. So include everything you think you'll need. I like to follow this naming format 👇 ".base—[ComponentName]" (using a . in front of the name hides it from your libraries)
02 — Duplicate your .base component 2x Careful... don't duplicate it once, and then duplicate that new instance the 2nd time. Both instances must come directly from the .base component to preserve all of your overrides when you switch between variants in the future.
03 — Create new main components out of your two instances If you know what your variant names will be you can go ahead and change them now. For web projects, I'm almost always starting with "Default" and "Hover".
04 — Select your two new main components and hit "combine as variants" in the right panel At this point you can make your style overrides too! Notice how I'm hiding/showing the button and icon depending on the state? This is why you include everything you need in your .base 👍
05 — Now you can create the rest of your states like normal and all new variants will be tied back to the original .base component without you having to do a thing 👏👏👏
Two benefits to tying everything back to the .base—Component 👇 First = one source of truth. Let's say I want to update the spacing or add an element to my lesson cards. Now I have a single knob to turn and my changes reflect across every state of the component all at once.
Second = preserving overrides Have you ever switched between variants and all of your text or color overrides disappeared? It's the worst, I know. Using a .base component that lives outside of your variants list ensures that never happens again 👍
If you enjoyed this and want to take more deep dives into Figma make sure you get on the list for @figmaacademy👇 https://www.figma.academy/
I also created a Figma playground + video lesson that walks you through the entire process. You'll get to see a more complex example showing just how powerful variants can be with nested .base components 💪 https://www.figma.com/communit...
@Ridderingand @figmadesign Excellent tut, thanks @Ridderingand
@abenzer @figmadesign Appreciate it Alex 🙏
@Ridderingand @figmadesign Lol I literally tweeted my frustration last night for not using components halfway down my login and registration pages of a design. Great advice!
@elliottaleksndr @figmadesign Hah we’ve all been there 😇 I’m at the point now where even when I’m exploring I’m using components for speed. You might enjoy this one if you haven’t seen it yet 👇
@Ridderingand @figmadesign Great info! Thanks Ridd for this crisp tutorial 🙌
@k_sivacharan @figmadesign You’re most welcome! Hope it helps 👌
@Ridderingand @figmadesign Thanks for this quick tutorial. It was really helpful. Thank you. :)
@PatelVilakshan @figmadesign You’re most welcome!
@Ridderingand @figmadesign thanks for the tutorial! I've been thinking about this method a lot, but I have one doubt: do you think that having lots of hidden layers spread throughout your design file could slow down the performance?
@grungelover @figmadesign Haven’t run into any issues. Feels like you’re going to run into trouble when you’re dealing with many pages vs. many hidden layers 🤷♂️
@Ridderingand @figmadesign Thats a super insightful thread Ridd!
@SaloneeNadkarni @figmadesign Glad to hear it!
@Ridderingand @figmadesign This is brilliant - I can’t believe this was the secret all this time 🤯 been using variants for months and was always annoyed when my overrides reset whenever I switched variants 🤦🏻♂️