A Custom Website Designed in Figma and Developed with the WordPress Gutenberg Editor
Craft Web Studio is a conceptual web design agency website created to explore a modern Figma-to-Gutenberg workflow. The project was custom designed from scratch in Figma, including a component-based design system and responsive mobile layouts, before being developed with the native WordPress Gutenberg editor and the Twenty Twenty-Four theme. The goal was to create a clean, editorial-style user experience that demonstrates how premium WordPress websites can be built without relying on page builders or pre-made templates.
Project Overview
Craft Web Studio is a conceptual web design agency website created to explore a complete design-to-development workflow using modern WordPress tools. The project began as a fully custom design in Figma, where the visual identity, page layouts, component system and responsive mobile experience were carefully planned before any development work started.
The goal was to create a clean, minimal and highly structured digital experience that would feel modern, professional and scalable. Rather than relying on visual complexity, the design focuses on typography, spacing, hierarchy and subtle visual rhythm to guide users through the content. Every page was intentionally designed to support a clear user journey while maintaining a consistent visual language across the entire website.
Once the design phase was completed, the project was developed from scratch using the native WordPress Gutenberg editor and the Twenty Twenty-Four theme. By leveraging Full Site Editing, reusable block patterns and a component-driven approach, the website demonstrates how premium WordPress experiences can be built without the use of page builders, third-party templates or pre-built design systems.
The Challenge
The main challenge of this project was to create a premium, agency-level digital experience while relying entirely on native WordPress tools. Instead of using a page builder or a pre-designed template, the goal was to design and develop a fully custom website that would feel modern, scalable and visually refined using Gutenberg and Full Site Editing.
Another challenge was maintaining a minimal aesthetic without making the interface feel empty or repetitive. The design needed to balance generous whitespace, strong typography and subtle visual elements while still providing enough variation and hierarchy across multiple pages. Every layout decision had to contribute to both clarity and engagement.
From a development perspective, the project also served as an exploration of the Gutenberg ecosystem and its capabilities. The challenge was to translate a fully custom Figma design into a flexible WordPress implementation while preserving consistency, responsiveness and performance across the entire website.
The Solution
To address these challenges, I adopted a design-first workflow, starting with a complete custom interface in Figma before moving into development. A simple component system was created to establish consistency across pages, allowing layouts, typography and spacing patterns to remain cohesive throughout the entire website experience.
From a UX perspective, the solution focused on clarity and structure. Each page was designed with a specific purpose, using clear content hierarchy, generous whitespace and carefully balanced visual sections to guide users naturally through the experience. Rather than relying on complex interactions or visual effects, the design emphasizes readability, usability and trust.
The development phase was built entirely with WordPress Gutenberg and the Twenty Twenty-Four theme. By leveraging Full Site Editing, reusable block patterns and native WordPress functionality, the final website remained lightweight, scalable and easy to maintain while staying true to the original Figma design. This approach demonstrated how modern WordPress websites can be custom-built without depending on page builders or third-party templates.
Technical Details
Built with:
- Figma
- WordPress
- Gutenberg Editor
- Twenty Twenty-Four Theme
- Full Site Editing (FSE)
- Responsive Design
- Custom Block-Based Layout System
Key concepts:
- Custom UI Design
- Design-to-Development Workflow
- Component-Based Design System
- Editorial Layout Principles
- Responsive-First Design
- Content Hierarchy & Visual Rhythm
- Performance-Focused WordPress Development
Why I Built It
After many years of designing and developing WordPress websites using traditional page builders, I wanted to explore a more modern and native approach to WordPress development. Gutenberg has become an increasingly important part of the WordPress ecosystem, and I saw this project as an opportunity to understand its capabilities through a complete real-world workflow rather than isolated experiments or tutorials.
I intentionally chose to design the website from scratch in Figma and then build it with Gutenberg to experience the entire design-to-development process. This approach allowed me to explore how component-based thinking, responsive design systems and editorial layouts could be translated into a flexible block-based architecture.
Beyond learning a new tool, the project became an exercise in simplifying both design and development. The goal was to prove that a premium, professional WordPress experience can be achieved through thoughtful design decisions, strong content structure and native WordPress functionality without relying on complex page builders or pre-made templates.
Interface & Screens
Key Learnings
One of the most valuable takeaways from this project was gaining a deeper understanding of Gutenberg and Full Site Editing as a modern approach to WordPress development. Building a complete website from scratch demonstrated how native WordPress tools can be used to create flexible, scalable and professional experiences without relying on traditional page builders.
The project also reinforced the importance of establishing a clear design system before development begins. Creating the interface in Figma first helped streamline implementation, maintain consistency across pages and simplify design decisions throughout the development process. The component-based approach proved particularly valuable when translating layouts into reusable Gutenberg structures.
Finally, the project highlighted how effective minimal design relies on thoughtful decisions rather than visual complexity. Through typography, spacing, content hierarchy and careful layout planning, it was possible to create a polished user experience while keeping the interface lightweight, focused and easy to maintain. This mindset will continue to influence how I approach future WordPress and front-end projects.
Interested in
working together?
Let’s create something useful and meaningful.