figma guide
Designing active sessions and device management UI in Figma: trusted devices, sign out everywhere, and session lists
Design active sessions and device management UI in Figma with session lists, trusted devices, sign-out-everywhere actions, and Dev Mode specs for account security flows.
- Published
- Updated
- Jul 08, 2026
- Read time
- 7 min
- Level
- Beginner
Quick answer
Active sessions and device management UI shows users where they are signed in, which devices are trusted, and how to revoke access—usually under Account → Security → Sessions or Devices. Design a session list with device name, browser/OS, location (approximate), last active time, and a This device badge on the current session. Add Revoke per row, Sign out everywhere else, and optional Trust this device for skipping MFA on known hardware. Pair with session timeout (idle expiry) and security settings (2FA enrollment)—this page is about visibility and control, not re-login prompts. Start from the Figma guides hub.
Who this is for
- Product designers building “Where you’re signed in” pages for SaaS, ecommerce, and banking-style apps.
- Design system teams separating session lists from login history and audit logs.
- Engineers implementing session revocation, device fingerprints, refresh-token rotation, and trusted-device cookies.
Sessions vs timeout vs audit log
| Surface | User question | Primary action |
|---|---|---|
| Active sessions list | ”Where am I logged in right now?” | Revoke one session or all others |
| Session timeout UI | ”Will I lose my cart if I go idle?” | Extend session or re-login |
| Security audit log | ”What security events happened?” | Read-only history |
| Connected accounts | ”Which OAuth apps have access?” | Disconnect third-party app |
| Passkeys / 2FA settings | ”How do I sign in more securely?” | Enroll credentials |
Verdict: do not merge active sessions with login history in one table—live sessions need revoke actions; history is read-only. Link between them with “View security activity” if you ship an audit log.
Session list row anatomy
| Part | Spec | Notes |
|---|---|---|
| Device label | ”Chrome on macOS” or user-editable name | Parse UA; allow rename |
| Current badge | ”This device” on active row | Only one per account |
| Location | City + country (IP-derived) | ”~ Vancouver, CA” with tooltip on accuracy |
| Last active | Relative time | ”Active now” vs “3 days ago” |
| Sign-in method | Password, passkey, SSO, OAuth | Icon + short label |
| Revoke action | Text button or icon | Confirm modal for current device |
| Trusted indicator | Shield or “Trusted” chip | Optional MFA skip |
SessionListRow
├── Variant: isCurrent=true | false
├── Variant: trusted=true | false
├── Variant: state=active | idle | expired
└── Layers:
├── DeviceIcon (desktop | mobile | tablet)
├── DeviceLabel
├── CurrentBadge (conditional)
├── MetaLine (location · last active)
├── AuthMethodChip
└── RevokeButtonPage layout patterns
| Pattern | Best for | Layout |
|---|---|---|
| Flat session list | Consumer apps, 1–5 devices | Card list under Security |
| Grouped by device | Multiple browsers per machine | Collapse Chrome + Safari under “MacBook Pro” |
| Tabs: Sessions / Devices | Enterprise with MDM | Sessions = browsers; Devices = enrolled hardware |
| Empty state | New account, single session | ”You’re only signed in here” + security tips |
| Loading skeleton | Slow geo lookup | 3–4 placeholder rows |
Link early in the intro to account dashboard navigation so Security → Sessions is discoverable from My Account sidebars.
Sign out everywhere and bulk revoke
| Action | Scope | Confirmation |
|---|---|---|
| Revoke session | One row | Modal: “Sign out Chrome on Windows?” |
| Sign out all other sessions | All except current | Primary destructive; list count in copy |
| Sign out everywhere | Including current | Full-page redirect to login |
| Revoke after password change | Backend auto | Banner: “Other sessions were signed out” |
Copy example: “Sign out of 4 other sessions. You’ll stay signed in on this Mac.”
For revoking the current session, mirror session expired—redirect to login with returnUrl if the user cancels mid-flow.
Trusted devices and MFA skip
| State | UI | Behavior |
|---|---|---|
| Trust prompt | Checkbox on login after MFA | ”Don’t ask again on this device for 30 days” |
| Trusted list | Subsection under sessions | Remove trust = require MFA next login |
| Trust expired | Row shows “Trust expired” | No revoke—session may still be active |
| Corporate policy | Hide trust option | SSO-only tenants disable consumer trust |
Document in Dev Mode: trusted device is not the same as remember me cookie—different TTL and revocation path. Cross-link passkeys when device-bound credentials replace trust cookies.
SSO and enterprise session nuances
| Case | Design note |
|---|---|
| IdP session still valid | Revoking app session may not log out Okta—explain in help text |
| Multiple org memberships | Filter sessions by workspace/tenant |
| Admin force sign-out | Member sees forced logout banner |
| Concurrent session limits | Error on login: “Too many devices—revoke one in settings” |
Pair with SSO login when workforce users expect IT-controlled session policies.
Mobile and responsive specs
| Breakpoint | Adjustment |
|---|---|
| Mobile | Stack meta under device label; full-width Revoke |
| Tablet | Same as mobile; avoid cramped three-column tables |
| Desktop | Table: Device · Location · Last active · Action |
Show device type icon (phone/laptop) at 20–24px—helps users spot unfamiliar mobile sessions quickly.
States and edge cases
| State | UI treatment |
|---|---|
| Active now | Green dot or “Active now” |
| Idle | Last active timestamp |
| Expired row | Remove from list or gray “Expired” |
| Unknown device | ”Unknown browser” + generic icon |
| VPN location | Same city wrong country—avoid alarmist copy |
| Rate-limited revoke | Toast: “Try again in a minute” |
Accessibility and content
| Requirement | Implementation |
|---|---|
| Row semantics | <li> or table row with scoped heading |
| Revoke | Accessible name includes device: “Sign out Chrome on Windows” |
| Current badge | Not color-only; include text |
| Location | Explain approximation in help tooltip |
| Destructive confirm | Focus trap in modal; Esc cancels |
Handoff checklist
| Item | Dev Mode annotation |
|---|---|
| Session ID | Opaque; never show raw token |
| Revoke API | Invalidates refresh token for that session |
| Current session detection | Match client session id |
| Geo fields | City/country from IP; nullable |
| Trusted device flag | Separate from session row optional |
| Sign out all others | Excludes currentSessionId |
| Post-revoke | WebSocket or polling to drop other tabs |
| a11y | Announce revoke success |
Clarify whether mobile app sessions appear in the same list as web—often a separate “Mobile apps” section with last sync time.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| No “This device” badge | Users revoke themselves by accident | Highlight current row |
| Exact street address | Creepy; often wrong | City-level only |
| Login history mixed in | Users try to “revoke” old logins | Split pages |
| Revoke without confirm | Fat-finger sign-out | Modal for current device |
| Hidden under generic Security | Low discovery | Link from post-login security email |
| No empty state | Confusing blank page | Single-session reassurance |
| Trust device without expiry | Stolen laptop risk | Show expiry date; allow remove |
| Missing SSO disclaimer | Support tickets | ”You may still be signed in to your company portal” |
Recommended workflow
- Audit related flows: timeout, 2FA, privacy.
- Design
SessionListRowvariants: current, trusted, mobile, unknown. - Build Security → Sessions page with bulk “Sign out other sessions” CTA.
- Add revoke confirmation modals with device-specific copy.
- Optional trusted devices subsection with remove-trust action.
- Spec empty, loading, and error states.
- Link to audit log for historical sign-in events.
- Prototype revoke on another device → forced logout banner on that client.
FAQ
How many sessions should we show?
All non-expired sessions with pagination after ~20 rows. Hide expired tokens server-side.
Should we show IP addresses?
Usually no—city + country is enough for consumers. Enterprise admins may get IP in a separate admin audit view.
Revoke vs change password?
Change password often revokes all sessions automatically—show a banner on this page when that happens. Per-session revoke is finer-grained.
Native mobile apps in the list?
Yes—label as “iPhone app” / “Android app” with last active from app heartbeat, not browser UA.
Ecommerce shoppers need this?
Recommended for saved payment methods and account dashboard access—lighter copy than banking, same revoke patterns.
Next steps
- Design session timeout and re-authentication UI in Figma — idle warnings vs session list
- Design audit log and security activity UI in Figma — read-only history vs live sessions
- Design two-factor authentication and security settings UI in Figma — enrollment and trusted device policy
- Design passkeys and passwordless login UI in Figma — device-bound credentials
- Design account dashboard and my account UI in Figma — Security nav placement
§ Keep reading