Mastering Points, Map Points, and Frame Groups

UIGraph is more than just a diagramming tool; it's a bridge between design and implementation. Today, we're diving deep into one of our most powerful features: Points and Frame Groups.

If you've ever struggled with representing "frames inside a frame" or complex UI flows, this update is for you.

The Problem with Flat Diagrams

Designers often create complex layouts in Figma with nested panels, modals, and variants. When these are exported as flat images, the technical context gets lost. You might know what the screen looks like, but not how the individual components interact or what APIs they call.

Enter Frame Groups

With Frame Groups, you can now define specific regions within a frame that act as nested screens.

• Variants Support: Add subframes for different states (e.g., Loading, Error, Success) or devices (Mobile vs. Desktop).
• Aggregated Context: See all implementation details (APIs, DB queries) across all variants in a single view.

Map Points for Seamless Navigation

Stop guessing where a button leads. Map Points allow you to link specific UI elements directly to other maps in your project. It's like a clickable prototype, but powered by your actual project documentation.

Implementation Points

Connect the dots between your UI and your code. Pin an Implementation Point to a button to show exactly which API endpoint it hits or which test suite covers its logic.

Ready to level up your mapping? Read the full Points & Pins Guide.