Skip to main content

Managing Frames

Frames are the visual building blocks inside a map.

Use them for product screens, wireframes, architecture diagrams, or any image that should carry linked engineering context.

What belongs in a frame​

A frame works best when it represents one meaningful visual artifact, such as:

  • a web or mobile screen
  • a state of a workflow
  • a system or component diagram
  • a visual comparison between variants of the same experience

Adding frames​

The exact UI controls may change, but the operating model is stable:

  1. Open a map.
  2. Add a frame from an uploaded image or a connected design source such as Figma.
  3. Give the frame a clear name.
  4. Place points where readers need implementation detail or navigation.

Common frame sources​

  • exported product screenshots
  • architecture or process diagrams
  • design frames from Figma
  • annotated visuals used in internal reviews

Frame management​

As your documentation grows, keep frames easy to scan and maintain:

  • name frames after the user-facing state or scenario they represent
  • keep related frames together inside one map
  • retire or replace frames when the product changes materially
  • use points instead of adding long explanatory text directly into screenshots

Frame groups and variants​

Use frame groups when one bounded area has multiple variants or states.

Good examples:

  • desktop and mobile versions of the same panel
  • loading, success, and error states inside one modal
  • role-based variants of the same dashboard area

Frame groups help keep related variations together without forcing duplicate top-level frames for every small difference.

Figma workflow​

When importing from Figma:

  • use stable frame names in the design file
  • import related frames together for one feature area
  • refresh the imported frames when the design becomes the new source of truth
  • use clear names such as Login Screen or Checkout Confirmation
  • keep one frame focused on one scenario
  • add points only where they improve navigation or implementation understanding
  • use frame groups for true variants, not as a substitute for separate flows