I learned about this trick from one of my all-time favorite Config talks: Pushing Figma to its Limits, delivered by Figma community wizards: Chudo Loo, Andrei Iancu, Gleb Sabirzyanov, Vitalii Sologub, and Shuaiqi Sun (aka Mr. Biscuit).
If you need to be able to edit the width of a nested instance within another component, you’re going to need a Resizer. Here’s how you make them and put them to work:
You've got yourself a Resizer now! All that's left is to get it inside of the component whose width you want to control. You could drag the Resizer you just made into it, or paste in a copy.
Depending on what component you drop your Resizer into, you should expect to encounter some auto layout wrinkles. For example, if you’re putting this in a date picker:
Fixing these kinds of wrinkles often involves doing some combination of the following:
Once you've re-calibrated all your auto layout settings, you’re done!
Peel off an instance of the component 'suped up with the newly added <span class="figma-frame">Resizer</span>. Instead of grabbing one of the outer edges and stretching it, click through and select the Resizer frame nested within. Since it’s barely visible on the canvas, I’d recommend selecting it using the layers panel. Once selected, go over to the design panel and scrub through values in the “space between” field.
You should see the component grow and shrink, all while maintaining its ↔️ hug resizing setting!
Context-dependent widths. Have you ever had a case where you don't want a certain nested instance to collapse all the way down (hugging), or to fill all available space of its parent? In those cases you need to give them a custom fixed width. And that width might need to change depending on the context. By context I mean what components are around it, the page its on, or the part of the flow the user is in. Without a Resizer, making this kind of override is impossible because of Figma doesn't support overriding fixed-width values of nested instances.
An alternate solution is creating a “width” property with variants for each custom width value you need for that component... that may be fine if your component is in a local file, but I would advise against such a property for your component library. It could tank the performance and usability of your component. Resizers, although "hacky", are a much lighter solution.
Up until March 2023, I would’ve set “nope, it’s not worth it” because the only advantages (that I could think of) of having a componentized resizer provides, is the ability to create pre-set widths width values via variants. But adjusting those property values on a nested instance inside of another component used to have no effect on the parent component’s width! Thankfully this appears to have been fixed.
So now my answer is: ...maybe! Here’s some pros and cons to consider (as always, it’s all about what you want to optimize for):
✅ Pros:
❌ Cons:
Sigh. So Resizers don't seem to fit into any of the 7 types of components I’ve written about. Perhaps this means there’s an eighth type... "Hack components"?
Before Figma released absolute positioning, zero frames could be used to “hack” your way to overlapping auto layout elements. To me the word “hack” implies some fragility and risk, which I like for describing these techniques. Zero frames aren’t immune to going bust someday! Figma could decide to force even the smallest of decimal values to round up to a whole 1, which would make this technique impossible to use (and potentially break any existing zero frames you have in place).
Hack components often contribute to ◈ interface reps to help bridge gaps where Figma isn’t quite mapping to the realities of HTML and CSS. I'd liken using Hack components to taping a timer to a microwave that (for some reason) doesn't come with a built in timer. Figma doesn't provide us with minimum and maximum width controls, but that doesn't mean we can't MacGyver our own!
What are the ways you use zero frames in your component libraries and UI work? @ me on twitter or send me a note in the Figma community forum! I'd love to hear about your solutions.
If you'd like to be notified of when I publish a new blog post, joining my newsletter is a great way to keep up. My readers enjoy bonus behind-the-scenes insights on every post!
