Back in my day *adjusts glasses* designers had to take development classes and red line all of our files by hand!

Now with nifty tools like Zeplin and Abstract, designers spend little to no time on handoff. Unfortunately a lot can get lost in translation. Is this button a fixed size or responsive to the screen size? Is it this specific amount from the bottom or centered within a larger object? Let’s bring back the craft of the handoff with constraint layout symbols.

Constraint layout is defining the rules that govern the content in your app. The rules encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing. It exists in iOS and Android.

The Constraints

This Sketch file that has all of these elements ready for you to get started!

Base Unit

8x8

You start by defining your base unit that every measurement is a multiple of. I recommend the even number 8 to size and space elements because it makes scaling for a wide variety of devices easy and consistent.

8 is more divisible! 10/4=2.5 vs 8/4=2

The majority of popular screen sizes are divisible by 8 which makes for an easy fit (vs 6 or 10.)

Devices that have a 1.5x resolution will have a hard time cleanly rendering an odd number. Scaling 5 by 1.5x will result in a half pixel offset.

In Sketch > Preferences > Canvas, switch the “move objects [10] px using Shift-Arrow keys” to [8]. It will save you a lot of headache.

Spacer Units

Spacer units are visual representations of common spacing labeled with the multiplied amount of the base unit. For example, a “2 spacer unit” is 16 pt/dp because 2x8=16. These symbols should be used in design and the alias should be built it code so you speak the same language at handoff.

Vertical & Horizontal Spacers

Sometimes there is not enough time in the day to be pixel-perfect — you’re going to make mistakes. By using these symbols instead of the auto-magic red lining, it tells your engineer the spacing intention vs the actual spacing. The number alias matches the number of times you ‘Shift + arrow key’ move an object instead of memorizing the multiplication table for 8s.

Responsive Buttons: iPhone 8, Samsung Galaxy S8, and iPhone SE

The spacers never change size. If it is a horizontal spacer, the vertical height is locked and for a vertical spacer vice versa. Meaning across different phones widths the size of the component will change, but the spacers used to create it’s margins will remain the same.

Alignment Indicators

Sometimes elements align in-between spacers. The main ways to align in-between spacers are center alignment and base alignment.

Center Vertically, Horizontally, and Both. Made by Sam

Center alignment is when you want an object, or a group of objects, to be centered in-between two spacers. Objects can be centered horizontally, vertically, or both.

Baseline Alignment

Base alignment is when you want objects to align to the base of one of the objects. This is common when you have two different text sizes and you want to align then at the baseline.

Tap Targets

48 x 48

On mobile, the minimum tap target size is 48x48 dp/pt. This comes from the Material Design guidelines for a distance of ~12". (The HIG recommends 44x44pt, so I go with the larger one.) Account for the tap target size when placing elements next to each other. You can also use the tap target symbol to denote which parts of an element are tappable.