figma guide
Designing avatars and user profile UI in Figma: sizes, states, and handoff
Design avatar components and user profile UI in Figma with size scales, status indicators, fallback initials, groups, and Dev Mode specs for nav and settings.
- Published
- Updated
- Jun 12, 2026
- Read time
- 8 min
- Level
- Beginner
Quick answer
Avatars in Figma represent people—photos, initials, or icons in a circular (or squircle) frame with optional status dot, badge count, and size scale from 24px to 96px+. Build an Avatar component with variants for type=image | initials | icon, size=xs | sm | md | lg | xl, and status=online | away | busy | offline | none. Profile UI adds header cards, editable fields, and account menus—pair with forms, dropdowns, and sidebars. Document image fallback rules, initials algorithm, and upload crop in Dev Mode. Start from the Figma guides hub for component basics.
Who this is for
- Product designers placing avatars in nav, comments, tables, and profile settings.
- Design system teams standardizing sizes that were arbitrary circles in every file.
- Engineers implementing fallback initials, lazy-loaded images, and accessible labels.
Avatar types compared
| Type | Shows | Best for | Fallback |
|---|---|---|---|
| Image | User photo | Known users with uploads | Initials or generic icon |
| Initials | 1–2 letters | Default before photo loads | Background color from name hash |
| Icon | Generic person glyph | Anonymous, system, deleted user | N/A |
| Logo | Brand mark (squircle) | Teams, orgs in B2B | First letter of org name |
Verdict: ship one Avatar component with type variants—not separate “UserPhoto” and “UserCircle” components that drift apart.
Size scale
| Token | Diameter | Typical use |
|---|---|---|
| xs | 24px | Dense tables, comment threads |
| sm | 32px | Inline mentions, compact lists |
| md | 40px | Default nav, cards |
| lg | 48–56px | Profile list rows, search results |
| xl | 64–96px | Profile header, account settings |
| 2xl | 120px+ | Onboarding, edit-profile hero |
Status dots scale with avatar—roughly 25% of diameter, min 8px, anchored bottom-right with 2px border matching surface background.
Avatar
├── Variant: type=image | initials | icon
├── Variant: size=xs | sm | md | lg | xl
├── Variant: status=none | online | away | busy | offline
├── Property: hasBadge=true | false
├── Layer: Container (circle or squircle, clip content)
│ ├── Image fill OR Initials text OR Icon
│ └── Status dot (optional, absolute bottom-right)
└── Layer: Badge count (optional, absolute top-right)Bind background fills for initials to semantic color tokens or a fixed palette of 8–12 distinguishable hues.
Initials and color fallback
| Rule | Spec | Why |
|---|---|---|
| Letter count | 1 letter if single name; 2 if first + last | Consistency across app |
| Casing | Uppercase | Legibility at small sizes |
| Font | Medium weight; size ~40% of diameter | Avoid thin strokes at 24px |
| Background | Hash of user id or name → palette index | Same user = same color |
| Contrast | WCAG AA on initials vs background | Pair with a11y plugins |
Document the hash algorithm (“first char of uuid mod 12”) in handoff—designers pick sample names; engineering implements the rule.
Status indicators
| Status | Color (example) | Meaning |
|---|---|---|
| Online | Green | Active now |
| Away | Yellow / amber | Idle |
| Busy | Red | Do not disturb |
| Offline | Gray | Not available |
| Decision | Recommendation |
|---|---|
| Show on all avatars? | Only md+ in social contexts; hide in tables at xs |
| Pulse animation | Optional for online; note prefers-reduced-motion |
| Border on dot | 2px surface color so dot separates from photo |
Do not rely on color alone—pair with tooltips or labels in profile UI.
Avatar groups (stacked)
| Pattern | Layout | Spec tip |
|---|---|---|
| Stack | Overlap −8 to −12px per size | Max 4–5 visible + “+N” overflow |
| Grid | No overlap; 4px gap | Participant lists |
| Row | Horizontal with overlap | Assignee pickers |
AvatarGroup
├── Variant: layout=stack | row | grid
├── Property: maxVisible=3 | 4 | 5
├── Layer: Avatars (horizontal, negative gap)
│ └── Avatar instances (z-index back to front)
└── Layer: Overflow badge (+3)Overflow badge uses surface/elevated and caption text. Document z-order (first user on top or bottom—pick one).
Profile UI patterns
| Pattern | Contains | Where it lives |
|---|---|---|
| Profile header | xl avatar, name, role, edit button | Settings → Account |
| Profile card | Avatar + 2–3 metadata lines | Sidebar footer, team directory |
| Account menu | Avatar trigger → dropdown | App header |
| Editable profile | Avatar upload + form fields | Settings page |
| User list row | sm/md avatar + name + secondary line | Tables, mentions, chat |
Profile header anatomy
| Part | Purpose |
|---|---|
| Avatar (xl) | Photo or initials; optional edit overlay on hover |
| Display name | text/heading-md |
| Subtitle | Email, role, team—text/body-sm muted |
| Primary action | ”Edit profile” or “Change photo” |
| Secondary links | Password, 2FA, delete account |
Use cards or flush sections depending on settings layout density.
Avatar upload and crop
| State | UI | Handoff note |
|---|---|---|
| Default | Current image or initials | Accept jpg, png, webp; max 5MB |
| Hover | Camera icon overlay on xl avatar | Click opens file picker |
| Uploading | Progress ring or skeleton | Async upload |
| Error | Inline alert below | File too large, wrong type |
| Crop modal | Modal with circular mask | Output 256×256 or 512×512 |
Document crop aspect ratio (1:1) and output sizes for retina (@2x).
States every avatar needs
| State | Image type | Initials type |
|---|---|---|
| Default | Photo visible | Letters + background |
| Loading | Skeleton circle | Skeleton |
| Error / missing | Fall back to initials | Show icon if no name |
| Hover (clickable) | Subtle ring or overlay | Same |
| Focus | Focus ring on container | Keyboard accessible |
| Disabled | Reduced opacity | Used in pending invites |
Clickable avatars (account menu) need 44px min touch target—pad hit area beyond visible circle on mobile.
Placement in common layouts
| Location | Size | Extras |
|---|---|---|
| App header | sm–md | Opens account dropdown |
| Sidebar footer | md | Name truncated; chevron |
| Table cell | xs–sm | Name in adjacent column |
| Comment thread | xs | Timestamp beside name |
| Search suggestion | sm | Secondary line for email |
| Team picker | md + checkmark | Selected state variant |
Accessibility checklist
| Requirement | Implementation |
|---|---|
| Alt text | alt="" if name is adjacent; else alt="Jane Doe" |
| Decorative in groups | Only first avatar named; others alt="" with group label |
| Account button | aria-label="Account menu for Jane Doe" |
| Status | Not conveyed by color alone; tooltip or visible text in profile |
| Initials | Container has accessible name from full name |
| Upload | Label tied to file input; error announced |
Prototyping limits
Figma cannot upload real photos in prototypes. For demos:
- Use placeholder images and initials variants side by side.
- Prototype avatar click → dropdown or settings frame.
- Show upload modal as separate frame with crop UI static.
Use interactive components for hover ring on clickable avatars.
Handoff to engineering
| Deliverable | Where it lives |
|---|---|
| Size tokens (px per scale) | Component description |
| Initials rules | 1 vs 2 letters; uppercase |
| Color palette for initials | Token list or hex table |
| Image CDN sizes | 64, 128, 256 URLs |
| Status enum | online, away, busy, offline |
| Group overflow | maxVisible + “+N” logic |
| Crop output | Dimensions, format, compression |
| Gravatar / provider fallback | Document third-party behavior if used |
Publish under Components / Avatar in your team library. Reference Dev Mode checklist for spacing and export notes.
Real-world examples
SaaS account menu
md avatar in top-right; click opens dropdown with name, email, Settings, Log out. Badge on bell icon separate from avatar.
Team directory table
xs avatar in first column; sortable name column; role and status text—no status dot at xs size.
Profile settings page
xl avatar with change-photo overlay; form for display name, bio, timezone; inline alerts for save success.
Comment thread
xs avatars left-aligned; thread indent without shrinking avatar below 24px.
Common mistakes
| Mistake | Consequence | Fix |
|---|---|---|
| Random sizes (36px, 44px, 52px) | Visual noise | Stick to token scale |
| Stretched photos | Distorted faces | 1:1 clip; object-fit cover |
| Status dot on every 24px avatar | Cluttered tables | Hide status at xs |
| No initials fallback | Broken image icon | Always spec initials path |
| Avatar as only user identifier | Ambiguous in groups | Show name on md+ layouts |
| Low-contrast initials | Fails WCAG | Test pairs; use contrast tools |
| Upload with no crop | Inconsistent circles | Crop modal with preview |
| 10-color initials palette | Collisions look identical | 8–12 hues + hash |
FAQ
Circle vs squircle avatars?
Circle is the default for people. Squircle for orgs/teams or when matching iOS app icon style—pick one shape per type, not per screen.
Show real photos in marketing mocks?
Use licensed stock or generated faces—never random web images. Initials variants are safer for generic demos.
Avatar + name layout: horizontal or vertical?
Horizontal (avatar left, text right) for lists, tables, and nav. Vertical (avatar centered above name) for profile headers and onboarding.
Anonymous users?
Use icon type with generic person glyph and label “Guest” or “Anonymous”—do not show empty circle.
Bottom line
Treat avatars as a sized, stateful component family—image, initials, icon, status, groups, and profile layouts—not one-off circles. Document size tokens, fallback rules, upload crop, and accessible naming in Dev Mode. Continue with sidebars, dropdown menus, forms, and the tutorials hub.
§ Keep reading