Skip to main content

Points, Map Points & Frame Groups (Frames Inside a Frame)

1. Overview​

UiGraph currently enables teams to:

  • Create Maps to describe features, modules, services.
  • Add Frames (screens/diagrams) inside a map.
  • Add Focal Points on a frame to connect UI spots to implementation details (APIs, services, DB, tests, etc.).

UiGraph introduces:

  • A generic Point/Pin concept
  • Map Points – link UI regions to other maps
  • Frame Group Points – define regions inside a frame holding multiple subframes/variants and aggregated context

2. Core Concepts​

2.1 Maps​

A Map is a collection of frames explaining a feature or domain.

2.2 Frames​

A Frame is a screenshot/diagram inside a map, where Points are placed.

2.3 Points / Pins (generic concept)​

A Point/Pin is an interactive marker on a frame.

Types:

  • Implementation Point
    • Connects UI spot to architecture (APIs, services, DB, etc.)
  • Map Point
    • Connects UI spot to another map
    • Used for flows
  • Frame Group Point
    • Defines a rectangular region holding subframes/variants
    • Represents “frame inside a frame”

3. Map Points​

Map Points express navigation from a specific UI element.

Behaviors:

  • Created via “Add Map Point” → click location
  • Right panel shows label, linked map, notes
  • Clicking a Map Point opens the linked map with breadcrumbs
  • Multiple Map Points allowed per frame

4. Frame Group Points​

Frame Group Points define regions that act as nested screens.

4.1 Creating a Frame Group Region​

  • Upload Figma frame → one UiGraph frame
  • Detect nested screens
  • “Add Frame Group” → draw rectangle on region
  • UiGraph creates a Frame Group Point (region + groupId)

4.2 Adding subframes/variants​

Within a Frame Group, you can add subframes for states, tabs, or variants (e.g., Desktop vs Mobile, or different user roles).

Each subframe:

  • Shares the same groupId
  • Has its own Implementation Points and Map Points

4.3 Viewing Frame Groups​

On the main frame, regions are visible as overlays. Clicking a region selects it and allows you to switch between variants inline.

5. Context View: Aggregated vs Specific​

When selecting a Frame Group, the right-hand panel provides two views:

5.1 Aggregated Context (All subframes)​

Shows all Implementation Points and Map Points across all subframes in the group. This helps answer: "What architecture is used across all variants?"

5.2 Specific Context (Specific subframe)​

Select a single subframe to see only its specific points. This helps answer: "What context exists for this exact state?"

6. Map-to-Map Navigation​

Navigation in UiGraph is driven by Map Points:

  • Click a UI element with a Map Point
  • Follow the link to the target map
  • Use breadcrumbs to navigate back

This ensures navigation reflects real UI interactions and matches Figma prototypes.