Design systems: Creating a floating label text field in Sketch
The solution

Link to file: Link

—

Sketch is still a bit buggy in creating responsive symbols but the key trick for this solution was the utilization of masks. Masks actually follow the same properties as any other element within Sketch symbols allowing them to responsively subtract and mask out any unwanted areas.

By using masks within the top field bar, it subtracted the space necessary for the label text without it being destructive to the text field.

How it works

*Warning: geeky technical design ahead*

1. The Top

The first and biggest problem was making the top portion of the field scale properly. To make this happen, there are actually 2 main sub-problems: making the label have an invisible background and making the bar/line itself resize responsively.

Invisible Label background

For the label, we needed it to have an invisible background. To do so, we created a text field outline with only left, right, and bottom bar, as well as the first and last 13 pixels of the top bar. We kept both these 13 in order to maintain the corner radius of the text field.

Next, we created an INVISIBLE BOUNDING BOX. An invisible bounding box is a rectangle layer with no fill, no stroke, and no other properties other than the width and height in which you want to “block out”. Sketch, when reading this box within a symbol, still recognizes it as an element and applies its pinning and auto-layout properties to it. With a label text layer on top, it effectively gave accurate padding from other elements. With the box having no fill, it effectively turned the background of the text box invisible. For this box, we followed the left and right Google specs padding of the “empty space” between the text and the top line.
['Parker Audrey']
['UI', 'Design Systems', 'Material Design', 'Sketch', 'Sketch Tips']