[Download the corresponding Sketch project file here.]
Designing forms can be a real pain in the neck. Hover, focus, validation, error, idle… the states alone are enough to drive you bonkers. Let alone formatting for different device sizes.
The bottom line is that without some clever planning, there are just too many combinations of assets to juggle. So, let’s take a look at a few tricks to ease the pain.
For those who prefer reading to watching, get the step by step below.
1. Creating one flexible field first
To see the finished product and poke around with it, download the Sketch project file here.
For the sake of walking before we run, let’s start by designing one state and getting our flexible resizing totally dialed in, so we can change the size of our fields at any time without giving it a second thought. I’ll start with a focused state with text entered in it.
This form field state consists of 4 simple layers. A text box for the label, a text box for the text entered in the box, a text box with the “|” symbol (AKA the pipe symbol—more on this in a bit) for the cursor, and of course the rounded rectangle for the form field itself. It’s also important to note that the form field and the elements inside are in their own group (without the label). This will become critical shortly.
Once you’ve got those layers created on your canvas and they’re looking the way you’d like, get them all selected and click Create Symbol on the Toolbar at the top of the screen.
If you really want to keep your symbols organized, you can use “folder/” in the name of your symbol. For example, the name “forms/active” will create a folder called “forms” with a symbol called “active” inside. It can be a really helpful layer when your document gets big.
But at least just be sure to give it a name that describes the state, and click OK.
Now we’re ready to make it flexible, but let’s take a second to look at the problems we’re trying to fix. Head back to the instance of your symbol and try stretching it out.
Not so pretty, huh? The spacing of everything goes a bit haywire.
Double-click on the symbol so we can fix this hot mess. Now it’s time to tell Sketch how we’d like each layer to behave when the symbol is scaled. We need the label to remain in the top left corner, so we’ll select it, head to the Inspector, and change the Resizing mode from Stretch to Pin to Corner.
Although they’re not really in a “corner,” we actually want to do the same for the 2 text layers inside the Form Field group. As long as the text is vertically centered in the group, it’ll stay pinned to the nearest side but remain vertically centered.
An issue you might now run into is that the cursor winds up being closer to the right side than it is to the left side. If that’s the case, just shorten your sample text to keep everything bunched to the left. Don’t worry about what your sample text says—we’ll override it with new text later.
If you’d like to take a moment to see how the instance of the symbol scales now, you’ll find we’re getting pretty close. The one thing that still isn’t perfect is that the Form Field group drifts away from the label.
To fix this, go back into the symbol, select the group, and switch the Resizing to Resize Object. This will allow it to resize but it won’t allow it to drift off in position.
Now we’re cookin’ with gas. Head back to your instance and stretch that symbol out, and you should find that it’s scaling like a champ.
2. Pushing elements with text overrides
Now that we’ve got our flexible symbol created, let’s take a look over at the Inspector and override our sample text.
One of the nifty tricks that Sketch has up its sleeve is that even if you override your sample text in the form field with a longer (or shorter) string of text, it will automatically push over an adjacent graphic element to avoid a collision. In this case our cursor layer gets pushed aside, keeping our symbol looking just right no matter what.
3. Toggling text visibility with a space
Remember how I used a text box with the “|” symbol instead of drawing a vector line to create that cursor? Seemed a bit strange, didn’t it?
Well, the reason was that I may not want to display that element 100% of the time when mocking up forms with this “active state” symbol.
Long story short… being that it’s a text layer, we can simply override it with a space if we don’t want to see it. Abra kadabra.
4. Duplicate responsibly
Now that we’ve got one form field state designed, it’s time to create the others. Rather than reinventing the wheel, let’s head back to the symbols page and duplicate our first symbol a few times by selecting the artboard and pressing Command + D on the keyboard.
Now you can get to work on designing a normal state, disabled state, error state etc.—and don’t forget to give each artboard an appropriate name.
More importantly, make sure that any text layers have the same name on each artboard so that when you swap the symbol to change states, the text overrides carry over and you won’t have to retype anything.
5. Locking away text overrides
If you happen to use a text layer for a design element that shouldn’t even change, you may be annoyed to see it show up as a text override on the Inspector.
For example, I used a text box to create the “x” in my error state. The “x” will always be an “x” and therefore doesn’t really belong in the overrides (it could confuse your design team).
The trick is that if you want to hide a text layer from showing up as an override, all you have to do is lock it. A quick-and-dirty way to do this is to head over to the layers list and hold the Option key.
The “eye” to toggle layer visibility will become a lock. Give it a click. 🙂
Pat yourself on the back—you’ve got a flexible form.
More Sketch tutorials
Video Producer at InVision, former UI/UX designer of international in-flight entertainment, and avid automotive enthusiast.
