figma guide
Designing pagination in Figma: patterns, states, and handoff
Design pagination components in Figma with page controls, rows-per-page selectors, compact vs full layouts, and Dev Mode specs for tables and search results.
- Published
- Updated
- Jun 10, 2026
- Read time
- 7 min
- Level
- Beginner
Quick answer
Pagination in Figma is a footer control bar that lets users move through large datasets page by page. Build it as a published component with variants for layout=full | compact, state=default | disabled, and optional rows-per-page and result count text. Use numbered page buttons (with ellipsis for long ranges), prev/next arrows, or a load more pattern for infinite-style lists—not all three on the same screen. Document current page, total pages, and keyboard focus order in Dev Mode. Pair with tables, search and filter UI, and the Figma guides hub.
Who this is for
- Product designers shipping admin tables, search results, and directory lists.
- Design system teams who need one pagination primitive instead of per-feature footers.
- Engineers implementing page state, URL query params, and accessible page controls.
Pagination vs infinite scroll vs load more
| Pattern | User mental model | Best for | Avoid when |
|---|---|---|---|
| Numbered pagination | Discrete pages, jump to page N | Admin tables, SEO listings, audit logs | Real-time feeds where position matters |
| Prev/next only | Linear browsing | Mobile galleries, simple wizards | Users need to jump to page 47 |
| Load more | Progressive reveal | Social feeds, image grids | Users must return to row 200 later |
| Infinite scroll | Endless stream | Discovery feeds | Tables, compare workflows, print/export |
Verdict: for data tables and enterprise apps, default to numbered pagination with optional rows-per-page. Use load more only when bookmarking a specific offset is not required.
Component anatomy: full pagination bar
| Part | Purpose | Spec tip |
|---|---|---|
| Result summary | ”Showing 1–25 of 340” | Left-aligned; updates with filters |
| Rows-per-page | Dropdown: 10, 25, 50, 100 | Persist user preference in engineering |
| Page controls | Prev, numbers, next | Center or right; min 40px touch target |
| Current page | Active number button | Filled or underline; not color alone |
| Ellipsis | … between ranges | Indicates skipped pages |
| Prev / Next | Chevron buttons | Disable on first/last page |
Pagination / Full
├── Variant: layout=full | compact
├── Property: hasRowsPerPage=true | false
├── Property: hasResultSummary=true | false
├── Layer: Container (horizontal auto layout, space-between)
│ ├── Result summary (text/body-sm, text-secondary)
│ ├── Rows-per-page group (label + select dropdown)
│ └── Page controls (horizontal auto layout, gap 4px)
│ ├── Prev button (icon, state=default | disabled)
│ ├── Page button × N (state=default | active | disabled)
│ ├── Ellipsis (text)
│ └── Next button (icon, state=default | disabled)Bind active page fill to semantic tokens—pagination/active/bg, pagination/active/text. Run contrast checks on active and disabled states.
Page number display rules
| Total pages | Show | Example |
|---|---|---|
| 1–7 | All numbers | 1 2 3 4 5 6 7 |
| 8+ | First, last, current ±1, ellipsis | 1 … 4 5 6 … 20 |
| Mobile compact | Prev, current/total, Next | ‹ 3 / 20 › |
Document the ellipsis algorithm in the component description so engineering does not invent a different truncation pattern per squad.
Compact variant
Use compact pagination in side panels, modals, and mobile table footers:
- Prev / Next only, or
- Current page / total text with chevrons (
3 / 12)
Keep the same disabled rules: prev disabled on page 1, next disabled on last page. Show compact and full variants on the same handoff artboard so responsive behavior is explicit.
Rows-per-page selector
| Option | When to include |
|---|---|
| 10, 25, 50, 100 | Default enterprise table |
| 12, 24, 48 | Card grids (divisible layouts) |
| Custom | Only when product requires it |
Pair with a dropdown menu component for the selector. Label it “Rows per page” (not “Items”) for table contexts. Note in Dev Mode: changing rows-per-page resets to page 1.
States every pagination control needs
| State | Visual | Interaction |
|---|---|---|
| Default | Neutral border or ghost | Clickable |
| Hover | Subtle background | Pointer cursor |
| Active / current page | Filled or bold + underline | Not a link—indicator only |
| Disabled | Reduced opacity; no hover | aria-disabled=true |
| Focus | Visible focus ring | Keyboard tab order |
| Loading | Skeleton or spinner on table body | Disable page buttons during fetch |
Use interactive components for hover and pressed on page buttons. Active page is a separate variant, not a hover state.
Placement with tables and lists
| Context | Placement | Notes |
|---|---|---|
| Data table | Footer row, full width below table | Align with table edges |
| Card grid | Centered below grid | Often load more instead |
| Search results | Below result list + above footer | Include result count |
| Modal table | Compact variant, sticky bottom | Max height + scroll body |
Cross-link loading states when page transitions show skeleton rows. Cross-link empty states when filters return zero rows—hide pagination when total=0.
Accessibility and keyboard
| Requirement | Design spec |
|---|---|
| Current page | aria-current="page" on active button |
| Disabled prev/next | aria-disabled="true"; remove from tab order or skip |
| Page numbers | aria-label="Page 3" on each button |
| Ellipsis | Decorative; not focusable |
| Live region | Optional: announce “Page 2 of 10” on change |
Minimum 40×40px touch targets on mobile. Do not rely on color alone for the active page—add weight, underline, or fill.
Prototyping limits
Figma cannot maintain real page state across flows. For reviews:
- Create frames for page 1, page 2, and last page side by side.
- Prototype prev/next clicks between frames.
- Note: “Engineering: sync page to
?page=2query param.”
For load-more patterns, prototype collapsed and expanded list frames—not individual page numbers.
Handoff to engineering
| Deliverable | Where it lives |
|---|---|
| Ellipsis truncation rules | Component description |
| Rows-per-page options | Variant property or spec table |
| URL param name | Dev Mode (page, offset, cursor) |
| Reset behavior on filter change | Artboard annotation |
| Mobile breakpoint switch | full → compact at md |
| Loading state | Linked skeleton component |
Include pagination in your Dev Mode handoff checklist. Publish under Patterns / Pagination in your team library.
Real-world examples
Admin user table (full pagination)
layout=full, rows-per-page 25, result summary “Showing 1–25 of 340 users”. Numbered controls with ellipsis. Filters above table reset page to 1.
Mobile search results (compact)
layout=compact, prev/next with “3 / 12” center text. No rows-per-page on mobile.
Image gallery (load more)
Skip numbered pagination. Single Load more button below grid; document max items per fetch.
Cross-link cards when paginating card grids instead of tables.
Common mistakes
| Mistake | Consequence | Fix |
|---|---|---|
| Pagination on empty results | Confusing footer | Hide when total=0 |
| Active page looks like a link | Users click current page | Style as indicator, not button |
| No disabled state on prev/next | Broken clicks on edge pages | disabled on page 1 / last |
| Different ellipsis per feature | Inconsistent UX | One component, one algorithm |
| Tiny page number hit areas | Mobile mis-taps | 40px min touch target |
| Pagination + infinite scroll | Two competing patterns | Pick one per view |
| Rows-per-page without reset | Page 5 shows empty | Reset to page 1 on change |
| Color-only active state | Fails a11y | Add fill or underline |
FAQ
Should pagination be a separate component from the table?
Yes. Publish pagination as its own component so list views, search, and tables reuse the same footer. Nest an instance below the table on handoff artboards.
How is this different from navigation tabs?
Navigation tabs switch sections or views. Pagination moves through rows of the same dataset. Do not use tab styling for page numbers.
Include “Go to page” input?
Add only for very large datasets (100+ pages) where jumping matters—admin tools, logs. Default consumer UIs rarely need it.
Load more or numbered pages for card grids?
Load more when users browse casually. Numbered pagination when users must share a link to a specific page of results.
Bottom line
Design one pagination component with full and compact layouts, clear active and disabled states, and optional rows-per-page plus result summary. Hide it when there is nothing to paginate. Document ellipsis rules, URL params, and mobile breakpoints in Dev Mode. Continue with tables, empty states, and the tutorials hub.
§ Keep reading