API Keys

An API key settings screen for developers who need to create, name, copy, rotate, restrict, and revoke credentials safely.

API Keys
Use this template in Figr

Template facts

Screen

Settings

Primary action

Create and manage API keys

Pattern

Settings list

State

Default

Design system

Mono Ops

What this screen helps users do

Developers need to create credentials quickly while still understanding scopes, last use, expiry, and the risk of exposing a secret.

Key elements

  • Key name and prefix
  • Scopes or permissions
  • Created and last-used dates
  • Create, rotate, and revoke actions
  • One-time secret reveal

States worth designing

  • Secret shown once
  • Key copied
  • Rotation warning
  • Revoke confirmation
  • No permission to manage keys

Where this screen sits in the flow

Developer Settings → API Keys → Create Key → Copy Secret → Rotate / Revoke

Patterns used

Settings list, modal, secret reveal, copy action, destructive confirmation

Why these choices work

Show a secret only once and make that rule impossible to miss. Separate low-risk edits from destructive revoke or rotation actions.

Start from this in Figr

Create a high-fidelity API key management screen for a developer product. Include key names, scopes, last use, create, one-time secret reveal, copy, rotate, revoke, and permission states.

Open Figr