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

Oh, the bliss of building symbols in Sketch

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.

Rows on rows on rows

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:

Pro tip: you can have multiple lines in text overrides by pressing alt-enter in the input box

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

1. Make sure you have the Auto-layout plugin installed
2. Create a symbol
3. Add text layers
4. Add transparent spacers (colored in red here for illustration purposes)
5. Add an overflow layer to indicate when the stack extends beyond the artboard (must be visible, in teal here)
6. Group the layers above in a auto-layout stack
7. Add a full-width & height mask below the stack
8. Done! When overriding the symbol with text, resize your row vertically until you reach the teal overflow layer

Try it for yourself!

💎 Download the Sketch file here 💎

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.

Examples of unbreakable symbols in Deliveroo’s design system. Works with standard iOS components too!

That’s it!

What are your favourite Sketch techniques and tricks? Post your questions or ideas in the comments, or reach out directly to @rguilleminot on Twitter.

Also, we’re hiring! Check out https://deliveroo.design for the latest job postings.