Add Specs & Guides To Sketch Symbols, Part 2: Text Baseline

Part 1: Padding | Part 2: Text Baseline | Part 3: Measurements

This series shows how bring the your design system’s specs and guidelines to the designer by nesting them in the Sketch symbols they use. View Part 1 to learn how to nest padding rules within your symbol.

Pixel perfect symbol resizing. No measuring.

In part 2 of this series, we will create a text baseline guide help designers easily resize symbols containing wrapped text.

In this article:

• The problem with text override
• Overview of text baseline
• Exercise: create a text baseline guide symbol
• Exercise: create a single symbol for text baseline and padding

The problem with text override

Many design systems provide guidelines on the distance from the last line of text to the bottom of the component. Even if the correct distance is set in the initial symbol, the text area height changes when text is entered in the text override. Designers have to guess or painstakingly measure to determine the correct hight.