Figma, Storybook, HTML, Sass, Typescript, React, Chromatic
As the Senior UI/UX Designer, I cataloged all repeating elements throughout Broadlume's products to start building out the company's first design system. As the key force behind the creation of the project, I knew the impact it would have on the efficiency and consistency of our product – from both a design and development standpoint. After creating the list of components and their details, I began creating them as reusable components in our team's Figma library to give our team the ability to create rapid prototypes for new projects in minutes. From there, I collaborated with a full-stack engineer to create the developer team's new best friend, Willow UI, a Storybook-based design system for all Broadlume products.
All designs were built in Figma and translated into stories for Storybook using Sass, React, TypeScript, and HTML. These are examples of components that were ultimately built out for the design system application. Additional images are provided here to show the attributing styles for certain components.
Figma Design System Components
Components with Styling Details
Willow-UI Design System in Storybook
Note: This project was in progress at the time and does not show the intended final result.