Design Tactics #4 โ Spacers, automations, slots, and more...
Welcome to the 254 new members (1,120 total) ๐
Why I don't use "spacer" components anymore
Dan Hollick recently wrote an excellent comparison between two strategies for handling spacing in Figma:
โSpacerโ components
Auto layout wrappers
As a concept, โspacersโ are super attractive as a way to standardize spacing tokens. Additionally, you can increase the opacity during handoff for baked-in redlining. Still thoughโฆ I find they enough friction to my design process that itโs no longer worth it. As a result, itโs been a few years since Iโve used them and I donโt plan on going back. Using additional auto-layout wrappers feels more like building HTML anyway.
Click into the tweet below if you want to see Danโs full comparison (I quote tweeted it) ๐
"Slots for dummies"
My approach towards slot components has evolved so much over the last 6 monthsโฆ
At first I viewed them primarily as a way to insert local UI into a design system component. But I realize now how limited that thinking was.
So this walkthrough is my way of explaining the three situations where it can make sense to leverage slot components. I also added a few practical strategies for using them effectively at the end ๐
Four mental models for responsive design
Figma hacks are fun. No doubt. But my goal is to go beyond tips and tricks. Instead, I want to be someone who helps people think about their craft at a deeper level.
Hopefully these four mental models make the art of responsive design just a little bit easier ๐
Strategies for using variants in responsive design
And if you want to go even deeperโฆ hereโs a video showing how to use variants in responsive design (this was a recent free video from Figma Academy) ๐
Using variants
Create .base components + variants in a single keyboard shortcut
Abe Yang (a Figma Academy member) took my entire 5 step process for building scalable variants and boiled it down to a single automation using Automator.
I spent most of a Saturday trying to get my own automation to work but was consistently blocked by one tricky element. Well, thankfully there are smarter people than me out there and we all get to benefit :) Hereโs the JSON for the automation if you want to use it yourself.
Over the past few months Iโve realized that .base components are potentially more valuable during the exploration process than they are in design systems. Because thatโs where weโre making changes more frequently. The fact is, updating a button set doesnโt happen that often and it isnโt that hard (especially using some of the recent plugins like Automator). However, when weโre dealing with more complex UIโฆ having a single source of truth to tweak your designs can save you a heck of a lot of time.
Clever min-width hack
In code, our buttons will frequently have a min-width. However, we donโt have a native way to mimic that behavior in Figma. Thankfully, Helena has a pretty nifty hack ๐
Figma Academy is open for team licenses only
Last week I closed individual enrollment for Figma Academy so that I could buy myself more time to focus on content creation (I even hired my first employee to help run operations).
However, I decided to leave team enrollment open permanently (mainly because Iโve learned itโs unrealistic to expect an entire budget approval process to happen in a three-week period).
At the moment, weโve had companies like Shopify and Salesforce come back to me to order more seats which has been truly encouraging.
If youโre interested in getting your team to pay for your enrollment, I even created an expense template you can use.
Thatโs all for now! Hope you are having a wonderful start to the new year :)
โ Ridd