Organizing Figma Artboards as Screen Flows
Making the file layout the flow, so nobody asks how the screens connect.
I’d do the IA work in a separate file. Sitemap, flow chart, Miro board. The structure was solid.
Then I’d design screens in Figma.
By fifty artboards, the flow was gone. Developers saw a wall of screens with no idea how they related. The IA existed in a different file nobody opened.
So I started organizing Figma artboards as screen flows. The file layout is the flow.
Sections as structure
Figma sections are the foundation. Each section represents a step, decision point, or module. Screens live inside.
Zoom out: see the full flow. Zoom in: see the UI.
The primary flow
Primary flow runs left to right. Start on the left, final screen on the right.
When screens scatter with no spatial logic, every conversation starts with “wait, which screen?” When the layout is the flow, that disappears.
Handling forks
When a flow splits, I create separate sections for each path, stacked above and below.
I draw vectors that resemble a sankey diagram. Lines flow out of one section and fan into the next, showing where paths diverge and converge.
I use Sankey Connect. Drawing by hand is tedious.
Lock the vector layers so they don’t interfere with editing. Flow connections stay visible but out of the way.
Where flows intersect
Enterprise apps branch, merge, and share steps. On Factweavers, users can create a simple metric or a composite metric. Two different paths in separate sections. But at certain points, the next step is the same. The sections intersect. Vectors converge into one section.
Sections connected by sankey-style vectors turn the file into a living diagram. Developers see the flow. PMs see the scope. QA sees test paths.
The setup
Start with IA in a separate file. Get that right before Figma. Create sections for each step. Lay out primary flow left to right.
When the flow forks, branch vertically. Use Sankey Connect to draw connections. Lock vector layers. When flows converge, route both vectors into the shared section.
When I hand off a file structured this way, I rarely get “how do these screens connect?” The answer is on the canvas.