Figma to Etch Conversion for Accelerate Nutrition
Highlights: Figma to Etch conversion, WordPress development, CPT setup, Meta Box field integration, WP All Import content migration, service page development, related blog logic, WS Forms fixes.
Project Brief
Accelerate Nutrition is a Melbourne-based dietetics practice helping NDIS participants, private clients, older adults, athletes, and people managing health conditions get practical nutrition support.
The client already had the design ready in Figma. They also had existing custom post types, custom fields, imported content, and service data inside WordPress. Our job was to turn the Figma design into a working Etch website without breaking the structure behind it.
The build included Home, About, Our Team, Blog, Contact, Services, and Booking pages. Our goal was clear: make the website look polished on the front end and keep it easy to manage in the backend.
Challenges
- Service pages had to follow the existing CPT setup and custom field structure.
- The client provided service data in Excel, which had to be imported properly into WordPress.
- Each service page needed to show only the blog posts related to that specific service.
- Existing WS Forms had issues that needed to be fixed before handover.
- The website needed clean structure and accessibility care, not just visual accuracy.
Solution
We converted the Figma design into a complete WordPress website using Etch.
- The service data was first imported from Excel using WP All Import. We mapped that data into Meta Box fields, then connected it inside Etch so the service pages could display the right content without manual page-by-page editing.
- We also built the main pages, connected the service structure, fixed the WS Forms setup, and used custom code where Etch needed extra support.
- For the related blog section, we used relationship fields. If a blog post was connected to a specific service, it appeared on that service page. This made each service page more useful for visitors and easier for the client to grow with future content.
Results
Accelerate Nutrition received a complete Etch website built from the approved Figma design.
- The website kept the client’s existing WordPress structure intact, including CPTs, service content, Meta Box fields, and imported data.
- Service pages became easier to manage and more useful, with related blog posts showing in the right places.
- Booking pages, contact forms, and core website pages were delivered in a clean working setup.
- The build was completed in 2 weeks with accessibility and backend usability kept in mind from the start.
