ProTool: A Deep Dive
Breaking down our custom tool for building clean designs in Sketch.
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.
This article is a follow up to my previous article, Building a Flexible Container Symbol in Sketch using CSS Concepts. Please check that out to learn about why our Consulting Design team developed ProTool, and how it can be used. This article will discuss more about the structure of the symbol, as well as the advanced customization options available when using it.
At the end of this article, we make our ProTool available to download as an annotated Sketch file, which can be used as a library.
ProTool is a powerful system that we leverage in our Sketch files to build a variety of containers using a single master symbol. Using a library of customizable options for properties such as border, background, padding, and shadow, we are able to create complex elements that exactly mirror the structure used when building a web page using HTML and CSS. In Sketch, the ProTool is a single symbol consisting of several other stacked symbols. This nested symbol structure allows for complete customization using the Symbol Override feature in Sketch. At the end of this article, we make our ProTool available to download as an annotated Sketch file, which can be used as a library. Before then, I highlight each layer of the construction of the ProTool, and its purpose.
The Structure
Container
The Container layer represents the overall shape of the ProTool, and contains several nested symbols pertaining to other specific properties of the container. Containers can be one of three corner shapes: square, pill, and rounded. Our library includes several rounded options, including most radius sizes up to 10px. When selecting a container symbol in the symbol override dropdown, you also can choose a border width, ranging from 0px to 5px.
Within the container symbol, there are two symbols, representing the border and background style. Spacing is included as a sub-property of the border, given that different border widths will require the spacers to position and offset slightly differently.
Border
After selecting a container, a border is determined. We have several border configurations, including none, top, bottom, left, right, Top/Bottom, Left/Right, and on all sides. When opting for borders on all sides of the container, there is the option to have all borders controlled by a single color override, or to have each bordered side to be colored or hidden independent of the others, allowing for custom configurations. Each configuration has border width options from 1px to 5px.
Spacing
One of the strongest components of the ProTool is the ability to set a padding within the container that any contained elements can align to. We use a simple Sketch plugin called Show Bounding Boxes that allows these invisible layers to be seen and used for alignment, despite them being nested within another symbol. Our developers previously used Zeplin, and now use Abstract, to inspect these spacer symbols to determine the spacings within our designs, allowing for explicit communication about how our pages are to be built using CSS and HTML.
Our spacing configurations consists of top, bottom, left, right, Top/Bottom, Left/Right, and inset. Each configuration includes a wide array of spacing sizes, from 4px to 100px. We include spacing options using both base 16 and base 10 lists, so that we can support clients that use either option. If your team solely uses one of the two bases, all of the options of the other spacing patterns can be removed.
Background
The background layer represents a simple fill option. The default color is white, but it can be toggled to “none” for no fill, or overridden with any color or gradient layer style. Images are not supported using ProTool, but the similarly structured ProImage can be used for image backgrounds.
Style
Although the Container layer represents the bulk of customization for the Protool, the ‘Style’ and ‘Shadow’ layers allow for further customization. The style layer represents a miscellaneous layer used to insert any additional styling for the element. For buttons, this layer is used to insert a blue ring for the focus state.
Shadow
Lastly, the shadow layer sits beneath all the others, and provides the opportunity to apply a shadow to the entire container. A default card and baseline shadow are included, but we often create a custom style for the layer to accommodate custom client shadow styles.
Download
You can find the ProTool Sketch file here. The file contains annotations and descriptions that should aid you in navigating the file. If you find this library useful, please let us know in the comments below, and follow Yext Design for future tools and tips.
