When Material design updated their style of the text field I took on the challenge to update it on our already existing project as well. While there were already existing tips how you could create the new outlined text field I wanted to take it to another level by creating a sketch symbol that would be robust enough that I could easily simulate all states of the text field, independent on resizing while supporting different types at the same time, like having icons. My goal was to use nested styles and with the latest update from sketch (52) apply layer and text styles as overrides.

Since I am focusing on the process of making the most adaptable symbol I would skip the guidelines of creating the base container and label for this in sketch.

TLTR? Download sketch file (: .

Adding every element in the base symbol

To have everything we might need and simulate the states from one symbol I need to put everything in the symbol from the start including the label, the outline (container), the placeholder text, the helper text, the leading icon and the trailing icon. Let’s see how the process goes, step by step.

Step 1: Create the label

In order to simulate between the inactive states where we don’t show the label and other states where we show it, I need to create a nested symbol of the label with those 2 cases. Like that I could easily toggle on / off the label in the text field:

Step 2: Add the Helper text

The helper text is also part of the main symbol because that is where we simulate the validation messages. In order to make it flexible with the size of the text field growing we need to pin the helper text to the bottom so it always stays there no matter the size of the field. As additional tip we need to make it fixed size so it breaks into 1+ lines if there is more text.

When we don’t need a helper text we just mask the text in the overrides panel:

Helper text is done! Let’s move on.

Step 3: Add the icons

In the text field we can show 2 icons. One in front of the placeholder text called leading icon and another right aligned to the field called trailing icon. Let’s start with adding the trailing icon on the right.

In order to be able to toggle on / off the icon we also need to make this a nested symbol. For that purpose I created a placeholder icon that would act as an icon indicator in the main symbol. I don’t prefer using this as empty state and making it transparent just for housekeeping reasons that I want to see in the main symbol all elements that I could manipulate visually in the instances I create.

Foremost, we need to nest the icon inside the symbol so we can easily override it with other icons:

Next we apply basic resizing and pin the object to the top and right so it always stays there + fix its size so it doesn’t stretch.

Tip: Make the icon shape combined shape so you avoid having multiple overrides options just because your icon can consists of several shapes.

The trailing icon needs to be inside the container so it follows the resizing of the field:

To add the leading icon before the placeholder text we need to duplicate the current symbol because that is another type of text field we can use. There we use the already existing placeholder icon we have created for the trailing icon and apply basic resizing (left pin+ top pin) to it stays pinned to the left, top part when resizing.

Step 4: Create text styles and apply them

In order all of this to work we need to create the text styles because that is the only (simple) way how we can simulate the changes in the text color when the state changes.

We need text styles for the label, helper text and input text when they are in inactive, activated, error or success state:

The name of the style Body 1 or Caption holds the font type, font size, line height, leading and case properties of the style. The description in brackets explains the different states (variations) this style appears in. Why I find this material way of applying colors to the different text styles very practical is because the name of the style is generic so it can be applied to many components like paragraphs, buttons, toasts, inputs. All colors in “On” mode like “On Background” represent the colors that the objects placed on the “Background” in the application would take. That gives a huge flexibility of changing background color values and “On Background” values in big projects with many screens in an easy way. In this case “Caption” is used for the label but also for the helper text which means we can reuse text styles for semantically different elements of a component.

Next what we need to do is apply (connect) those text styles we created to our symbol:

Let’s see how it works on some of the instances from our main symbol:

Like a charm!

Step 5: Create layer styles and apply them

Text styles and layer styles are a must to simulate the different states.

For the same reason why we need text styles we also need to create layer styles. With this set we are ready to apply any state to the outlined container in our symbol:

Step 6: Ordering layers in you layer panel

How you order your layers in the symbol is important since that is the ordering you will see in the overrides panel.

Order your layers in logical way top to bottom as they visually appear.

The final outcome

The final structure in sketch is rather simple:

Here is our robust outlined text field symbol and all we can do with it:

Advantages to use nested symbols with combination of layer and text styles is that you can:

1. Easily toggle different types of component: with icon / without icon while preserving the applied overrides;
2. Apply in a second different states with layer and text styles in the overrides;
3. Scale without breaking any element;
4. Have less duplicates of symbols because of layer and text styles;
5. Maintain and update styles or layouts easily in large files with many screens.

Happy sketching! Download sketch file.

Also available on SketchAppSources.