FIGR / UI TEMPLATE

API Keys

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

API Keys

BUILD ON THIS

Make it yours in Figr.

Explore this screen, then bring in your own product and design system to shape the next version.

Use this template ↗

At a glance

Screen

Settings

Primary action

Create and manage API keys

Pattern

Settings list

State

Default

Design system

Mono Ops

What this screen helps with

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

What to look for

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

States to consider

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

Where it fits

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

Patterns in this screen

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

UX choices to review

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

Try a similar screen 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

KEEP EXPLORING

More ways to approach your next screen.

Browse other product UI examples, compare patterns, and pick the direction that suits your product.

Explore all 500 templates ↗