Design-to-code delivery
Figma-to-WordPress build
A high-fidelity marketing website translated from Figma into an editable native WordPress block theme, including motion, carousels, accordions and responsive art direction.
- Context
- Healthcare services business
- Date / status
- Client work
- Work
- Design-to-code delivery
The problem
The Figma design used layered artwork, condensed display type and tightly controlled responsive compositions. The result still had to remain editable in Gutenberg and behave well across an unusually broad range of screens.
Scope and architecture
My responsibilities
- Figma analysis and design-system translation
- Custom Gutenberg block-theme development
- Motion and interactive behavior
- Automated responsive visual QA
System
- Native WordPress block theme and template parts
- Server-rendered and escaped custom section blocks
- theme.json tokens plus shared editor/frontend CSS
- Playwright section captures and overflow checks
Key decisions
- 01
Keep the design editable without flattening it.
Each visual section is a real Gutenberg block with editor controls and previews. The homepage template renders ordinary post content rather than hardcoding the final composition.
- 02
Treat mobile as a composition, not a scale factor.
Desktop, tablet and portrait layouts use their own geometry and readable type floors while sharing the same content and design tokens.
- 03
Make visual QA repeatable.
Automated captures compare individual sections at reference artboards and real device profiles, with explicit checks for page width and horizontal overflow.
What I built
I built a native WordPress block theme with editable section blocks, template parts, theme.json tokens and shared frontend/editor styling. The interactive layer covers scroll motion, a carousel and accessible accordions, including a reduced-motion fallback. A Playwright audit captured every section across desktop, mobile, phones, tablets, folds and small-screen devices while checking overflow and reference dimensions.
- WordPress
- PHP
- Gutenberg
- Figma
- Playwright
Result
An exact, editor-friendly build without a page builder or custom-fields dependency
- Every homepage section remains editable as a Gutenberg block
- No page builder or custom-fields plugin required
- Automated visual and overflow coverage across more than 30 device profiles
Contact
Have a project in mind?
Tell me what you’re building, where it stands and what you need help with. LinkedIn is the best place to reach me for now.
Start a conversation