Article illustration 1

For JUCE developers wrestling with manual UI positioning and asset management, Bogren Digital's recently revealed pipeline offers a compelling blueprint. Born from frustrations with "magic numbers" and fragile z-ordering in complex audio plugins, their system replaces error-prone workflows with an automated approach that starts in Photoshop and ends with dynamically assembled interfaces.

The Transformation: From Manual Mayhem to Automated Precision

Previously, developers endured a tedious cycle: designers delivered flat image zips, engineers manually transcribed coordinates using JUCE_LIVE_CONSTANT for tweaks, and fragile toFront()/toBehind() calls managed layering. Resizing often introduced blurring due to suboptimal Lanczos filtering, while reference validation required painstaking SplitView comparisons.

Their new pipeline flips this model:

  1. Structured Photoshop Authoring: Designers build "Assembly PSDs" using strict layer hierarchy conventions (e.g., Root/Buttons/Button1/On, Root/Knobs/Knob1/001)
  2. Custom Photoshop Plugin: Exports images + generates XML layout metadata with positions, sizes, component types, and optional hitbox masks
  3. Runtime UI Loader: Parses XML to construct the interface dynamically using registered component factories
  4. Sorting Layers: Integer-based z-ordering (0=background, 100=content, 200=overlays) eliminates manual depth management

The Photoshop exporter plugin UI that kickstarts the automated pipeline

Engineering the Dynamic Loader

The XML metadata file serves as the pipeline's backbone, defining elements like:

<DIAL name="Gain Dial" x="1498" y="793" width="582" height="560" 
       numberOfFrames="127" fileNamePrefix="Gain_Dial_" 
       hitboxMask="Dial_Gain_HitboxMask.png"/>

At runtime, the UILoader system handles construction:

uiLoader->getComponentFactoryRegistry().registerFactory<DialFactory>("DIAL", "raster");
uiLoader->loadUI("metadata.xml");

Resizing becomes elegantly simple:

void resized() override {
  uiContainer.setBounds(getLocalBounds());
  uiLoader->applyLayout(); // Maintains aspect ratio + positions
}

Pixel-Perfect Refinements

Hitbox Masks

Visualization of Photoshop-defined hitbox masks enabling non-rectangular interactions

Designers can embed hitbox masks directly in PSDs. The loader detects these layers and enables precise collision testing:

bool hitTest(int x, int y) override {
  if (hitboxMask.isValid()) 
    return HitBoxMaskTester::hitTest(*this, x, y, hitboxMask);
  // Fallback to rectangular bounds
}

Multi-Format Support

The factory pattern cleanly handles diverse asset types:

registerFactory<ImageComponentFactory>("IMAGE", "raster");
registerFactory<SVGImageComponentFactory>("IMAGE", "vector");

Figma Integration via LLMs

LLM-generated UI layout definitions bridge Figma/JUCE workflows

For non-skeuomorphic elements, they leverage Figma's MCP server with LLM agents to generate compatible XML—demonstrating the pipeline's extensibility beyond Photoshop.

Beyond Pixel Perfection

By decoupling design assets from code, Bogren achieved several critical wins:
- Eliminated layout drift: The PSD is the single source of truth
- Accelerated iteration: Design changes propagate without developer coordination
- Enhanced collaboration: Designers work in familiar tools with enforced conventions
- Reduced bugs: No more magic numbers or z-order spaghetti

The released JUCE modules encapsulating this pipeline represent more than technical utility—they exemplify how thoughtful tooling can transform collaboration between design and engineering teams. As audio plugins grow increasingly visual, such pipelines shift focus from wrestling with implementation details to crafting superior user experiences.

Source: Reflections on Building a Pixel-Perfect UI Pipeline in JUCE Applications - Part 1 by Bence Kovács