Organizing Figma Artboards as Screen Flows

Most designers do the IA work properly. A sitemap, a flow chart, sometimes a Miro board, and the structure holds up. Then it goes into a file nobody opens again.

What reaches engineering is fifty artboards on a Figma canvas with no stated relationship between any of them. Which screen comes first? Where does this fork? What happens after the user makes a choice? The IA answered all of that, in a different file, and the answers didn’t travel.

On a consumer app you can get away with this, because the flows are mostly linear and a developer can infer the order from the screens. Enterprise apps don’t give you that. You’re dealing with role-based access, conditional steps, modules that interact with each other, and edge cases that multiply with every feature. Fifty screens in a grid tells you nothing about the relationships between them, and the relationships are the part that’s hard to build.

So I stopped keeping the 2 artifacts apart. Not a separate page, not a flowchart off to the side. The file layout is the flow. Open the file, see how everything connects.

Sections as structure

Figma sections are the foundation. Each section represents a distinct chunk of the flow: a step, a decision point, a module. Inside the section, the actual screens live.

The canvas becomes a map. Zoom out and you see the full flow. Zoom in and you’re looking at the UI for that specific part of it.

The primary flow

The primary flow runs horizontally across the canvas, left to right. Start point on the left, final screen on the right. Every section in between is a step in the journey.

This sounds trivial and it isn’t. When screens are scattered with no spatial logic, every conversation about the flow starts with “wait, which screen are we talking about?” When the layout is the flow, that question stops being asked.

Handling forks

When a flow splits, say the user can take path A or path B, I create separate sections for each path. Those sections sit above and below each other, branching off from the decision point.

To show the connection between sections, I draw vectors that resemble a sankey diagram. The lines flow out of one section and fan into the next ones, making it visually obvious where paths diverge and where they come back together.

I use a Figma plugin called Sankey Connect to make this fast. Drawing the connections by hand is tedious and fragile. The plugin handles the routing and gives you clean, readable lines.

Once the vectors are drawn, I send those layers to the back of the canvas and lock them, so they don’t interfere with selection or editing. You can click screens, drag frames, do your normal design work. The flow connections stay in place, visible but out of the way.

Where flows intersect

In enterprise apps, flows aren’t linear. They branch, merge, and share steps, and the section-based layout handles that without any extra work.

On Factweavers, users can create either a simple metric or a composite metric. Two fundamentally different paths, so they live in two separate sections. But at certain points the next step is the same regardless of which path the user took. The sections intersect, the vectors from both paths converge into the same section, and the flow continues as one.

Zoom out and you can trace every possible route from start to finish. The connections make it clear where paths split, where they merge, and where the user ends up.

Sections connected by sankey-style vectors turn the file into a living diagram. Developers see the flow. PMs see the scope. QA sees the paths they need to test. Same file, three different readings, none of which needed a meeting.

The setup

Start with the IA in a separate file. Sitemaps, taxonomies, navigation structure. Get that right before touching Figma. Then create sections for each major step or module, and lay the primary flow out horizontally, left to right.

When the flow forks, branch vertically. Separate paths get their own sections, stacked above or below. Use Sankey Connect to draw the connections, then send the vector layers to the back and lock them. When flows converge on a common step, route both sets of vectors into the shared section. All paths end at the final screen on the right.

The file is the documentation

The IA still lives in its own file. That’s where the structural thinking happens, and it should stay there. What changed is that the Figma file now reflects it instead of ignoring it.

When I hand off a file structured this way, I rarely get “how do these screens connect?” The answer is on the canvas.