Case 01 · Studio
Frame & Form
An editorial studio portfolio built faithful to its Figma file at desktop, tablet and mobile, plus the motion the file didn’t show: a hero intro, scroll reveals and image hover.
Figma Community
“Modern Brand Design Studio”, CC BY 4.0
Build · motion
My role
3 breakpoints
Desktop, tablet and mobile, as drawn
Client-First
Classes the client’s team can edit
Starting point
What the file included.
A finished studio design with desktop, tablet and mobile frames, its type, palette, copy and imagery, a link hover and an open and closed mobile menu. Everything stood still: no motion.
Desktop, tablet and mobile
Type scale and colours
Copy, imagery and menu states
Hero intro
Scroll reveals
Image hover
What I added
Beyond the file.
Everything the Figma didn’t specify, designed in the same style and approved before building.
Hero intro
The first screen eases in once on page load, so the studio’s statement lands before anything else moves.
Scroll reveals
Each of the six projects, the stats and the footer wordmark reveal as they enter the screen.
Image hover
Project images zoom slightly on hover and settle back on leave, so the work grid answers the cursor.
Under the hood
Built to be edited.
Structured so the agency’s team, or the next developer, can change it without breaking anything.
3
Breakpoints matched to the file
10
Native Webflow interactions, no custom scripts
100
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 Brand Design Studio” (Figma Community), CC BY 4.0. Webflow build by Rafael Dranoff.
Next build
Aetherfield →
Seven-page SaaS site with two CMS collections and motion on every page.
Send your
Figma file.
Fixed quote within 48 hours, Monday to Friday. Async by default — happy to jump on a call if you prefer.