figma guide
Designing member invitations and pending invites UI in Figma: bulk invite, resend, and handoff
Design member invitation and pending invites UI in Figma with bulk email invite, role assignment, resend/revoke flows, seat limits, and Dev Mode specs for B2B onboarding.
- Published
- Updated
- Jul 13, 2026
- Read time
- 7 min
- Level
- Intermediate
Quick answer
Member invitations let admins add people before they have accounts—usually under Organization → People → Invite, with a pending invites table for sent, expired, and revoked rows. Design a single and bulk invite modal (emails, role, optional teams/groups); a pending invites list with status, sent date, inviter, and actions (resend, revoke, copy link); seat-limit gates tied to org billing; and accept-invite landing that handles wrong account, expired link, and already-member states. Block invites to domains under SSO enforcement when policy requires SSO-only join. Log invite events to audit activity. Start from the Figma guides hub and pair with Dev Mode handoff for invite token and expiry specs.
Who this is for
- Product designers building People tabs, admin consoles, and onboarding flows for team products.
- Design system teams extending member roles and custom roles into invite-time assignment.
- Engineers implementing email invites, magic links, seat caps, and SCIM-vs-manual invite precedence.
Invite entry points
| Entry point | Typical user | Default role | Notes |
|---|---|---|---|
| People → Invite | Org admin | Member | Primary path |
| Empty team | Team lead | Member for that team | Scoped invite |
| Billing seat add | Billing admin | Member | After purchase CTA |
| SSO JIT | N/A | Auto-provision | Not manual invite—show banner |
| SCIM | IT admin | Mapped from group | SCIM supersedes manual |
Verdict: one Invite members button on People; secondary entry from team settings should open the same modal with team pre-selected.
Invite modal layout
| Field | Spec | Validation |
|---|---|---|
| Email(s) | Textarea or tag input; comma/newline split | Valid email format |
| Role | Dropdown: fixed + custom roles | Permission to assign role |
| Teams / groups | Multi-select optional | Inherited permissions |
| Personal message | Optional textarea | Max 500 chars |
| Send invite | Primary CTA | Disabled at seat cap |
InviteModal
├── Header: Invite members to Acme Org
├── EmailInput (tags with invalid highlight)
├── RoleSelect + TeamsMultiSelect
├── SeatBanner: "3 seats remaining" → link billing
├── OptionalMessage
└── Footer: Cancel | Send invites (count)Bulk paste should show a preview table before send: email, role, team, status (valid / duplicate / already member).
Pending invites list
| Column | Spec | Notes |
|---|---|---|
| Invitee address | Mask if GDPR-sensitive | |
| Role | Assigned role chip | Editable before accept |
| Status | Pending / Expired / Revoked / Accepted | Color + icon |
| Sent | Date + relative | ”3 days ago” |
| Invited by | Admin name + avatar | Link to audit |
| Expires | Countdown or date | Default 7–14 days |
| Actions | Resend, Revoke, Copy link | Kebab on mobile |
PendingInvitesTab
├── Filter: All | Pending | Expired
├── Search by email
├── InvitesTable
│ └── Row: Email, Role, Status, Sent, By, Expires, Actions
└── BulkActions: Revoke selected (admin only)Expired rows stay visible 30 days for audit, then archive—or move to audit log only.
Resend, revoke, and copy link
| Action | Confirmation | Side effect |
|---|---|---|
| Resend | None or light toast | New token; extends expiry |
| Revoke | Modal: “They can no longer join” | Invalidates link immediately |
| Copy link | Toast: “Link copied” | Same token until expiry |
| Change role | Inline edit if pending | Updates before accept |
Revoke must invalidate all outstanding tokens for that email+org pair. Show Revoked status—not delete the row.
Seat limits and billing gates
When org billing seat cap is reached:
┌─────────────────────────────────────────────┐
│ ⚠ No seats available (48/48 used) │
│ Add seats or remove members to invite more. │
│ [ Manage billing ] [ View members ] │
└─────────────────────────────────────────────┘| Scenario | UI |
|---|---|
| At cap | Disable Send; show billing CTA |
| Over cap (legacy) | Banner on People; block new invites only |
| Pending invites + cap | Pending does not consume seat until accept—or product policy banner |
| SCIM pre-provision | Seat reserved on create vs on first login—document in handoff |
Clarify in FAQ whether pending invite reserves a seat. Most products do not until acceptance.
Accept-invite landing page
| State | Screen | CTA |
|---|---|---|
| Logged out, valid | Org name, inviter, role | Sign up / Log in to accept |
| Logged in, matching email | Confirm join | Accept invitation |
| Logged in, wrong email | ”Switch account” | Log out + use invited email |
| Expired | Explain + contact admin | Request new invite |
| Revoked | Same as expired | Support link |
| Already member | Redirect to workspace | Go to dashboard |
AcceptInvitePage
├── OrgLogo + "You're invited to Acme"
├── InviterLine: "Jane invited you as Member"
├── RoleSummary (read-only)
├── AuthCTA: Create account | Sign in
└── Footer: Wrong account? SwitchAfter accept, route to onboarding checklist or default project—not a blank dashboard.
SSO, domain capture, and invite conflicts
| Policy | Manual invite behavior |
|---|---|
| Invite-only | Normal flow |
| Verified domain auto-join | Invite optional; warn duplicate paths |
| SSO required for @acme.com | Block password invite OR send SSO-only invite email |
| SCIM enabled | Banner: “IT may provision via directory” |
When inviting @acme.com under SSO enforcement:
This domain uses SSO. The invite email will direct them to sign in with your company IdP.
[ ] Also allow password setup (not recommended)Pair with login UI so accept flow lands on SSO button, not password form.
Invite links vs email-only
| Mode | Use case | Settings |
|---|---|---|
| Email invite | Known colleagues | Default |
| Shareable invite link | Workshops, contractors | Admin enables; optional expiry |
| Domain link | Auto-join verified domain | Separate from personal invite link |
Shareable link settings (Security → Invitations):
- Expiry: 24h / 7d / 30d / never
- Max uses: 1 / 10 / unlimited
- Default role: Member (locked or selectable)
- Regenerate link invalidates previous
Show who created link and use count in audit log.
Notifications
| Event | Recipient | Channel |
|---|---|---|
| Invite sent | Invitee | Email + optional in-app |
| Invite accepted | Inviter + admins | Email digest |
| Invite expired | Inviter | Optional reminder day before |
| Seat cap blocked | Admin who tried invite | In-app only |
Email template should include: org name, inviter, role, expiry date, accept button, and “If you didn’t expect this” footer.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| No pending list | Admins spam resend | Table with status |
| Revoke deletes row | No audit trail | Status = Revoked |
| Bulk invite no preview | Typos become sends | Validate table step |
| Seat cap silent fail | Confusion at billing | Inline banner + CTA |
| Wrong-email accept | User in wrong org | Hard block + switch account |
| Duplicate invite rows | Two links, chaos | Merge or show “already pending” |
| Role change after accept | Support tickets | Lock role on accept |
| SCIM + manual race | Duplicate users | Dedupe by email; show merge UI |
| Expired link generic error | Users give up | Name inviter + request resend |
| No audit on invite | Compliance gap | Log sent, accepted, revoked |
Recommended workflow
- Design invite modal with email tags, role, teams, and seat banner.
- Build pending invites table with filters and row actions.
- Prototype accept-invite states: valid, expired, wrong account, already member.
- Wire seat cap to billing and disable rules.
- Add SSO/domain policy warnings for enterprise domains.
- Specify email template content blocks for marketing handoff.
- Hand off token TTL, seat reservation rules, and role enums in Dev Mode.
FAQ
Should pending invites count against seats?
Usually no until the user accepts. If your product reserves seats, show “1 seat reserved” on the pending row and document in billing FAQ.
Can one email have multiple pending invites to different orgs?
Yes in multi-tenant products. Accept page must show which org clearly to avoid wrong joins.
Resend vs new invite—same link?
Product choice. Resend with new token is safer; document whether old links die on resend.
Invite contractors without SSO?
Common pattern: allow password invite for non-domain emails; enforce SSO only for verified domain matches.
Bulk CSV import?
Enterprise add-on. If supported, design upload → map columns → error report download—not only textarea paste.
Next steps
- Design team member roles and permissions UI in Figma — role assignment at invite and after join
- Design organization billing and seat management UI in Figma — seat caps that gate invites
- Design domain verification and SSO domain management UI in Figma — SSO-only invite paths
- Design SCIM and directory sync UI in Figma — when IT owns provisioning
- Design login, registration, and password recovery UI in Figma — accept-invite auth flows
§ Keep reading