figma guide
Designing secrets rotation and credential vault UI in Figma: storage, rotation, and handoff
Design secrets rotation and credential vault UI in Figma with encrypted storage, rotation schedules, break-glass access, audit trails, and Dev Mode specs for enterprise Security and Platform admin.
- Published
- Updated
- Jul 22, 2026
- Read time
- 7 min
- Level
- Intermediate
Quick answer
Secrets rotation UI lets Platform and Security teams store credentials centrally, rotate on schedule, and audit every reveal—not scatter keys in env files and Slack. Design a vault inventory with secret name, type, owner, rotation cadence, and last-rotated date; create/import flow with encrypted storage and scope tags; rotation scheduler with auto-rotate, manual trigger, and dual-write grace period; reveal panel with JIT elevation, time-limited copy, and audit log entry; and integration hooks for CI/CD and webhooks. Start from the Figma guides hub and pair with API keys, PAM, audit log, DLP, and Dev Mode handoff.
Who this is for
- Product designers building vault dashboards, rotation wizards, and reveal flows for enterprise Security, Platform, and DevOps admin consoles.
- Design system teams aligning secret status badges with badges, tables, and inline alerts.
- Engineers implementing envelope encryption, rotation webhooks, version history, and scoped access tied to team roles and JIT access.
Vault inventory (admin hub)
SecretsVaultHub
├── Header: Credential vault · [ New secret ] [ Import ] [ Rotation policies ]
├── Summary: 142 secrets · 8 overdue rotation · 3 expiring this week
├── Filters: Type · Environment · Owner · Rotation status · Sensitivity
└── Row: prod/db-primary · PostgreSQL · Production · Rotated 42d ago · Due in 48d · [ Manage ]| Column | Content |
|---|---|
| Name / path | prod/db-primary, staging/stripe-webhook |
| Type | API key, DB password, TLS cert, OAuth client secret, SSH key |
| Environment | Production / Staging / Dev — color-coded |
| Owner | Team or service account responsible |
| Rotation cadence | 30d / 90d / Manual / Never (flagged) |
| Last rotated | Date + actor (auto vs human) |
| Status | Healthy / Due soon / Overdue / Compromised / Archived |
| Sensitivity | Links to content classification |
Verdict: inventory is the control plane—readers should spot overdue secrets and orphaned credentials in one scan, not hunt per service.
Create and import secret flow
CreateSecretWizard
├── Step 1 — Identity: Name prod/stripe-webhook-secret · Type OAuth client secret
├── Step 2 — Value: [ Paste once ] [ Generate random ] — never shown again after save
├── Step 3 — Scope: Environment Production · Services billing-api, webhooks-worker
├── Step 4 — Access: Viewers: Platform Admin · Reveal requires JIT elevation
├── Step 5 — Rotation: ● Auto every 90d ○ Manual ○ On compromise only
└── [ Create secret ] [ Cancel ]| Field | Why it matters |
|---|---|
| Path naming | Hierarchical paths enable RBAC by prefix (prod/* vs dev/*) |
| One-time paste | Value never re-displayed in full—only rotate or reveal with audit |
| Scope tags | Which apps consume this—critical for rotation blast radius |
| Reveal policy | Default: JIT elevation + MFA step-up |
| Rotation policy | Auto vs manual; link to org default in posture dashboard |
Import from legacy: CSV of metadata only (not values), or connect cloud KMS—show migration progress bar with progress stepper.
Duplicate detection: “Secret prod/stripe-webhook-secret exists — [ View existing ] or [ Create new version ].”
Rotation scheduler and dual-write grace
Rotation is a workflow, not a button:
RotationWorkflow
├── Trigger: Scheduled (90d) · Manual · Compromise incident · Policy change
├── Phase 1: Generate new value · Store as v2 (pending)
├── Phase 2: Notify consumers · Webhook ROTATION_PENDING · 72h grace
├── Phase 3: Consumer ack: billing-api ✓ · webhooks-worker pending
├── Phase 4: Promote v2 active · Deprecate v1 · Revoke old after grace
└── Audit: Full timeline in [audit log](/designing-audit-log-and-security-activity-ui-in-figma/)| Phase | UI pattern |
|---|---|
| Pending dual-write | Banner on secret detail: “v2 active for new connections; v1 valid until Aug 1” |
| Consumer ack table | Service name, last fetch, ack status, owner team |
| Manual rotate now | Confirm modal with impact summary and rollback option |
| Compromise rotate | Red inline alert — immediate revoke v1, force ack |
| Failed rotation | Retry, escalate, link to incident runbook |
Show next rotation date on detail page and in posture dashboard gap cards (“12 secrets past 90d policy”).
Reveal and copy flow (time-bound access)
Never show full secret value in list views. Reveal requires elevation:
RevealPanel
├── Secret: prod/db-primary · PostgreSQL password · v3 active
├── Requester: Sam Rivera · Platform Admin · MFA verified
├── Elevation: JIT approved · 15m reveal window · Expires 2:47 PM
├── Value: •••••••••••••••• [ Reveal ] [ Copy ] (disabled until reveal)
├── After reveal: Value shown 30s · Auto-hide · Copy logged
└── Audit: Reveal by Sam Rivera · IP 203.0.113.4 · Reason: deploy INC-5102| Control | Implementation |
|---|---|
| Reveal window | 15–30 minutes max; countdown in header |
| Copy once | Log copy event; optional clipboard clear after 60s |
| Justification | Required text + ticket link—same as PAM requests |
| No screenshot hint | Subtle footer: “Reveals are audited” |
| Break-glass | Emergency path for outage—post-review mandatory |
Pair reveal with active sessions—flag reveal from unknown device.
Version history and rollback
VersionHistory
├── v3 (active) · Rotated Jul 20 · Auto · Consumers: 4/4 acked
├── v2 (revoked) · Rotated Apr 21 · Revoked Jul 20
├── v1 (revoked) · Created Jan 10 · Initial import
└── [ Rollback to v2 ] (disabled — v2 revoked) · [ Compare metadata ]| Action | When allowed |
|---|---|
| View metadata | Always—who rotated, trigger, consumer acks |
| Rollback | Only if previous version not yet destroyed (grace window) |
| Compare | Side-by-side scope, access policy, rotation date—not values |
| Archive | Soft-delete with retention per data retention policy |
Use accordions for long version lists; badges for active/revoked/pending.
Integration with API keys and webhooks
Long-lived API keys and webhook signing secrets should live in the vault or link to it:
| Pattern | UI |
|---|---|
| API key backed by vault | Key detail shows “Secret stored in vault · prod/api-key-billing” |
| Webhook secret rotation | Rotation triggers webhook re-registration wizard |
| CI/CD fetch | Service account with scoped read—no human reveal |
| Third-party OAuth | Client secret in vault; connected accounts shows rotation status |
Discourage parallel storage: banner on API key page if secret not vault-managed—“Migrate to vault for rotation and audit.”
Posture and compliance hooks
Surface vault health in security posture dashboard:
PostureGapCard — Secrets management
├── 8 secrets overdue rotation (policy: 90d)
├── 4 secrets with standing reveal access (target: JIT only)
├── 2 production secrets owned by departed members
└── [ View inventory ] [ Launch rotation campaign ]Link to access review for vault admin roles and compliance exports for rotation audit trails.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| Show full secret in detail view by default | Shoulder surfing, screenshot leaks | Reveal-on-demand with audit |
| Rotate without consumer ack | Breaks production at cutover | Dual-write grace + ack table |
| No version history | Can’t trace compromise timeline | Immutable version log |
| Vault RBAC too broad | Everyone reveals production DB | Path-based roles + JIT |
| Rotation overdue invisible | Silent SOC2 drift | Overdue badges in inventory + posture |
| Copy without logging | No forensic trail | Log every reveal and copy |
| Secrets outside vault | Shadow credentials | Migration nudges from API key UI |
| Same UI for dev and prod reveal | Low friction on prod | Stricter elevation for Production |
| No compromise fast path | Slow incident response | One-click compromise rotate |
| Orphan secrets after offboarding | Ex-employees still “owner” | Reassign owner on deprovision |
Recommended workflow
- Design vault inventory with rotation status, sensitivity, and environment filters.
- Build create/import wizard with one-time paste, scope tags, and rotation policy.
- Add rotation workflow UI with dual-write phases and consumer ack table.
- Implement reveal panel with JIT elevation, countdown, and copy audit.
- Add version history with rollback rules and metadata compare.
- Link API keys and webhooks to vault-backed storage.
- Wire posture gap cards and annotate rotation timing in Dev Mode.
FAQ
Human-readable secret values ever shown again?
No after create—only reveal with audit, or rotate to new value. Support “verify fingerprint” (hash prefix) without full reveal.
Auto-rotation without downtime?
Dual-write grace period—both versions valid until all consumers ack; document in handoff specs.
Contractors reveal production secrets?
Deny by default—contractor role gets staging paths only; production requires JIT + Security approval.
Link to vendor onboarding?
Vendor-supplied credentials import to vault on approval—never store in ticket attachments.
BYOK / customer-managed keys?
Separate enterprise tier UI—show KMS ARN, key policy status, and sync health; out of scope for basic vault but note in enterprise handoff appendix.
Next steps
- Design API keys and personal access tokens UI in Figma — migrate long-lived keys into vault
- Design privileged access management and JIT access UI in Figma — gate reveal and admin actions
- Design audit log and security activity UI in Figma — rotation and reveal events
- Design webhooks and event subscriptions UI in Figma — signing secret rotation
- Design security posture dashboard and compliance checklist UI in Figma — overdue rotation KPIs
§ Keep reading