Building a Flexible Container Symbol in Sketch using CSS Concepts
Leveraging Nested Symbols to Build a Versatile Tool You can Use Throughout Your Work
This posting expresses the views and opinions of the authors and does not necessarily reflect the views of Yext and its affiliates, employees, officers, directors or representatives.
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.
Despite making these major moves to aid in consistent elements throughout the page, we strived for more. The next area we aimed to replicate was containers. CSS properties allow for a developer to turn a single <div> into a variety of useful shapes. Adjusting background-color, border, padding, and shadow allowed for a single element type to be used for a variety of purposes throughout the page. Building these CSS properties under a class name allowed the developer to easily create multiple instances of an element, that all looked to a single source of truth for their styling, allowing for easy adjustments to all elements of that class in the future. We sought to replicate this functionality, which helped us arrive at a reusable symbol we call ProTool.
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.
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.
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.
Read the continuation of this story and download ProTool here!
