Gestalt Law of Continuity: 5 Interface Design Examples You Can Build With Figma, Framer, and CSS
The best interface designs use visual paths that make the next action feel obvious. That is the core idea behind the Gestalt Law of Continuity. People tend to follow lines, curves, rows, and motion in the direction they already seem to be going. This matters in real products, since Baymard Institute reports an average cart abandonment rate of 70.19% for ecommerce sites [source: Baymard].
TLDR: The Gestalt Law of Continuity helps designers guide users through an interface without extra text. A checkout page can use a clean progress line from Cart to Payment to Review, making users feel closer to completion. If a store with 10,000 monthly checkout starts cuts confusion by even 5%, that can mean 500 more people staying in the flow. Figma, Framer, and CSS can all build these patterns with simple lines, spacing, motion, and alignment.
What the Gestalt Law of Continuity Means in UI Design
The law says users prefer to see elements as part of a continuous path. A row of cards feels connected. A curved arrow suggests where to look next. A vertical timeline tells the eye to keep moving down.
This sounds simple. Yet many interfaces break the path. Buttons float in odd places. Cards sit out of line. Forms jump from left to right for no good reason. It drives designers crazy when a tiny spacing mistake adds three extra seconds of user hesitation.
5 Interface Design Examples
1. Checkout Progress Stepper
A checkout stepper is one of the clearest uses of continuity. The user sees a line that connects each stage: Cart, Shipping, Payment, and Review. The line tells the user there is a path and an end point.
- In Figma: Use circles, labels, and a 2 px line. Keep equal spacing with Auto Layout.
- In Framer: Add a small fill animation as each step becomes active.
- In CSS: Use flexbox for the steps and a pseudo element for the connecting line.
The key is restraint. Do not make every step shout. The current step should be clear, while the future steps stay calm.
2. Horizontal Product Carousel
A product carousel works because the row keeps going. When the edge of the next card peeks into view, the user gets a hint. The eye follows the row. The hand swipes or clicks.
In Figma, designers can create this with clipped frames and repeated card components. In Framer, a scroll component can add drag behavior. In CSS, overflow-x: auto; and scroll-snap-type create a clean scrolling row.
The catch is that carousels often become junk drawers. Too many cards, weak spacing, and tiny arrows kill the flow. A carousel should show a clear order, not a pile of leftovers.
3. Curved Onboarding Flow
Onboarding screens often feel flat. A curved path can fix that. A soft line can connect three feature cards, moving from top left to bottom right. This gives the layout rhythm and direction.
- Figma: Draw the curve with the Pen tool. Place feature icons along the curve.
- Framer: Animate each point with a short delay. Keep it under 300 ms per item.
- CSS: Use an SVG path as a background or inline element.
This example works well for app tours, SaaS setup screens, and account creation flows. The user feels guided without being pushed.
4. Vertical Timeline for Activity Feeds
A vertical timeline is continuity at its most obvious. A line runs down the page. Events sit along it. The user knows older items are lower and newer items are higher.
This pattern works for order tracking, project history, medical records, and support tickets. The line creates trust because the sequence is visible.
In Figma, a timeline can be built with variants for completed, active, and pending states. In Framer, scroll reveal can fade in each event. In CSS, a left border on the list can become the timeline line. Small circles can be added with ::before.
5. Form Layout With Aligned Inputs
Forms often fail because the path is broken. Labels jump around. Buttons sit far away. Error messages appear in odd places. The user has to think too much.
A continuity-based form keeps every field aligned on one clear axis. The primary button sits at the end of the path. Supporting links stay nearby but do not compete.
- Place labels above inputs for simple scanning.
- Keep field widths consistent.
- Group related fields with clear spacing.
- Put errors directly under the field that needs fixing.
In CSS, a simple grid or column flex layout handles most of this. In Figma, Auto Layout prevents random drift. In Framer, validation states can appear without shifting the whole page.
Common Build Tips
Designers should treat continuity as a quiet guide. Lines, spacing, card edges, motion, and scroll direction all carry meaning. If they point in different directions, users pause.
Good continuity needs three things:
- Alignment: Elements should sit on a clear visual path.
- Spacing: Related items should feel close, not scattered.
- Motion: Animation should follow the same direction as the layout.
Figma is best for planning the path. Framer is best for testing motion and interaction. CSS is best for shipping the structure cleanly. Together, they make the law practical, not just theoretical.
FAQ
What is the Gestalt Law of Continuity?
It is a design principle that says people prefer to follow smooth paths, lines, curves, and aligned groups. The eye keeps moving in the direction it already expects.
Why does continuity matter in interface design?
It reduces confusion. Users can see where to go next without reading long instructions.
Can this be built in Figma?
Yes. Figma is useful for setting alignment, spacing, step flows, timelines, and reusable components.
How does Framer help with continuity?
Framer adds motion. Designers can test scroll effects, step transitions, hover states, and guided onboarding flows.
What CSS features are useful for this principle?
Flexbox, CSS Grid, pseudo elements, SVG paths, scroll snapping, and transitions all help create clear visual paths.