Avatars, images and placeholders
Mobile12 components205 variants3 recreations
Avatars, presence, stacks, story rings, image frames, photo grids and viewers for phone apps, with vector placeholders.
$9, or included with Pro
Tables and data grids (Mobile)
Mobile packData display
Ways to show tables on a phone: stacked cards, two-line rows, frozen columns, key-value lists, rankings and landscape grids.
- components
- 10
- variants
- 31
- recreations
- 4
- themes
- 5
Also for desktop: Tables and data grids
What’s inside
10 table patterns for phone screens: stacked cards, two-line rows with select mode, frozen first columns, key-value lists, plan comparison, ranking rows with a pinned You row, expandable rows, a sort and columns sheet, a column pager and a landscape grid. Frozen and scrolling halves stay row-aligned. Every page has a documentation frame and a live grid in light and dark, comfortable and compact.
- Frozen columns that stay aligned with the scrolling half
- Sort and columns sheet, column pager and 844 x 390 landscape grid
- 4 recreations of database, docs, brokerage and spreadsheet apps
Stacked card
4 variants
- Default
- Pressed
- Focus
- Loading
Two-line row
5 variants
- Default
- Pressed
- Focus
- Select off
- Select on
Frozen columns
Free sample2 variants
- Start
- Scrolled
Key-value list
2 variants
- Inline
- Stacked
Plan comparison
2 variants
- Two
- Three
Ranking row
5 variants
- First
- Second
- Third
- Other
- You
Expandable row
4 variants
- Default
- Focus
Sort and columns sheet
2 variants
- Sort
- Columns
Column pager
3 variants
- 1
- 2
- 3
Landscape grid
2 variants
- Start
- Scrolled
- Figma file
- SuperDuper Pack: Tables and data grids (Mobile)
- Themes
- Light, Dark, Light high contrast, Dark high contrast and Wireframe
- Densities
- Comfortable and Compact
- Also in the file
- Usage and accessibility notes, motion specs, Figma variables
- Covers 1 UI element
- Table
How Airtable, Notion and Robinhood and others do it
Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.
Base grid
Recreated from Airtable
Docs database
Recreated from Notion
Brokerage watchlist
Recreated from Robinhood
Spreadsheet editor
Recreated from Google Sheets
Not affiliated with, endorsed or sponsored by Airtable, Notion, Robinhood and Google Sheets. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the frozen columns full size, free
A table with a frozen first column, at the start and scrolled sideways. All 2 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More data display packs
Cards, tiles and carousels
Mobile15 components121 variants2 recreations
Mobile listing, media and stat cards, tiles, shelves, carousels and a swipe stack, with pressed, focus and loading states.
$9, or included with Pro
Lists and rows
Mobile18 components217 variants3 recreations
Mobile list rows built on one anatomy: settings, toggles, media, people, chats, transactions and more.
$9, or included with Pro
Questions about the tables and data grids pack
One Figma file: SuperDuper Pack: Tables and data grids (Mobile). It has 10 components with 31 variants, 4 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.