Sketch is in my opinion the best UI design tool out there at the moment. It does so many things so well, and is leading the way for collaboration and design systems, which we’re deeply invested in at Deliveroo. We use all of the latest symbol library features, and it’s helped our growing team stay in sync with hundreds of shared components.
Sketch is a work in progress, though. I’m sometimes frustrated by the lack of simple features that could save hours of repetitive, menial tasks. Here’s a recurrent issue with symbols that I’m sure you’ve come across:
How many times have you stacked rows and manually edited symbols to accommodate different string lengths? Too. Many. Bloody. Times.
Here’s how it typically plays out
At Deliveroo, we built and maintain component libraries with all sort of rows. Out of the box, Sketch symbols couldn’t handle dynamic data elegantly.
With a bit of auto-layout magic and masking trickery, we built resilient symbols that allow text-wrapping and give you precise control over vertical spacing.
Here’s how they behave:
How to build it
Let’s break it down, step by step
Note: this will only work with symbols, not groups — resizing constraints don’t behave properly in a group containing a mask
- Make sure you have the Auto-layout plugin installed
- Create a symbol
- Add text layers
- Add transparent spacers (colored in red here for illustration purposes)
- Add an overflow layer to indicate when the stack extends beyond the artboard (must be visible, in teal here)
- Group the layers above in a auto-layout stack
- Add a full-width & height mask below the stack
- Done! When overriding the symbol with text, resize your row vertically until you reach the teal overflow layer
Try it for yourself!
The cool thing about this technique is that you can apply it to a bunch of symbols that are otherwise painful to set up and maintain.