Design Systems & Prototyping

Exploring the space between Figma, development and implementation

Focus

  • Design systems
  • Figma workflows
  • Prototyping
  • React
  • WordPress block themes
  • Accessibility
  • AI-assisted design processes
An interactive pricing prototype used to test and refine a complex quotation journey.
A browser-based tool for defining typography, spacing and design tokens, then exporting them to WordPress, CSS and Figma.

Alongside client work, I actively explore how design systems, prototyping and emerging tools can improve the relationship between design and implementation.

Recent projects include a React-based typography and design-system tool that generates WordPress theme.json configuration, CSS and Figma tokens from a single source of truth.

More recently I’ve been incorporating AI-assisted workflows into this process, using them to accelerate exploration and communication while keeping design decisions grounded in user needs and technical constraints.

Coordinate-Based Website Navigation – Each page forms part of a larger visual landscape, allowing users to navigate through neighbouring content rather than following a linear sequence.

I’ve also developed a series of interactive prototypes exploring search interfaces, quotation tools and alternative navigation patterns. These prototypes help communicate ideas, test assumptions and reduce ambiguity before development begins.

For me, the value of AI is not replacing designers. It’s reducing friction in the design process and allowing more time to focus on solving the right problems.

Navigation is driven by spatial relationships, creating a continuous browsing experience that mirrors movement through a physical collection.