Building a Flexible Container Symbol in Sketch using CSS Concepts

Leveraging Nested Symbols to Build a Versatile Tool You can Use Throughout Your Work

Charlie
Charlie
Nov 4 · 3 min read
Illustration by Tyler Anderson, Yext Visual Web Designer

On Yext’s Consulting design team, we strive to design pages that our friends on the developer team can build without difficulties or complaints. We have found that consistency in our file is one aspect of achieving this goal, avoiding one-off styles that complicate the dev’s process. We leverage nested symbols in our Sketch files to help achieve this consistency. Just as a developer will have a single css file, containing classes and variables that they will use throughout their project, we have a single style guide, that contains master symbols for colors and headings. We also leverage smart styles to create a variety of small text variations, which allow these master heading symbols to be functional on various alignments and background colors.

This symbol has revolutionized how we work in Sketch.

ProTool functions as a multi-tool container element to be used throughout your sketch file. Using a series of nested symbols, we are able to reproduce the CSS properties outlined above, transforming a single symbol into everything from a bordered, pill button to a square, shadowed card. This symbol has revolutionized how we work in Sketch, allowing us to simplify our working files, and create precise, consistent structures in our designs that easily translate to the world of development, with nothing lost in translation.

Pill buttons, gray background containers, and cards with shadows and/or borders can all be made with the ProTool symbol.

I will go more into detail of the structure of the ProTool in a follow-up article, but here is an overview of the structure, including nesting:

Container — A mask layer that determines the shape of the ProTool (e.g. Square, 2px radius, pill, etc.)

  • Border determines the border of the container. Options include various border widths and radii.
  • Spacing determines the inset-padding of the container. We have a range of top/bottom and left/right options, as well as inset on all sides.
  • Background determines the background of the container. This could be a color or gradient, or overridden to ‘none’ to have no background at all.

Style — A layer underneath the container acts as an opportunity to add additional styling or accessibility visuals, such as a focus ring.

Shadow — A final bottom layer presents the opportunity to insert a shadow for the entire container. Used often for containers styled as UI cards.

The ProTool is comprised of a bundle of nested symbols, that can be overridden to drastically change what the ProTool looks like.

ProTool has become a cornerstone of our Sketch file construction, and has been built in such a way that it is incredibly easy to further develop and improve its functionality. By creating additional options for the various symbol overrides, we can expand what this single symbol can construct, including custom stylings for a client-specific brand system.


The opinions expressed in this story are those of the authors, and do not necessarily reflect those of Yext.

Yext Design

Brought to you by designers @Yext

Charlie

Written by

Charlie

A web designer for Yext’s Consulting team. I design on-brand, accessible web pages for dozens of clients and millions of consumers

Yext Design

Brought to you by designers @Yext

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade