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
Charts and data viz (Mobile)
Mobile packData display
Mobile charts: scrubbable lines, sparklines, weekly bars, donuts, activity rings, heatmaps, gauges and period selectors.
- components
- 11
- variants
- 31
- recreations
- 3
- themes
- 5
Also for desktop: Charts and data viz
What’s inside
Eleven chart patterns for phones: a line chart with scrub, sparkline rows, weekly bars with a goal, donut and ring progress, activity rings, area charts with compare, a heatmap calendar, a gauge, a period selector, stat trends and legends. Charts are editable vectors with figures that match the data, and each page shows a 390 by 844 phone screen in context.
- 11 chart sets, each with a phone screen in context
- Editable vector marks with patterns and shapes, not colour alone
- Figures, labels and screen reader text that match the data
- 3 recreations of real finance and health charts
Line chart with scrub
Free sample3 variants
- Rest
- Scrubbing
- Focus
Sparkline row
3 variants
- Up
- Down
- Flat
Weekly bars
3 variants
- Default
- Selected
- Goal
Donut
2 variants
- Donut
- Ring progress
Activity rings
2 variants
- In progress
- Closed
Area chart
2 variants
- One
- Compare
Heatmap calendar
2 variants
- Month
- Year
Gauge
3 variants
- Low
- Mid
- High
Period selector
5 variants
- 1D
- 1W
- 1M
- 1Y
- All
Stat trend
3 variants
- Up
- Down
- Flat
Legend
3 variants
- Row
- List
- Toggles
- Figma file
- SuperDuper Pack: Charts and data viz (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
- Chart
How Robinhood, Revolut and Apple Health 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.
Brokerage chart
Recreated from Robinhood
Spending analytics
Recreated from Revolut
Health summary
Recreated from Apple Health
Not affiliated with, endorsed or sponsored by Robinhood, Revolut and Apple Health. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the line chart with scrub full size, free
A line chart at rest, while scrubbing and with keyboard focus on a point. All 3 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 charts and data viz pack
One Figma file: SuperDuper Pack: Charts and data viz (Mobile). It has 11 components with 31 variants, 3 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.