B2B SaaS · Figma to Webflow
Lumofy AI
A Figma handoff turned into a multi-page product site
- Client
- Lumofy AI
- Sector
- B2B SaaS
- Built with
- Webflow, Figma to Webflow, Design systems
- Live site
- Since rebuilt elsewhere
About the project
Lumofy is a workforce performance platform, which means the site has a long story to tell before anyone gets to a pricing page: what the product does, who inside a company it is for, and what it connects to. The design arrived as a Figma file, and my job was to build it in Webflow without the usual erosion, where a handoff loses its spacing, its type scale and half its states somewhere between the artboard and the browser.
- Built from a Figma handoff, matched rather than approximated
- Multi-page product architecture, not a single scrolling page
- One set of components reused across the product pages
- Type scale and spacing carried across from the design file
- Built for a team that would keep adding pages after launch
What I actually did
- 01
Take the design file seriously
A handoff is a specification, not a mood board. Spacing, type scale and component states came across as they were drawn, because the version that quietly rounds every number is the version the designer has to review twice.
- 02
Build components, not pages
A product site grows. Sections were built once and reused across pages, so a change to a card is a change in one place and a new page is an assembly job rather than a new build.
- 03
Leave room for the story to get longer
Platforms add features and the site has to absorb them. The page structure assumes more sections are coming rather than treating the launch scope as the final shape.
More work
Let's talk
Send me a message on Upwork and tell me what you are working on. If you already have a site and it is not doing its job, that is the more interesting conversation.
New builds, redesigns, and taking over a site somebody else left half finished.