Using Nested Symbols in Sketch to Build Powerful, Customizable, Enterprise UI Mock-ups – Part 2: Buttons and Table Elements

In Part 1, I covered some basic building blocks for nested symbols—colors and icons—as well as grouping symbol groups and proper naming conventions.

In this post, I want to expand on nested symbols to create buttons and table elements that you can quickly customize on the fly.

Basic Table Cell

One of the cornerstones of Enterprise UI is the table element. Now, Sketch (or any design application) is super-friendly and speedy for creating tables, but through flexible nested symbols, we can create table cell elements that maintain consistency and allow for maximum flexibility.

To begin, create a symbol artboard that is 100 x 26px tall, and insert one of your color symbols onto the board. This will become the background color for the cell, so give it a good name. I like using EMOJIS. We’ll see how this comes into play later.

Basic table cell symbol

Most table cells have borders, so let’s create that next. Unfortunately, we can’t just add a stroke around a symbol, and we want this border to be re-colorable anyway. So let’s combine a couple of rectangles together, and only show the difference.

First, create a basic rectangle 100 x 26px on top of our BG color layer.

Next, create another basic rectangle 98 x 24px on top of our first basic rectangle.

Select both of these layers, and select the “difference”  option in the tool bar.

Expand your newly created shape, and name the layers accordingly. Parent = Border, Top Layer = Inner, Bottom Layer = Outer. This will just help you stay organized.

Table cell borders layer list.

With the border shape expanded, select the parent and children layers and make sure the resizing options have the layers attached to all sides. This will ensure that there is no distortion when resizing the table cells in your mockups.

Resizing options are important to maintain the integrity of your nested symbols.

Now let’s add another color symbol above the border layer. Name it with a nice color EMOJI and set the border layer as a mask.

A basic table cell ready to be re-colored.

VOILA! We have a basic table cell that is fully re-colorable.

Expanding on the Table Cell

While that’s a good start, there is so much more we could do. In my current table design, some of the cells have checkbox and kebab menu icons, as well as, you know, DATA.

Let’s start with the icon first

Insert your checkbox menu into your table cell symbol. Since my cell height is only 26px and my icon symbol is 30 x 30px, I need to give my symbol a -1 on both the X and Y.

Nesting an icon in the table cell symbol.

The most important part is setting the resizing options so that the icon is only stuck to the left side and has a fixed width and height. This prevents the icon symbol from becoming distorted when resizing the table cell.

Resizing the table cell.

Now for the text

Ok, this is where Sketch symbols really start to break down. Currently, text styles cannot be selected as symbol overrides. Instead, there is a hacky, albeit effective, way to get around this: creating all of your text styles as individual symbols.

Text styles as symbols

This means all of the sizes, colors, alignments, and weights that you are using in your UI–at least, all of the ones you want to nest within other symbols (tables, buttons, widgets, etc. that you want to have control over changing).

Place the text symbol where you want it, and stretch it to fit within your cell. Remember to leave a little bit of room for the margin.

Layering text styles and icons in the cell allows us to turn these symbols on or off.

The resize options are a bit different on this one. Set the options so that the text box sticks to the left and right side, but not the top and bottom. Also, set the height as fixed, but not the width. This will allow the text symbol to expand along with the width of the cell, but also stay directly in the middle.

Text resize options.
Text resize options are a bit different, but important to keep the text from floating awkwardly when resizing the cell.

And remember, give your layers good names, and use those EMOJIS.

Animated GIF  - Find & Share on GIPHY


Want to know what’s great about creating button elements now? It’s exactly the same! But there are a couple of tips that are worth sharing to allow you to fully customize those buttons.

Rounded corners

In order to get rounded corners for your buttons, there are just a couple of things we need to tweak.

First, set the radius on both layers of your border independently. If it’s a 1px border, the outer border should have a radius of +1 from the inner.

Button with rounded corners.

As you can see, the background image extends outside of the border. To fix this, duplicate the inner border layer, place it below your background layer, and set it as a mask. Make sure you set the resizing options for all four sides.

All button variations by using nested symbols.
All of your button instances can be created with a single symbol element. This is hugely important for Sketch performance, as well as speed in creating mockups.

By creating a single button symbol, I can quickly change it to handle mouse hover/press states, disabled views, and primary or secondary coloring.

Up Next

Now that we have a few of the key UI elements we needed created as nested symbols, I will walk through how we can put them all together to create a versatile mockup that is presentation-ready.

This post is part two in a series on using Sketch’s nested symbols to build enterprise UI mockups: