Margins are outdated

Indents or gaps between blocks came from typesetting (see “reglets”). When applied to graphical user interface, they are obsolete. And here’s why.

Look at the left picture. What happens if you tap on the gap between the blocks? Nothing. The user won’t understand why the tap didn’t work, because he or she was aiming at the icon and missed by only one pixel.

It’s better to rid of such dead zones! In other words, the indents should be included inside the interactive blocks (see the picturet on the right). From now on, I will refer to the internal indents as “paddings”.

Indents: typographical approach vs. interaction design approach

Text is a building block like any other. There is no sense to complicate the design system by using margins here and paddings there. That’s why we will make the “text block” component and set its paddings.

Setting up the text component in Figma

This approach helps to solve the problem of mismatch between mockup and final product. Create a simple text in Figma, Sketch, ProtoPie. The boundary box is formed around your text automatically. With exactly the same font settings, all 3 programs will place the text inside the boundary box differently (the image below shows a comparison). Programmers have the same problem: Web, SwiftUI, QT make different vertical indents. You draw a pixel-perfect design, the developer takes your dimensions, but the font baseline is shifted higher or lower in the product. Visually the indents are not what you intended.

Figma, Sketch, ProtoPie make different top indents for the same text

To solve the problem, you need to measure the indents from screenshots of the real product and customize the same ones for yourself. You and the developer will have different numbers (don’t forget to document it), but the appearance will be the same.

Let’s say you’ve set the paddings for all components, and suddenly you want to add more air. Would you have to set new paddings manually for each component? This used to be the case, but now Figma has variables, thanks to which the task is solved in a couple of seconds.

You can define paddings using variables in Figma or ProtoPie

By the way, don’t use numbers in variable names (like Space4 and Space8), because their numeric values may not be 4 and 8 at all. That’s why they are variables, so they can change, especially in adaptive design.

When you get rid of the margins, all blocks will extend to the full screen width, and this will allow you to add borderless blocks to the same auto-layout.

No margins — no problems

Some people in the comments have objected that the margins are needed to eliminate misclicking. Look at the flags on the heat map of our brokerage app. If you exclude the white space from interactive areas, half of taps go nowhere. This is what users will perceive as a misclick. So, do not exclude, please.

What to do with the taps between the flags?

Summary:

1. Define variables for all types of paddings
2. Set zero margins everywhere
3. On screenshots of the real product (or test program), measure the actual indents
4. Add paddings to components so that their appearance matches the product
5. Document the difference between the values in the design software you use and in the actual product
6. If you need to expand the indents, you are welcome. Write down the values for designer and developer (in case of multiplatform development there may also be differences between them)
7. Don’t force a developer to set negative indents, it can have consequences that are hard to imagine
8. Don’t be afraid of odd values, you’re not in a printing house. Even Apple use odd values