Design Systems that Scale

A workflow for Adobe XD, Storybook, and Adobe Experience Manager.

Designers to work directly within Adobe XD

Defining a development flow that allows for fluid collaboration between design teams and development teams is vital for a successful Adobe Experience Manager (AEM) project. This is a fundamental challenge that is inherent to all CMS applications.

Adobe XD with Core Components

Web developers to work side by side the designs and code within Storybook

In order to avoid the duplication of efforts when passing designs to web developers, and then web developers to engineers, a foundation of two-way communication must be set.

Storybook with Core Components

AEM components exactly as designers intended

Hoodoo has developed a set of tools to enable AEM to work seamlessly with Storybook. Hoodoo has been working with members of the AEM community to define a design and development flow using Adobe XD and Storybook for quick web development, and to establish a design system that is built directly from AEM core components.

ACME Tool pulling from AEM

Use the AEM Rockstar tools yourself

Some resources to help you get started.

AEM Archetype w/Storybook

An Archetype that includes the ability to include the frontend module with Storybook enabled and the ACME Tool installed.



A CLI tool that extracts Storybook stories from an AEM instance with a representation of your AEM components.


Workflow Guide

Review the presentation deck from the AEM Rockstar session containing the process overview with the corresponding workflow diagrams.

View guide