figma guide
Designing organization billing and seat management UI in Figma: plans, invoices, and usage
Design organization billing and seat management UI in Figma with plan comparison, seat usage meters, invoice history, payment methods, and Dev Mode specs for B2B admin.
- Published
- Updated
- Jul 11, 2026
- Read time
- 6 min
- Level
- Intermediate
Quick answer
Organization billing lives under Settings → Billing, Organization → Plan & seats, or Admin → Subscription—separate from personal payment methods and consumer checkout. Design a plan summary card (current plan, renewal date, seat count, MRR); a seat usage meter (used / purchased / pending invites); upgrade and add seats flows with proration preview; invoice history with PDF download; and billing contact / tax ID fields. Only Owner or Billing Admin roles should edit payment—gate with team permissions. When SCIM provisions users, seat counts update automatically—show synced vs manual breakdown. Start from the Figma guides hub and pair with Dev Mode handoff for plan tier enums and proration copy.
Who this is for
- Product designers building B2B SaaS admin consoles, design tool org settings, and team billing surfaces.
- Design system teams separating org billing from consumer ecommerce checkout without reusing cart components blindly.
- Engineers implementing seat-based licensing, proration, Stripe Customer Portal patterns, and billing-role RBAC.
Personal billing vs organization billing
| Surface | Who pays | Typical location | Key actions |
|---|---|---|---|
| Consumer checkout | Individual | Cart → Payment | One-time or personal subscription |
| Personal subscription | Individual | Account → Billing | Cancel, update card |
| Organization billing | Company | Org → Billing | Seats, plan, invoices, tax |
| Marketplace / app billing | Team per integration | Integrations → Billing | Third-party charges |
Verdict: org billing uses invoices and seat math, not product thumbnails. Copy should say “12 of 15 seats used,” not “Your cart is empty.”
Plan summary card
| Field | Spec | Notes |
|---|---|---|
| Plan name | Pro, Business, Enterprise | Link to compare plans |
| Billing cycle | Monthly / Annual | Show savings for annual |
| Renewal date | Next charge date | Timezone-aware |
| Seat count | Purchased seats | Editable if self-serve |
| Price | Per seat × count + tax estimate | Proration note on changes |
| Status | Active / Past due / Canceled | Past due = urgent banner |
OrgPlanSummaryCard
├── PlanNameBadge
├── BillingCycleMeta
├── RenewalDate
├── SeatCountRow (used / purchased)
├── PriceSummary
├── StatusChip (active | past_due | trial | canceled)
└── Actions: Change plan, Add seats, CancelShow trial countdown when applicable: “7 days left—add payment method to avoid interruption.”
Seat usage meter
Pair directly with team member list:
| Segment | Color | Definition |
|---|---|---|
| Active members | Primary | Signed-in, seat-consuming |
| Pending invites | Warning | Reserved seat until expiry |
| Available | Neutral | Purchased but unassigned |
| Over limit | Error | More users than seats—block invites |
SeatUsageMeter
├── ProgressBar (active + pending / purchased)
├── Legend: Active (10) · Pending (2) · Available (3)
├── OverLimitBanner (conditional)
└── CTA: Add seats | Manage membersAt limit: disable invite button in member list; show inline upsell: “Add 3 seats for $X/mo” with proration preview.
When SCIM is enabled, label segment: “8 synced · 2 local · 1 pending invite.”
Add seats and plan change flows
| Flow | Steps | Critical UI |
|---|---|---|
| Add seats | Quantity stepper → proration preview → confirm | Show charge today vs next invoice |
| Upgrade plan | Compare table → confirm feature delta | What unlocks immediately |
| Downgrade plan | Warning modal → effective date | Feature loss, seat minimums |
| Annual ↔ monthly | Savings calculator | When switch takes effect |
Proration preview block (never hide the number):
┌─────────────────────────────────────────────┐
│ Add 5 seats │
│ Prorated charge today $127.50 │
│ New monthly total $450.00 │
│ Next invoice (Aug 1) $450.00 │
│ [ Confirm and pay ] [ Cancel ] │
└─────────────────────────────────────────────┘Downgrade should list what stops working and minimum seat for target plan.
Invoice history
| Column | Spec |
|---|---|
| Invoice # | Link to PDF |
| Date | Issued date |
| Amount | Total with currency |
| Status | Paid / Open / Void |
| Actions | Download PDF, Pay now (if open) |
Empty state: “No invoices yet—your first invoice will appear after [renewal date].”
For past due, pin failed invoice to top with red banner and Update payment method CTA.
Payment method and billing contacts
Reuse patterns from payment methods but org-scoped:
| Element | Spec |
|---|---|
| Default card / ACH | Brand, last4, expiry |
| Backup method | Optional second card |
| Billing email | invoices@company.com |
| Company name + address | Invoice header |
| Tax ID / VAT | Validation by country |
Permission gate: Viewers and Members see read-only summary; edit actions require Billing Admin or Owner per RBAC.
Cancel and retention
| Step | UI |
|---|---|
| 1. Intent | ”Cancel subscription” link (not destructive red on summary card) |
| 2. Survey | Optional reason dropdown |
| 3. Consequence | Access ends date, data export window, seat release |
| 4. Confirm | Type organization name or “CANCEL” |
| 5. Done | Retention offer? Export link to privacy/data |
Do not trap users—show export data and billing contact for refunds clearly.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| Seat count disconnected from member list | Admins confused why invite fails | Single source of truth + deep link |
| No pending invite in seat math | Surprise overage charges | Include pending in meter |
| Proration hidden until charge | Trust loss | Preview before confirm |
| Any member can change card | Fraud, compliance | Billing Admin role only |
| Consumer cart patterns in B2B | Wrong mental model | Invoice-first layout |
| Downgrade without effective date | Support tickets | Show end-of-period date |
| SCIM users ignore seat cap | Billing disputes | Block provision at limit + IdP error docs |
| No past-due state | Silent service loss | Banner + email + in-app alert |
Recommended workflow
- Map billing roles (Owner, Billing Admin) in RBAC matrix.
- Design plan summary card with seat row and renewal meta.
- Build seat usage meter linked to member list and SCIM breakdown.
- Create add seats flow with proration preview.
- Add invoice history table with PDF download.
- Wire payment method org form with billing contact fields.
- Design cancel flow with export and effective date.
- Prototype past-due, at-limit invite block, and trial expiry states.
FAQ
Who can see billing vs who can edit?
All admins often can view usage; only Owner/Billing Admin can change payment, plan, or seats. Hide card numbers from non-billing roles.
How do pending invites affect seats?
Product decision—document clearly. Most products reserve a seat when invite is sent; others on accept only. Match meter to engineering rules.
Self-serve vs sales-assisted Enterprise?
Enterprise may show “Contact account manager” instead of plan change buttons. Still show read-only seat usage and invoice history.
Multiple workspaces under one org?
Org-level billing with workspace allocation sub-table: “Workspace A: 8 seats, Workspace B: 4 seats.”
Tax and VAT collection?
Collect at checkout for self-serve adds; show tax line on proration preview and invoices. Link to legal/tax docs—not a generic FAQ.
Next steps
- Design team member roles and permissions UI in Figma — Billing Admin role and invite limits
- Design SCIM and directory sync UI in Figma — automated seat consumption
- Design payment methods UI in Figma — card and ACH patterns at org scope
- Design subscription and recurring purchase UI in Figma — consumer subscription parallels
- Design account dashboard and my account UI in Figma — personal vs org settings navigation
§ Keep reading