Design Systems
Rebuilding the BigCommerce Design System: BigDesign
Design Systems, Product Design Strategy
Project Brief
What is BigDesign?
BigDesign is BigCommerce’s design system consumed by internal and external designers and developers. BigDesign consists of a Figma library, React components and a UX writing assistant that enables third-party designers and developers to build custom integrations and apps, extending the core functionality of the BigCommerce platform.
The Project: Rebuilding BigDesign
The rebuilding of BigDesign was a Figma-focused project to create absolute consistency between the react components and those in the Figma Library. Throughout the process, we also aimed to update the design system to use new Figma updates like variables (color and spacing) and new component properties (preferred values, text layers etc.)
The process
Methodology
5 Product designers
4 months
33 components
Our team of five prioritized:
Rebuilding existing components to match as closely as we could to the components in code
Rebuilding components to make use of variables, text layers, and other Figma updates to streamline designing
Design Library file format for easy consumption by internal and external teams.
Adequate documentation and introduction to the design system and how to use the file
Design System Structure
In the BigDesign language, elements are organized into a hierarchy, contributing to a global structure that supports brands worldwide in delivering shopping experiences. This ecosystem is built on patterns, incorporating specific layouts and components to shape every feature.
Pattern Library
Our Figma Pattern Library helps frame the context for our components. These patterns address the most common use cases encountered during feature development, offering detailed guidance and ready-made layouts to optimize the Figma design workflow.
One example of a common use case is our “Page Structure” layout, pulled from our BigDesign Pattern Library
The Components
We used a normal file structure to layout components in the file: one per page with a consistent frame design across all components. Some examples of components are below
Future Improvements
The design system is still a work in progress and we have more work to do in unifying the entire system as a whole. Planned improvements:
Unified BigDesign Site
Right now, our BigDesign Guidelines for developers sit outside the Developer Center. The plan is to unify the entire design system under one domain which acts as a “child” of the Developer Center.
Quality Guidelines
The new introduction in Figma is, predictably, geared towards designers. We want to have a dedicated overview of all the resources our design system has to offer which will live in the unified site.
Dedicated Design Systems Designer
Overhauling our design system while working on domain team needs was a lot of work. From here, we want to have a dedicated design systems designer to maintain and grow BigDesign.