Create an Adaptive Sketch Symbol for Material Design’s Outlined Text Field
Step 1: Getting set up
- Create an a symbol with the dimensions
328x56 - Give it a meaningful label, like
Outline Text Field Active
Step 2: Create the border
The border is not a closed shape. To accomplish this, we will be subtracting a shape from this one in a future step. So, the standard border option won’t work here. We’ll use a different technique.
Material Design uses 4px border radius for input fields and a 2px border for the active state. Two shapes will be subtracted to create the border. To keep the border thickness consistent when resizing, the inner shape will be pinned to all sides.
Add the outer rectangle
- Label name:
Border - Width:
328; Height:56 - Color:
#6200EE(or any) - Radius:
4
Add the inner rectangle
- Label name:
Surface cutout - Width:
324; Height:56 - Radius:
2 - X:
2; Y:2 - Pin:
all sides
Subtract shapes
Subtract Surface cutout from Border layer make one shape. Rename to Surface cutout.
Test your progress
You should be able to resize the symbol without the border thickness or corner radius changing. If they do, ensure Surface cutout layer is pinned on all sides.
Step 3: Add the label cutout
To make the adaptable label and top border, a cutout needs to be created at the top. It always needs to be 11px from the sides, regardless of dimensions of the symbol. A mask will be used to achieve this and will have a fixed height and be pinned so it adapts to the dimensions of the symbol.
Following the technique in Step 2, create a rectangle with the following specs and subtract it from the border shape:
- Label name:
Label cutout - Width:
306; Height:2 - X:
11; Y:0 Fixed Height- Pin:
Left,Top,Right
Test your progress
You should be able to resize the shape and the top mask should stay in place.
Step 4: Add label and top border
We can now add the adaptable label and border in the cutout we made in the previous step. As the text length grows, it will push the top border.
How adaptable text works
Before we continue, we need to understand how adaptable text works in Sketch. As text is entered in an override menu, the adjacent element is pushed to keep the distance the same between the two. This only occurs if the text alignment is set to auto and adjacent shape’s height is equal to or less than the text element’s height. Check out Adaptive Text Elements for more details.
