Gestalt Law of Similarity in UI Design: 3 Practical Ways to Apply It With Figma, Sketch, and Penpot
Use the Gestalt Law of Similarity to make screens feel obvious. If two things look alike, people assume they work alike. That is the whole trick. Nielsen Norman Group explains that similar visual traits make users see items as related [source: Nielsen Norman Group].
TLDR: Make related UI items share the same color, shape, size, spacing, or type style. For example, if every primary checkout button is blue and every secondary action is gray, users stop guessing. In a small product test with 30 shoppers, a team might track an 18% drop in wrong button clicks after making buttons consistent. Less “Wait, what does this do?” More “Cool, done.”
The Gestalt Law of Similarity sounds fancy. It is not. Your brain is just lazy in a useful way. It groups things that look the same.
That means users make fast guesses:
- Same color? Probably same type of action.
- Same shape? Probably same kind of control.
- Same icon style? Probably from the same feature set.
- Same text style? Probably same level of importance.
Good UI uses this habit. Bad UI fights it. And honestly, it feels like some screens were built by five people who never met.
1. Make Buttons Behave Like a Tiny Visual Family
Buttons are the easiest place to apply similarity. They are also where messy design causes real pain.
If “Save,” “Buy now,” and “Continue” are all primary actions, make them look related. Use the same fill color. Use the same border radius. Use the same height. Use the same font weight.
Then make secondary actions look different. Maybe they use an outline. Maybe they use a pale background. The point is simple. Users should spot the main action in half a second.
In Figma:
- Create a button component.
- Add variants like primary, secondary, danger, and disabled.
- Use shared color styles for each state.
- Use Auto Layout so padding stays sane.
Small warning. Figma can make you feel powerful, then punish you with one rogue detached component. Expect to waste 20 seconds hunting that one button with the wrong corner radius. Fix it with components early.
In Sketch:
- Use Symbols for button types.
- Save text styles for labels.
- Use shared layer styles for fills and borders.
In Penpot:
- Create button components.
- Use design tokens for color and type.
- Group button states in one visible area of the file.
The rule is simple. If buttons do the same kind of job, they should look like cousins. Not strangers.
2. Use Similar Cards to Help People Scan Faster
Cards are everywhere. Product cards. Pricing cards. Profile cards. Dashboard cards. They work well because they chunk information.
But cards only help if they follow a pattern.
A product card should not randomly change image size, title weight, price color, and button placement. That makes users slow down. Their brain starts doing inventory. Nobody came to your app to inspect padding.
Use similarity like this:
- Keep all card images the same ratio.
- Place titles in the same spot.
- Use one style for prices.
- Use one badge style for labels like Sale or New.
- Keep actions in the same area.
In Figma: Build one card component. Add variants for default, sale, sold out, and featured. Use Auto Layout for vertical spacing. Then duplicate the card. Do not rebuild it from memory. Memory is a liar.
In Sketch: Use Symbols with overrides. Put image, title, price, and button in fixed positions. If the design grows, use Libraries so the team pulls from the same card system.
In Penpot: Use components and grids. Penpot is great for open team work, but files can get messy fast if nobody names things. Call your card Card Product Default, not Rectangle Copy 17 Final Final. Please. For everyone’s blood pressure.
This method is great for dashboards too. Use one style for metric cards. Use another for alert cards. Use another for setup tasks. Users will know what they are seeing before they read every word.
3. Match Icons, Forms, and Feedback States
Similarity is not only for big blocks. It also matters in tiny details.
Icons should feel like one set. Do not mix thick filled icons with thin outline icons unless there is a reason. Users may think they mean different things.
Forms need similarity too. Every input should share the same height, border, label style, and help text style. Error states should always look the same. Success states too.
Try this pattern:
- Normal field: gray border, white fill.
- Focused field: blue border, soft blue shadow.
- Error field: red border, red message, warning icon.
- Success field: green border, short success message.
In Figma: Create input components with variants for normal, focus, error, disabled, and success. Add icon variants if needed. Keep labels as part of the component if your form style is strict.
In Sketch: Use nested Symbols. One Symbol can hold the input base. Another can add the error message. This keeps changes less painful when the border color changes later. And it will change later. It always does.
In Penpot: Set token names like color error, color success, and border input. Use them across your form components. This keeps the system clean when developers inspect the file.
Common Mistakes to Avoid
- Do not make unrelated items look the same. A delete button should not look like a save button.
- Do not use color alone. Add shape, text, or icons too.
- Do not create too many styles. Five button styles can already feel like a tiny circus.
- Do not ignore spacing. Similar items need similar breathing room.
The Gestalt Law of Similarity is useful because it respects how people think. They scan first. They read second. They guess all the time.
So make the guesses easy. Group related things with shared visual traits. Use components in Figma, Symbols in Sketch, and components with tokens in Penpot. Your UI will feel calmer. Your users will move faster. Your team will argue less about why one button is weirdly taller than the others.