FOAF Foundation
Figma-to-production website build for a decentralized community trade platform.
The Project
FOAF Foundation needed a public-facing website before launch: something that introduced the platform, communicated what it actually does, and established a visual identity. We designed the full Figma spec — visual identity, layout, typography, all page states — then built it as a production Next.js site.
What Was Built
A fast, responsive Next.js website built to match the Figma design exactly. That sounds straightforward, but fidelity at this level means caring about spacing, type rendering, responsive behaviour at every breakpoint, and interaction states that weren't all explicitly drawn in the file.
- Component-based architecture built directly from the Figma design system
- Fully responsive across mobile, tablet, and desktop
- Performance-optimised: static generation, image handling, and minimal JS footprint
- Production deployment with custom domain
What This Shows
Design-to-code fidelity is harder than it looks. A lot of handoffs lose something between the Figma file and the browser — spacing drifts, type weights shift, animations get dropped. This project is a clean example of what happens when the designer and developer are working together rather than passing files over a wall.