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.

Sample Project

A sample project generated from the AEM Archetype with Storybook enabled.

GitHub

AEM Archetype w/Storybook

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

GitHub

ACME Tool

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

GitHub

AEM Storybook Sample Content

A sample AEM content package that organizes AEM Core Components into simple digestible pages.

Download

Core Component Stories for Storybook

A downloadable storybook project containing the AEM core components stories.

Download

Workflow Guide

Review the deck containing the process overview with the corresponding workflow diagrams.

View guide