Skip to main content

Managing Frames

Overview​

Frames are visual representations (screenshots or diagrams) within a map where you place interactive points. Frames typically represent UI screens, design mockups, or architectural diagrams.

What are Frames?​

Frames enable you to:

  • Visualize UI: Upload screenshots or design files (e.g., from Figma) to represent your interface
  • Add Context: Place points on specific regions of the frame to link to implementation details
  • Create Variants: Use Frame Groups to represent multiple states or versions of the same screen
  • Navigate Flows: Link frames together using Map Points to show user journeys

Creating a Frame​

Step 1: Open Your Map​

  1. Navigate to your dashboard
  2. Click on a map to open it
  3. You'll see the Frames view showing all frames in the map

Step 2: Add a Frame​

  1. Click the "Add Frame" button
  2. Choose one of the following options:

Option A: Upload Image File​

  • Click "Upload" in the dropdown
  • Select an image file from your computer (PNG, JPG, SVG)
  • The frame will be created with your uploaded image

Option B: Import from Figma​

  • Click "Import from Figma" in the dropdown
  • Enter your Figma file URL or frame ID
  • Select the frames you want to import
  • Click "Import" to add them to your map

Step 3: Configure Frame​

After uploading, you can:

  • Name the Frame: Give it a descriptive name (e.g., "Login Screen", "Dashboard Overview")
  • Set Template Type: Choose the frame type (Screen, Diagram, etc.)
  • Set Status: Mark as Active, In Progress, or Archived
  • Add Description: Optional notes about what the frame represents

Managing Frames​

View Modes​

You can view frames in two modes:

  • Grid View: See all frames as cards in a grid layout
  • Canvas View: View frames in a visual canvas layout for spatial organization

Switch between views using the view mode toggle in the top toolbar.

Filtering and Sorting​

  • Filter by Type: Filter frames by template type
  • Filter by Status: Show only frames with specific status
  • Sort: Sort frames by name or creation date

Editing Frame Details​

  1. Click on a frame card or canvas item
  2. Access frame properties/settings
  3. Update name, description, status, or template type
  4. Save changes

Reorganizing Frames​

In Canvas View, you can:

  • Drag frames to reposition them
  • Group related frames visually
  • Create spatial relationships between frames

Deleting a Frame​

  1. Select the frame you want to delete
  2. Click the delete/trash icon
  3. Confirm deletion

Note: Deleting a frame will also remove all points and Frame Groups associated with it.

Frame Groups​

Frame Groups allow you to represent "frames within a frame" - regions that contain multiple subframes or variants.

Creating a Frame Group​

  1. Open a frame in the frame editor
  2. Click "Add Frame Group"
  3. Draw a rectangle on the region where you want the group
  4. The Frame Group region is created

Adding Subframes​

Within a Frame Group, you can add subframes for:

  • States: Loading, Error, Success states
  • Variants: Desktop vs Mobile, different user roles
  • Tabs: Different tab content within the same region

Each subframe can have its own Implementation Points and Map Points.

Learn more about Frame Groups in the Points & Frame Groups Guide.

Figma Integration​

Importing from Figma​

UiGraph supports importing frames directly from Figma:

  1. Click "Add Frame" → "Import from Figma"
  2. Enter your Figma file URL or authenticate with Figma
  3. Browse and select the frames you want to import
  4. Frames are imported as images into your map

Best Practices for Figma Import​

  • Use High-Fidelity Designs: Import completed designs rather than wireframes for better context
  • Name Frames in Figma: Frame names in Figma become frame names in UiGraph
  • Import Related Frames Together: Import all frames for a feature flow at once
  • Update After Design Changes: Re-import frames when designs are updated

Working with Frames​

Adding Points to Frames​

Once a frame is created, you can add various types of points:

  • Implementation Points: Link UI regions to APIs, services, databases, tests
  • Map Points: Link UI regions to other maps for navigation flows
  • Frame Group Points: Define regions containing subframes

See the Points & Frame Groups Guide for detailed instructions.

Viewing Frame Details​

Click on any frame to:

  • View the full-size frame image
  • See all points placed on the frame
  • Edit frame properties
  • Access frame comments and collaboration features

Next Steps​

After creating frames:

  1. Add Points - Place interactive points on your frames
  2. Create Map Points - Link frames to other maps
  3. Add Comments - Collaborate with your team on frames

Best Practices​

  • Use Clear Names: Name frames descriptively (e.g., "Login Screen - Mobile" not "Frame 1")
  • Organize by Flow: Group frames in the order of user flow or feature sequence
  • Keep Designs Updated: Re-upload frames when UI changes significantly
  • Use Status Labels: Mark frames as Active, Archived, or In Progress to track progress
  • Add Descriptions: Include context about what each frame represents