Create an Adaptive Sketch Symbol for Material Design’s Outlined Text Field
In Helping Designers Adhere to a Design System with Sketch, I showed an adaptive symbol for Material Design’s outlined text field that I created. The symbol adapts to the length of the override text for the label and input.
This article is in response to those asking how I made this symbol. Rather than only explaining how to make it, I attempt to explain why it works; step by step.
Google’s Technique vs this technique
Google released its awesome Sketch Theme Editor plugin for creating your own themed Material symbols. However, is usefulness are limited by how it’s made.
At the time of this writing, all text are symbols. This prevents neighboring elements from moving as the override text length changes. The result is only four characters can be entered in label and the cursor also…
