View profile

Design Tactics — 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:
  1. “Spacer” components
  2. 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) 👇
Ridd 🏛
I'm constantly asked about spacer components in @figmaacademy discussion boards.

It's been a long time since I used them and I will almost certainly never go back.

In theory, they're a great way to create standardized tokens, but imo they always end up being more of a headache. https://t.co/JrnoKTJfYF
"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 👇
Ridd 🏛
"Slots for dummies"

The complete guide to @figmadesign 's ultimate super power 👇 https://t.co/hhlkNVKuPl
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 👇
Ridd 🏛
4 mental models that make responsive design waaaaayyy easier 👇 https://t.co/Aq0fuCnWbi
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
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.
Ridd 🏛
When I'm working to shape new ideas, my files are littered with .base components 👀

This ensures I'm never making the same tweaks more than once so I can iterate more quickly.

Well @abeyang just made this easier than ever... 👇 https://t.co/81kyD60wbI
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 👇
Helena
🧙‍♀️ 20 second tip 🧙‍♀️
Min width hack — to encode minimum width behavior in a button component, add a rectangle/frame with desired min width and .001 height. Figma will round the ".001" down to "0" and honor the width property. Longer labels will expand the container as expected. https://t.co/DEqiEmjxAS
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
Did you enjoy this issue? Yes No
Ridd

A monthly series highlighting practical tactics for product designers

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.