Composite for Designers: Photoshop Layer Comps to iOS Prototype

Composite was an iOS app that connected directly to Photoshop and turned layer comps into tappable prototypes on your iPhone or iPad. Organize your mockups into screens using Photoshop layer comps, name layers with hotspot targets, and Composite generated an interactive prototype. The appeal was staying in Photoshop without exporting images or managing prototyping software.

Key Specs

How Designers Use Composite

For Client Presentations on Real Devices

Design multiple screens in Photoshop, each as a layer comp. Open Composite on your iPhone, connect to Photoshop over Wi-Fi, and tap through the prototype. Hand the phone to the client so they experience the flow in context. More convincing than desktop clickthroughs.

For User Testing Without Coding

Add hotspot annotations to layer names in Photoshop (e.g., rename a button layer to “Login Button > Home Screen”). Composite reads these names and creates tap zones automatically. Test navigation flows with real users before developers write any code.

For Iterating on Interaction Design

Since Composite synced live with Photoshop, designers could adjust screen layouts during a meeting and see changes on the device within seconds. Move a button, update the layer comp, tap refresh in Composite. No export-import-link cycle.

Composite vs. Modern Alternatives

Choose Figma if: You want the modern standard with prototyping, design, and collaboration in one browser-based tool.

Choose Adobe XD if: You’re committed to Adobe Creative Cloud and want tight Photoshop integration with better prototyping than Composite offered.

Choose ProtoPie if: You need advanced interactions (sensors, conditional logic, native components) for high-fidelity mobile prototypes.

Getting Started with Composite

These instructions are historical since Composite is discontinued:

Step 1: Organize Photoshop file into layer comps

Create a layer comp for each screen in your app. Go to Window > Layer Comps in Photoshop. Each comp represents a different state or screen. Turn layer visibility on/off to show different screens, then save each as a comp.

Step 2: Name layers with hotspot targets

Select a tappable element (button, card, link). Rename the layer to include a target like “Button Name > Target Screen Name”. Composite parsed these names to create tap zones. The layer’s position became the hotspot area.

Step 3: Connect Composite to Photoshop

Open Composite on your iOS device. Make sure your device and computer are on the same Wi-Fi network. Composite auto-detected Photoshop files. Select your file, choose the starting screen, and tap to navigate. Edit in Photoshop and refresh in Composite to see updates.

Composite in Your Design Workflow

Composite fit into Photoshop-centric workflows before Sketch and Figma existed.

• Before Composite: Design all screens in Photoshop with layer comps
• During design: Composite for testing flows on real devices
• After Composite: Iterate in Photoshop based on feedback, re-test

Common tool pairings (historical):

• Composite + Photoshop CS6+ as the only required combination
• Composite + InVision for web-based client presentations (InVision for web, Composite for in-person)
• Composite + Skala Preview for static design review (Composite for interactions, Skala for pixel-perfect previews)

Common Problems (and How to Fix Them)

“Composite won’t connect to Photoshop”

Check that both devices are on the same Wi-Fi network (not guest networks, which isolate devices). Disable firewall temporarily to test. Make sure you’re running Photoshop CS6 or later. Composite required Bonjour on Windows (included with iTunes or QuickTime).

“Hotspots aren’t working”

Verify layer naming format. Composite required exact syntax: “Layer Name > Target Comp Name”. Spaces around the > mattered. If a hotspot didn’t appear, the layer name likely had typos or didn’t match an existing layer comp name.

“Preview is blurry on Retina devices”

Composite sent lossless images, but Photoshop document resolution affected clarity. For Retina devices, design at 2x resolution (640x1136 for iPhone 5, 750x1334 for iPhone 6). Non-Retina Photoshop files looked blurry on Retina displays.

“Can’t switch between landscape and portrait”

Composite supported orientation changes, but you needed separate layer comps for each orientation. Create “Home Portrait” and “Home Landscape” comps. The app didn’t auto-rotate a single comp.

“Where can I get Composite now?”

You can’t. The app was removed from the App Store and the developer is gone. For similar workflows today, use Figma Mirror (Figma designs on iOS), Adobe XD preview (XD designs on mobile), or ProtoPie (advanced prototyping with device sensors).