Floto's Research Library

As software products grow in complexity, maintaining an accurate understanding of their navigational structure becomes increasingly difficult. Designers and product managers routinely lose track of how screens connect, which paths are reachable, and where the flow breaks down. Existing tools either require manual documentation or are limited to small frame sets due to the cost of large language model (LLM) inference.

We present a scalable pipeline for automatically generating product navigation graphs from UI design files. Given a Figma page containing an arbitrary number of screen designs, our system produces a directed flow graph representing the navigational structure of the product—identifying screens, transitions, entry points, exit points, and user goals. The core contribution is a three-pass architecture that uses multimodal image embeddings to deduplicate visually similar screens before LLM classification, reducing the number of expensive inference calls from O(N) to O(k), where k is the number of visually distinct screens. Graph synthesis is performed by a single LLM call that receives only the k deduplicated representative frames rather than all N frames, achieving scalability through input reduction while preserving the holistic reasoning that makes single-call synthesis produce coherent graphs. We evaluated an embedding-based edge inference alternative and found it unreliable due to ambiguity between visually similar screens with identical labels and the absence of global context in per-frame matching. We further introduce an incremental update strategy that combines file-level change detection with per-frame content hashing, enabling re-runs to skip unchanged frames entirely and reuse their stored classifications and embeddings.

We evaluate the system on real product design files ranging from 20 to 130 frames, demonstrating a 60–80% reduction in LLM calls compared to naive per-frame classification, and near-instant re-runs when designs have not changed. The resulting graphs are structurally equivalent to hand-authored flows and serve as a foundation for downstream tasks including automated flow testing and design quality auditing.