Flow LGX, part 2: milestone 1 — turning the designer’s screens into a plan

About this project

Month by month, how a logistics platform for a Toronto client went from a simple brief to a live, multi-company SaaS product.

• Read the case study
• All Flow LGX stories

In short

The first milestone was the user interface, designed in Figma. We turned the design file into a list of screens, states and reusable parts, so the build would be fast and predictable.

Reading a design file like a developer

A design file is not a specification, but it can become one. We went through the Flow LGX file frame by frame and wrote a screen inventory: the name of each page, which role uses it, what data it shows, and which actions it allows. Anything the design implied but did not show — a confirmation, a validation message, a permission check — went on a separate list of questions for the client and designer.

That list mattered more than the screens themselves. Most rework on dashboard projects comes from the parts nobody drew.

The states nobody draws

For every table and form we wrote down four states before building it:

• Empty — the first day, before any jobs exist. What does the user see, and what should they do next?
• Loading — skeletons that keep the layout steady instead of a spinner that makes the page jump.
• Error — a clear message and a way to retry, not a blank panel.
• Success — the normal view, including how it looks with ten rows and with ten thousand.

Design tokens before pages

Next we pulled the visual language out of the file: colour roles (primary, surface, border, success, warning, danger), the type scale, spacing steps, corner radius, and shadows. These became Tailwind CSS tokens in the code, so a page never uses a raw colour value. When the client later asked for small brand adjustments, one change updated the whole product.

From the tokens we planned a small library of shared components — button, input, select, date picker, card, modal, badge, tabs, toggle, dropdown, and a data table — that every page would be built from.

Sharing the design with the client

Throughout the milestone the client reviewed the same design file we built from, so feedback was always about one source of truth. You can view the Flow LGX design file in Figma from the button on this page — it opens in view-only mode in a new tab.

What we shipped

• A screen inventory covering every frame, grouped by role
• Empty, loading, error and success states defined for each table and form
• Design tokens for colour, type, spacing and radius
• A list of shared components and the order to build them in

Lesson learned

Build the shared components first. A design file with forty screens is really a design file with a dozen components arranged forty ways.