Case 02 · SaaS
Aetherfield
A 7-page SaaS site built faithful to its Figma file, plus the parts the file didn’t cover: two CMS collections, motion on every page and a structure the client’s team can edit.
Figma Community
“Modern, Clean SaaS Company”, CC BY 4.0
Build · CMS · motion
My role
7 pages
Including 2 CMS templates
Client-First
Classes the client’s team can edit
Starting point
What the file included.
A finished SaaS design across seven pages, with its type scale, palette, copy and photography. Static frames only: no CMS, no hover states, no motion.
✓All seven pages
✓Type scale and colours
✓Copy and photography
+CMS collections
+Hover and focus states
+Motion
What I added
Beyond the file.
Everything the Figma didn’t specify, designed in the same style and approved before building.
CMS collections
Journal articles and Jobs, so the client publishes posts and openings without a developer.
Motion
Dashboard bars animating in on load, scroll reveals site-wide, hover and focus states.
Handover structure
Client-First classes, variables as primitives and semantic aliases, a hidden style guide.
Under the hood
Built to be edited.
Structured so the agency’s team, or the next developer, can change it without breaking anything.
7
Pages, including 2 CMS templates
2
CMS collections: Journal and Jobs
96
Accessibility (Lighthouse)
100
SEO and best practices (Lighthouse)
In motion
See it move.
Recorded on the live site, top to bottom, on desktop and on a phone.
Credits
Design and content from “Modern, Clean SaaS Company” by Figma (Figma Community), CC BY 4.0. Webflow build by Rafael Dranoff.
Next build
Frame & Form →
Editorial studio portfolio, matched at desktop, tablet and mobile.
Send your
Figma file.
Fixed quote within 48 hours, Monday to Friday. Async by default — happy to jump on a call if you prefer.