figma guide
Figma tables and data UI: rows, columns, sorting, and handoff
Build scalable tables in Figma with row components, column alignment, sticky headers, empty states, and Dev Mode specs so data-heavy screens hand off cleanly.
- Published
- Updated
- Jun 05, 2026
- Read time
- 6 min
- Level
- Intermediate
Quick answer
Tables in Figma are built from reusable row components, not one giant flattened frame. Create a header row component, a body row with variants (state=default | hover | selected | disabled), and cell subcomponents with fixed or min widths per column type (text, number, badge, actions). Stack rows in vertical auto layout inside a scrollable content frame; document sorting, pagination, and empty states in Dev Mode. Use auto layout for alignment, semantic color for zebra/hover, and Dev Mode checklist before handoff. More patterns on Figma guides.
Who this is for
- Designers on admin panels, billing, analytics, and settings with dense data.
- Design system contributors defining table primitives before every squad invents a new grid.
- Engineers implementing virtualized lists who need column width and truncation rules.
Table anatomy
| Part | Component? | Notes |
|---|---|---|
| Table container | Frame | Border radius, shadow level from effects guide |
| Header row | Component | Bold labels, sort affordance optional |
| Body row | Component set | Variants for hover/selected |
| Cell | Nested component or slot | Align numbers right, text left |
| Footer | Frame | Pagination, selection count |
| Toolbar | Separate frame | Filters, search, bulk actions |
Verdict: never draw 20 static rows and call it done—engineers need row logic, not a screenshot.
Column types and alignment
| Column type | Alignment | Width strategy |
|---|---|---|
| Text (name, email) | Left | min-width + truncate with ellipsis spec |
| Number / currency | Right | Tabular figures in typography styles |
| Status / badge | Left or center | Fixed width from badge component |
| Date | Left | ISO format in description (YYYY-MM-DD) |
| Actions (icons) | Right | Fixed 80–120px, icon buttons from library |
| Checkbox selection | Center | 40–48px column |
Document truncate vs wrap per column in the cell component description.
Building the row component
Table / Row
├── Variant: type=header | body
├── Variant: state=default | hover | selected | disabled
├── Auto layout: horizontal, gap 0, fill container width
├── Cell / Checkbox (optional, instance)
├── Cell / Text (fill container)
├── Cell / Number (hug or fixed)
├── Cell / Badge (hug)
└── Cell / Actions (hug)- Set row min height 40–48px (touch-friendly actions) or 32px for dense admin.
- Use stroke bottom
border/subtleor zebra fill token on alternate rows. - Selected row: background
surface/selected, do not rely on border alone.
Publish from your library file—see team libraries.
Header row and sorting
| Element | Design | Spec |
|---|---|---|
| Label | text/label-sm semibold | — |
| Sort icon | Chevron up/down/neutral | sortable=true, cycle: none → asc → desc |
| Resize (optional) | Column divider handle | Out of scope in Figma—note “resizable in product” |
Show three header variants on a spec artboard: unsorted, sorted asc, sorted desc—so QA has reference.
Toolbar and filters (above the table)
Horizontal auto layout:
- Search field (reuse form input)
- Filter chips or dropdown triggers
- Primary action (Export, Add) aligned to inline end
Link filter patterns to wireframing workflow when exploring IA before hi-fi tables.
States you must design
| State | What to show |
|---|---|
| Loading | Skeleton rows (3–5), same row height as body |
| Empty | Illustration optional + headline + CTA |
| Error | Inline alert above table, retry action |
| Partial selection | Header checkbox indeterminate—describe in copy |
| No results (filtered) | Different from empty database |
Skeleton: use low-contrast rectangles with effects disabled; animate in prototype only if it helps stakeholders—engineers implement in code.
Pagination and virtualization
Figma cannot simulate 10,000 rows—document behavior instead:
| Pattern | Spec fields |
|---|---|
| Page size | 10 / 25 / 50 |
| Controls | Prev, next, page numbers |
| Infinite scroll | Load-more threshold, spinner placement |
| Virtualized list | Row height fixed at N px for dev |
Add a footer component Table / Pagination with variants for first/middle/last page.
Sticky header and horizontal scroll
- Place header in a frame with clip content above the scroll body, or duplicate header in spec with note
position: sticky. - For wide tables, put row components in a frame wider than viewport; show horizontal scroll on mobile artboard.
- On mobile, consider card list variant instead of 8-column table—ship as
layout=cardvariant on the same feature page.
Cross-link responsive design for breakpoint-specific layouts.
Comparison: table approaches in Figma
| Approach | Best for | Weakness |
|---|---|---|
| Row component + auto layout stack | Production systems | Setup time |
| Single frame with manual lines | Throwaway mock | Unmaintainable |
| Plugin-generated tables | Quick population | Often off-token |
| Real data plugins (Content Reel) | Stress testing copy | Not structure |
Verdict: invest in row + cell components once; use plugins only to fill instances.
Accessibility and readability
- Header cells: use
<th>semantics in spec; do not use body row style for headers. - Row hover: contrast check against background (a11y plugins).
- Selection: checkbox + row highlight, not color alone.
- Numeric columns: right-align and use tabular lining in text styles.
Keyboard: document row focus, Enter to open detail, and Space to select in Dev Mode—Figma will not simulate full grid keyboard nav.
Handoff to engineering
| Deliverable | Location |
|---|---|
| Column width min/max | Cell component descriptions |
| Sort behavior | Header component description |
| Row click target | Whole row vs link only |
| API field mapping | Table frame description (col: user.email) |
| Tokens | Semantic colors for hover/selected/zebra |
Use dev handoff plugins when exporting design tokens for data-heavy apps.
Dashboard context (cards + tables)
Most dashboards combine KPI cards and tables:
| Block | Figma tip |
|---|---|
| KPI row | Horizontal auto layout, equal-width cards with fill |
| Chart placeholder | Named layer chart / revenue / 12mo—engineers replace |
| Table block | Full-width below cards |
Keep charts as bounded frames with axis labels—even if data is fake—so layout does not collapse in dev.
Common mistakes
| Mistake | Consequence | Fix |
|---|---|---|
| One-off 30-row frame | No component reuse | Row instances in auto layout |
| Center-aligned numbers | Hard to scan | Right-align numeric cells |
| Missing empty state | Devs ship blank white box | Dedicated empty artboard |
| Actions only on hover in static frame | Missing default spec | Show actions column always or document reveal |
| Inconsistent row height | Broken virtualization | Single row min-height token |
FAQ
Should each column be its own component?
Optional. Start with row + cell slots; split columns into components when three+ products need different column sets.
How do I show sortable columns in prototype?
Use variants on the header cell for sort direction, or swap header instances on tap—keep logic in the description for engineers.
Card layout vs table on mobile?
Ship layout=table and layout=card variants on the same feature spec page; pick per breakpoint in the handoff table.
Zebra striping?
Use alternate row variant or a boolean property zebra=true on even rows—bind fill to surface/row-alt token.
Bottom line
Treat tables as systems: header row, body row variants, typed cells, and explicit empty/loading/error artboards. Align numbers, document sort and pagination in Dev Mode, and keep rows as library instances so data screens stay maintainable. Continue with forms, navigation patterns, and organize files at scale.
§ Keep reading