Design Tactics #6 — The do's and don'ts of .base components
Welcome to the 203 new readers (1428 total) 👋
Introducing the Designer Talent Network
I would LOVE to promote you to top design teams 😎 Yup! You read that right! Starting today I’m launching the Designer Talent Network and I made a 50-second video to share more about how it works (you’re the first group to see this clip) 👇
Introducing the Designer Talent Network
Whether you’re looking to take a massive leap forward in your career or you’re just curious to see what might be out there…
Click here 👉 Apply for the Talent Network
How to use .base components effectively
Do you want a little glimpse into just how nerdy I really am?
A few weeks ago I had a two-hour car ride where I spent the entire time processing my thoughts on .base components through voice memos. Ya…
I still think they are one of the most powerful design tactics in Figma, but my approach towards them has definitely evolved over the last year. So this thread represents the output of that car ride 👇
Three situations where it probably doesn't make sense to use .base components
1 — When you’re designing simple atoms/molecules in a design system that do not have massive variant sets
Following the thought process behind the thread above, these types of components don’t typically require a lot of iteration. How often are you really changing your buttons or your form components?
These are the components that you’re constantly performing overrides on too. So .base components often just get in the way. Not to mention Figma isn’t perfect. Bugs happen, and the more we can simplify our components the less likely we are to encounter them.
Lastly, the Figma plugin ecosystem is straight 🔥and I firmly believe that it’s easier to deal with these sorts of components at scale than it has been in years past.
2 — When you’re part of a dedicated design systems team
If your job is solely to work on components, then you are not the end consumer. And as a result, everything you do should be done to make the end consumer’s life a little bit easier.
In that case, it’s almost always worth it for you to put in the manual work to give others a more straightforward experience.
3 — When you’re part of a large, established company
.base components present a ton of efficiencies but at the cost of simplicity. If you’re working on a smaller team where you can easily share context and everyone is responsible for both the DS and the production UI… then .base components can really help you fly 💨
But large teams often have designers insert components with very limited context for how they’re supposed to work. If those components contain .base components, that’s just one more thing that could trip people up and cause conflicting overrides.
P.s. if you want to go deeper here’s a nice article I recently added to Figma Academy on the pros and cons of .base components
Saving time with a couple of my favorite plugins
Here’s a quick video walking you through one of my favorite workflows of all time… combining the master plugin with content reel. It’s an excellent way to iterate on components while making sure you always have that single source of truth to make tweaks so that you can explore more efficiently.
If you haven’t used the Master plugin before, it’s some of the best money you can possibly invest in design tooling. I even bugged the creator for a 20% off coupon code for Figma Academy that I’ll pass along to you (shhh… don’t tell Gleb 🤫). Click here to check it out.
Saving time in Figma using the Master plugin
Creating primitives using "Slot" components
I think a lot about how to build components that are as flexible as possible. If we’re constantly feeling like we need to detach instances then that’s almost always because we built our components to be too rigid in the first place. Well, primitives are the gold standard in that category…especially when combined with slots!
This walkthrough breaks each step of the process down into individual video snippets 👇
If you've been on the fence...
I’ve included a few highlights from this past cohort below :) Don’t forget to use the code `DESIGNTACTICS` when you enroll for early access and receive $100 off. You can start learning today.
Ok… that’s all for now! Thanks for reading and have a wonderful weekend everyone ☀️
P.s. Before you go, take 10 seconds and let me know if you enjoyed this issue using the text button below. I want to make this the highest value design email that hits your inbox, so I’ll respond to each and every email with ideas, feedback, or even if you just want to say hello 👋