figma guide
Designing team member roles and permissions UI in Figma: invites, RBAC, and admin settings
Design team member roles and permissions UI in Figma with invite flows, role pickers, permission matrices, seat management, and Dev Mode specs for B2B admin settings.
- Published
- Updated
- Jul 10, 2026
- Read time
- 8 min
- Level
- Intermediate
Quick answer
Team roles and permissions control who can view, edit, billing, or admin your product—usually under Settings → Team, Organization → Members, or Workspace → People. Design a member list with avatar, name, email, role badge, status (active/pending), and actions; an invite flow with email, role picker, optional message, and seat limit warning; plus a permissions matrix or role detail page explaining what each role can do. Gate destructive actions (remove member, change to Admin, transfer ownership) with confirmation and re-auth. Cross-link SSO when invites are disabled by policy. Start from the Figma guides hub and pair with Dev Mode handoff for role enum specs.
Who this is for
- Product designers building B2B SaaS admin settings, workspace management, and org dashboards.
- Design system teams standardizing role badges, invite modals, and permission tables across admin surfaces.
- Engineers implementing RBAC, SCIM provisioning, seat billing, and audit trails for membership changes.
Roles vs groups vs direct permissions
| Model | What it is | Best for | UI pattern |
|---|---|---|---|
| Fixed roles | Admin, Member, Viewer | Small teams, simple products | Role dropdown per user |
| Custom roles | Admin-defined permission bundles | Enterprise, granular control | Role builder + matrix |
| Groups / teams | Collections of users | Large orgs, department access | Group list + member assignment |
| Resource-level ACL | Per-project or per-folder access | Design tools, document products | Share modal + inherited roles |
Verdict: start with 3–5 fixed roles in v1. Add custom roles only when enterprise customers need them—otherwise the permission matrix becomes unmaintainable in design and code.
Member list row anatomy
| Part | Spec | Notes |
|---|---|---|
| Avatar | Photo or initials | Pending invites show envelope icon |
| Name + email | Primary + secondary line | SSO users may hide email |
| Role | Badge or dropdown | Admin-only can change |
| Status | Active / Pending / Suspended | Pending shows “Invited 3d ago” |
| Last active | Relative time | Optional for security review |
| Actions | Change role, Resend invite, Remove | Overflow menu on mobile |
TeamMemberRow
├── Variant: status=active | pending | suspended
├── Variant: role=owner | admin | member | viewer | billing
├── Variant: ssoManaged=true | false
└── Layers:
├── Avatar
├── NameEmailStack
├── RoleBadge (or RoleSelect if editable)
├── StatusChip (pending only)
├── LastActiveMeta
├── SsoManagedLabel (conditional)
└── ActionMenuSSO-managed members: disable role dropdown or show “Managed by your identity provider” with link to SSO settings. Manual invite may be blocked when SSO is enforced.
Invite member flow
| Step | UI | Validation |
|---|---|---|
| 1. Email(s) | Single or comma-separated | Valid email; dedupe |
| 2. Role | Radio or select with descriptions | Default Member |
| 3. Message (optional) | Textarea | Max 500 chars |
| 4. Seat check | ”Using 8 of 10 seats” | Block or upsell if at limit |
| 5. Send | Primary button | Toast + pending row in list |
| 6. Confirmation | ”Invitation sent to jane@…” | Resend + Cancel invite links |
Role picker with descriptions:
| Role | Short description | Show in picker |
|---|---|---|
| Admin | Manage team, billing, and all content | ⚠️ icon |
| Member | Create and edit assigned resources | Default |
| Viewer | Read-only access | |
| Billing | Invoices and payment methods only | Optional split role |
Link Learn about roles to expandable matrix or dedicated permissions page—do not rely on tooltip alone for Admin vs Member distinction.
Permissions matrix
| Permission | Owner | Admin | Member | Viewer | Billing |
|---|---|---|---|---|---|
| Invite members | ✓ | ✓ | — | — | — |
| Change roles | ✓ | ✓* | — | — | — |
| Delete workspace | ✓ | — | — | — | — |
| Manage billing | ✓ | ✓ | — | — | ✓ |
| Create content | ✓ | ✓ | ✓ | — | — |
| View content | ✓ | ✓ | ✓ | ✓ | — |
| Manage API keys | ✓ | ✓ | — | — | — |
| View audit log | ✓ | ✓ | — | — | — |
*Admin cannot promote to Owner or remove Owner without transfer flow.
Render as accessible table with row headers (permissions) and column headers (roles). Use ✓ / — or “Allowed” / “Not allowed” text—not color alone. Mobile: collapse to role detail page with bulleted permission list.
Change role and remove member
| Action | Confirmation | Extra gate |
|---|---|---|
| Promote to Admin | Modal: lists new capabilities | Optional re-auth |
| Demote from Admin | Modal: “They will lose billing access” | |
| Remove member | Type email or name to confirm | Re-auth for Admin removal |
| Transfer ownership | Multi-step: select new owner, confirm | Current owner loses Owner role |
| Cancel pending invite | Simple confirm | None |
Remove member modal copy: “Jane Doe will lose access immediately. Shared projects they own will transfer to you.” Surface content ownership rules—designers must align copy with product policy.
Log all membership changes to audit log: invite sent, role changed, member removed, ownership transferred.
Seat management and billing tie-in
| UI element | Purpose |
|---|---|
| Seat counter | ”8 / 10 seats used” in header |
| At-limit banner | ”Add seats to invite more members” → billing |
| Pending invites count | Count toward seats or not—state clearly |
| Remove seat | Downgrade flow; may require removing members first |
Pair with account dashboard and checkout if seats are purchasable. Pending invite rows should show whether they consume a seat: “Reserved seat until invite expires.”
Empty, error, and policy states
| State | Copy / UI |
|---|---|
| Solo workspace | ”Invite teammates” hero + benefits |
| Invite failed (duplicate) | “Already a member” |
| Invite failed (domain blocked) | “Your org only allows @company.com” |
| SSO-only org | Hide invite; “Members join via SSO” |
| Insufficient permission | ”Ask an admin to change roles” |
| Suspended member | Gray row; Admin can reactivate |
When session timeout or 2FA is required for admin actions, show step-up before role change completes.
Admin settings page layout
| Section | Contents |
|---|---|
| Header | ”Team members” + seat counter |
| Invite button | Primary; disabled at seat limit with tooltip |
| Search / filter | By name, email, role, status |
| Active members | Sortable table |
| Pending invitations | Separate section with expiry date |
| Roles & permissions | Link to matrix or custom role builder |
| SSO / SCIM | Link to enterprise login |
Place in Organization settings for B2B products—not buried inside personal account dashboard profile. Owner actions (transfer ownership, delete org) live on a separate Danger zone section.
Handoff checklist
| Item | Dev Mode annotation |
|---|---|
| Role enum | Exact strings: admin, member, viewer |
| Permission flags | Full list mapped to roles |
| Invite expiry | Days until pending invite lapses |
| Seat counting rules | Pending included Y/N |
| SSO override | Which fields read-only when SCIM |
| Audit events | invite_sent, role_changed, member_removed |
| a11y | Role dropdown accessible; matrix has scope headers |
| Mobile | Table → card list breakpoint |
For custom roles (v2), annotate role builder: name, description, permission checkboxes, and “Based on Member” template.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| Role change without confirmation | Accidental Admin promotion | Modal for Admin/Owner |
| No pending invite section | Admins forget outstanding invites | Separate list with resend |
| Permission matrix hidden in docs | Wrong role assigned | In-product matrix link |
| Remove member one-click | Disgruntled admin locks out team | Typed confirm + re-auth |
| Seats unclear for pending | Billing disputes | State seat reservation rules |
| SSO users editable like local | IdP conflict on next sync | Read-only + “Managed by SSO” |
| Viewer can export data | Data leak | Explicit export permission row |
| No audit trail | Compliance failure | Log to security activity |
Recommended workflow
- Define roles with product and engineering—cap at 5 for v1.
- Design member list row with role badge and pending state.
- Build invite modal with role picker and seat warning.
- Create permissions matrix page linked from invite flow.
- Add change role, remove, transfer ownership with confirmations.
- Wire audit events to security activity log.
- Handle SSO-managed read-only states.
- Prototype at-seat-limit upsell and pending invite expiry.
FAQ
Owner vs Admin—what’s the difference?
Owner is typically one per workspace: billing liability, delete org, transfer ownership. Admin manages members and settings but cannot delete the org or remove Owner without transfer.
Should Members invite other Members?
Product decision. If yes, show permission in matrix. If no, disable invite button with “Contact an admin” for non-admins.
Custom roles in v1?
Usually no. Ship fixed roles first; enterprise can request custom RBAC in v2 with a role builder.
How do guest or external collaborators fit?
Separate role (Guest) or resource-level share outside the member list—do not mix guests into seat-counted members without clear UI distinction.
SCIM provisioning UI?
Minimal: show “Members synced from Okta” banner, last sync time, link to IdP docs. Do not duplicate full member CRUD when SCIM is source of truth.
Next steps
- Design SSO and enterprise login UI in Figma — when members join via identity provider, not invite
- Design audit log and security activity UI in Figma — membership change events
- Design account dashboard and my account UI in Figma — personal settings vs org admin
- Design API keys and personal access tokens UI in Figma — often Admin-gated permissions
- Figma multiplayer etiquette: branching, comments, library updates — team collaboration norms in design tools
§ Keep reading