Skip to main content
Launch a Reusable Component Library on Storybook
  • #Development
  • #Design
  • #Github
  • #DesignSystem
  • #Figma

Summary​


Project Beagle: Hacking A Design System Component Library

Join this squad to build the Equity UI component library. Developers joining this project will learn to deploy components on Storybook and a sneak peak of the DS process. By the end of the project, a set of 5 components will be built under the WeSparkle Brand Theme.

Level of Difficulty: Intermediate
Role: Designer, React Developer, Developer


A beagle


Project Name Trivia​

This feature is named after the Beagle.

Beagle, a small hound dog breed popular as both a pet and a hunter. It looks like a small foxhound and has large brown eyes, hanging ears, and a short coat, usually a combination of black, tan, and white. The Beagle is a solidly built dog, heavy for its height. It generally excels as a rabbit hunter and is typically an alert, affectionate dog.


Work Plan Overview​​

Deliverable​​

Create a demo Component Library that is deployed on Storybook for WeSparkle. MVP build requires an estimated number 5 components, where a developer owns one component from build, test, document and publish.

Current State​​

There's initial work on a Figma document that stores a collection of design data with global colors and typography that will serve as the stylesheet of the components. In the DS world, this is called a “foundations document”. This document should be finalized in Figma exported as json code and published on a Design Token repo.

Team Goal​​

Expand frontend development and design skills by learning the Design System process


Proposal​​

The brand we are using for this round is WeSparkle, a startup geared towards women entrepreneurs.

Ultimately, our call to action is to build a WeSparkle Theme and share this to future clients needing to build a simple component library.

The deliverable is a working Storybook that can be used for future Design System projects.

Constraints​​

1) Pre-work is needed for design to export the design tokens for color and type styles. Estimated ~1 month time is needed for pre-work.

2) Provide swimlanes for the limited amount of time for component health. What is the actual time that it takes to ensure that the build is stable?

Audience​

  • React and Frontend Developers - with interest in frontend development and have React.JS knowledge
  • UI Designers - with visual design skills, knows how to use Figma and flex their UI skills