Overview
Happy is a wellness brand that needed more than a standard Figma-to-Webflow conversion. Their design spec called for a bilingual site — published in both English and German — with a custom language switcher that didn't rely on third-party translation plugins or integrations. On top of that, the Figma file included both light and dark mode variations, and both had to be built faithfully in production.
They came to Figmafy with a tight deadline and a technically specific brief. Four days later, the site was live.
The challenge
Most agencies treat bilingual builds as a CMS localization problem — they reach for a plugin, accept its limitations, and call it done. Happy's brief ruled that out from the start:
- The language switcher had to be custom-built — no third-party integrations, no plugin dependencies that could break on a Webflow update
- The site needed to serve content in both German and English with a smooth, native switching experience
- The Figma design included light and dark mode variations that had to be implemented correctly, not approximated
- Everything — revisions included — had to be live within four business days
A custom language switcher in Webflow requires careful architecture: separate content structures for each language, clean toggle logic, and persistent state so users don't lose their selection on navigation. Getting it right the first time was essential given the timeline.
Our solution
We treated the bilingual requirement as a structural decision to make before touching the canvas, not an afterthought to patch in at the end.
- Day 1 — Architecture & content structure. We mapped out the content architecture for both languages — defining how English and German versions of each section would be stored and toggled — and planned the custom switcher logic before any build work started.
- Days 2–3 — Build, language switcher & modes. We built the full site by hand in Webflow, implementing the custom German/English switcher without any third-party tools. We built both the light and dark mode variations from the Figma spec and wired the mode toggle to work independently of the language selection.
- Day 4 — Revisions, QA & handover. We worked through client revisions, ran cross-browser and cross-device QA on both language versions in both modes, and handed over the completed site.
Technologies used
- Webflow — hand-built, no export plugins
- Custom language switcher — built natively without third-party translation integrations
- Webflow Interactions — used for mode and language toggle transitions
- Light & dark mode — both variations designed to spec and fully implemented
- Figma — original design source for both language and mode variations
Results
The full build — including the custom language switcher, both light and dark modes, and a round of client revisions — was completed and live in 4 business days. Happy received a bilingual Webflow site their team can manage, with a switching experience that feels native because it was built natively.
"Figmafy feels like an extension of our own team. Reliable, responsive, and always delivering code that just works." — Mitchell, Product Manager, Happy
The site gives Happy a professional, conversion-ready presence across two languages without any dependency on third-party translation tooling that could break or add ongoing cost.
See how we approach builds like this on our Figma to Webflow service page, or get a free quote for your next project.
