Molecule

Collect only the smallest pieces and every screen rebuilds the same combination. A search field is an input and a button stuck together, and if only those two are registered as parts, whoever builds a screen fetches both and joins them by hand each time.

Noa lined up the five Pagedeck screens using a search field and found the gap between input and button split three ways: 4 pixels, 8 pixels, 12 pixels. The button text came in two versions, Search and Find. The pieces were identical and the joining differed by person, which left five variants.

A molecule is the layer that registers the combination itself as a part. The way the pieces join gets decided once, and after that the whole combination comes off the shelf.

Take two or three atoms — the smallest units that can't be split further — and register them as one thing that does one job. Five things get decided.

1. The test for grouping is whether the pieces mean nothing alone and only do work together. A form field made of label, input and error text is the standard example.
2. Keep the size at three to five pieces. Larger than that and it moves up to an organism, which forms a meaningful region of a screen.
3. Don't invent new values inside the combination. Spacing and color come from what's already defined; no special spacing exists only here. A one-off value here spreads to everywhere the part is used.
4. What's on and what's off comes from outside. Remembering the search term is the job of the screen using this part, not of the part.
5. Name it by role. "Search field" rather than "input plus button" tells whoever picks it up where it goes.

Don't spend time getting the layer exactly right. Arguing over whether something is an atom or a molecule, or where it sits beneath a template that holds layout with no content in it, matters less than registering it so it can be changed in one place. That's the reason the layer exists.

"Register this as a molecule, not an atom. The input and the button always travel together."

Pieces used together become a part as a combination.

"This combination differs slightly in five places. Let's merge it and pin the spacing to a defined value."

Consolidating something that's been assembled repeatedly.

"We'll decide the layer later. Let's make it a part first."

Registration comes before the layer name.

When Noa registered the search field as one part, the gap was pinned at 8 pixels and the button text at Search. Putting a search field on a new screen became a matter of fetching one part.

The following month, when the decision came to move the search icon from inside the button to the left of the input, the place that changed was one part rather than five screens.