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
Editors and toolbars (Mobile)
Mobile packDomain
Mobile editor toolbars and tools: formatting, selection, layers, photo crop and adjust, drawing, text overlay and post composer.
- components
- 11
- variants
- 35
- recreations
- 4
- themes
- 5
Also for desktop: Editors and toolbars
What’s inside
Ten editor patterns for phones: bottom, formatting, selection, layer and floating toolbars, photo tools with crop, filters, adjust and markup, a centre-zero adjust slider, an adjust panel, drawing tools, text overlays and a post composer with a character limit. Five pages show a full editor screen in context, and each page documents states, keyboard and screen reader use.
- 11 sets across 10 toolbar and editor patterns
- Formatting bar with pressed and unpressed toggles
- Adjust slider that runs either side of zero
- 4 recreations of real story, video, notes and design editors
Bottom toolbar
3 variants
- Icons
- Labelled tools
- Cancel and Done
Formatting bar
Free sample3 variants
- Text styles
- Lists
- Insert
Selection toolbar
3 variants
- Text
- Formatting
- Object
Layer toolbar
3 variants
- Default
- Layer selected
- Reordering
Floating toolbar
3 variants
- Text layer
- Image layer
- Several layers
Photo tools
4 variants
- Crop
- Filters
- Adjust
- Markup
Adjust slider
3 variants
- Zero
- Plus 35
- Minus 20
Adjust panel
2 variants
- Light
- Colour
Drawing tools
4 variants
- Pen
- Highlighter
- Eraser
- Ruler
Text overlay
3 variants
- Typing
- Styled
- Sticker selected
Post composer
4 variants
- Empty
- Writing
- With media
- Over limit
- Figma file
- SuperDuper Pack: Editors and toolbars (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 and 2 screen patterns
- Toolbar, Create & compose and Edit
How Instagram, TikTok and Apple Notes 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.
Story editor
Recreated from Instagram
Short video editor
Recreated from TikTok
Notes formatting
Recreated from Apple Notes
Design canvas
Recreated from Canva
Not affiliated with, endorsed or sponsored by Instagram, TikTok, Apple Notes and Canva. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the formatting bar full size, free
A mobile formatting bar for text styles, lists and insert, built from toggle buttons. All 3 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 editors and toolbars pack
One Figma file: SuperDuper Pack: Editors and toolbars (Mobile). It has 11 components with 35 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.