Wallets, transactions and money movement
Mobile13 components48 variants2 recreations
Mobile balances, amount entry, send and request, transactions, cards, exchange, payouts and savings goals screens.
$9, or included with Pro
Maps and location (Mobile)
Mobile packDomain
Mobile map screens and parts: pins, clusters, user location, routes, place cards, ride options and live tracking.
- components
- 15
- variants
- 43
- recreations
- 3
- themes
- 2
Also for desktop: Maps and location
What’s inside
12 map patterns: a full-screen map with a bottom sheet, price, place, cluster and vehicle pins, user location, routes with ETA cards, search this area, a map and list toggle, place cards, ride options and a driver tracking card. The map is an editable vector placeholder that scales with its frame, with no tiles or real geography. Every page has documentation and a live grid in Light and Dark, Comfortable and Compact.
- Editable vector map placeholder that scales to any frame
- Pins with 44px hit areas and selected, visited and focus states
- 3 recreations from Uber, Airbnb and Citymapper
Full-screen map with sheet
2 variants
- Peek
- Half
Price pin
Free sample4 variants
- Default
- Visited
- Selected
- Focus
Cluster pin
3 variants
- Small
- Medium
- Large
Place pin
3 variants
- Default
- Selected
- Focus
User location
3 variants
- Dot
- Heading
- Low accuracy
Route
2 variants
- Driving
- Walking
ETA card
2 variants
- Fastest
- Alternative
Search this area
4 variants
- Default
- Loading
- No results
- Focus
Map and list toggle
4 variants
- Map
- List
- Default
- Focus
Place card
3 variants
- Compact
- Expanded
- Closed
Ride option row
3 variants
- Default
- Selected
- Unavailable
Ride options sheet
2 variants
- Standard
- Saver
Vehicle pin
2 variants
- Moving
- Stopped
Driver tracking card
3 variants
- On the way
- Arriving
- Arrived
Map controls
3 variants
- Locate only
- Full
- Following
- Figma file
- SuperDuper Pack: Maps and location (Mobile)
- Themes
- Light and Dark
- Densities
- Comfortable and Compact
- Also in the file
- Usage and accessibility notes, motion specs, Figma variables
- Covers 1 UI element and 1 screen pattern
- Map and Map
How Uber, Airbnb and Citymapper 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.
Ride app trip choice
Recreated from Uber
Stays map
Recreated from Airbnb
Transit app routes
Recreated from Citymapper
Not affiliated with, endorsed or sponsored by Uber, Airbnb and Citymapper. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the price pin full size, free
A price map pin in default, visited, selected and focus states. All 4 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More domain packs
Chat, messaging and calls
Mobile17 components71 variants4 recreations
Mobile chat list rows, message bubbles, receipts, composer, voice notes, media, reactions and call screens.
$9, or included with Pro
Notifications and inbox
Mobile9 components34 variants3 recreations
Mobile notification patterns: inbox rows, bells with counts, unread markers, activity and action rows, push previews and banners.
$9, or included with Pro
Questions about the maps and location pack
One Figma file: SuperDuper Pack: Maps and location (Mobile). It has 15 components with 43 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.