BigDesign: Build Native-looking UIs with the BigCommerce Design System

Ashley McKemie
Aug 15, 2019 · 7 min read

We are excited to announce that BigDesign is now available in open beta. BigDesign is the design system used by BigCommerce UX designers and engineers to create the look and feel of the BigCommerce control panel. Now, external developers can use this collection of React components and style guidelines to quickly build apps that blend seamlessly within BigCommerce.

BigDesign offers a number of benefits for developers who choose to bring it into their app. BigDesign allows you to move quickly, selecting from a collection of pre-built components that provide the building blocks of your UI. For teams that don’t include a dedicated designer, you can focus on development, knowing that your UI components will come together to create a professional, great looking user experience. And for developers building apps that are embedded within the BigCommerce control panel, matching the BigCommerce UI puts users in familiar territory when using a new app. Merchants are able to onboard more quickly when an app presents a UX they are already accustomed to.

At BigCommerce, we’ve been using BigDesign internally for 6 months, and it’s enabled our UX and engineering teams to standardize workflows and accelerate product cycles. Our designers have delivered wireframes in an hour, where it would have taken days, and our developers have built UI experiences within hours to days, where it would have taken weeks or longer, both for new applications and within legacy ones. We’re excited to extend this toolset to the BigCommerce partner community as an open source project.

Design Systems at BigCommerce

Over the years, design systems at BigCommerce have evolved through several iterations, as teams across our engineering organization have kept pace with a changing frontend landscape and product requirements. Throughout those iterations, design systems have freed up team members to focus on solving problems instead of making the same design choices over and over again. Design systems also ensure that the control panel has a unified look and feel across areas that are owned by different BigCommerce engineering teams around the globe.

BigDesign represents our latest vantage point on design systems, and it has one key difference from previous incarnations. Where design systems of the past were designed entirely for internal use, from the beginning, BigDesign was intended for both an internal and an external user base. The goal is to make the same UI patterns and components used by the BigCommerce team available to the wider developer community to integrate into third-party apps.

What is BigDesign?

BigDesign is a collection of reusable React components, design guidelines, and UI patterns that can be used to build interfaces matching the BigCommerce control panel. It is available as an npm package, which can be installed as a dependency in third-party apps, and as an open source repository on GitHub. BigDesign includes all of the essential elements you need to construct a UI: buttons, forms, headings, and more.

BigDesign was inspired by the principles of Atomic Design, a methodology created by Brad Frost. Atomic Design isolates individual design elements into their smallest and most abstract parts — a color palette or an HTML tag — and combines them up the food chain into more complex and concrete interfaces. Elements at the atomic level are simple and single purpose, while at the top of the hierarchy, pages represent the interconnected whole.

To help developers get started, we’ve provided several additional supporting resources. The BigDesign Playground is an interactive environment for testing and documenting UI component libraries built on Next.js. It allows you to observe how components are rendered alongside their source code in a browser-based sandbox. You can select from a menu of all available components to see how they’re constructed, their usage, and how they look on the front end. Visit the BigDesign Playground at https://developer.bigcommerce.com/big-design/.

We’ve also launched a companion website, https://design.bigcommerce.com, which houses our Design team’s style guidelines. Design.bigcommerce.com provides the context of why and how we construct design systems at BigCommerce — the guiding philosophy behind product design at BigCommerce. It also provides in-depth guidelines for how and when to use specific components, in addition to detailed anatomy and specs.

Demo

Next, let’s walk through the process of using BigDesign to build a replica of the BigCommerce Payment Methods page to illustrate just how quickly you can construct functional and attractive UIs. We’ll use Create React App to bootstrap our application, install BigDesign as a dependency, and re-create the BigCommerce Payment Methods page in just a few minutes.

Here’s the original Payment Methods page, from the BigCommerce control panel:

Create React App

Create React App is a tool you can use to quickly scaffold a React application, without configuring any dependencies. We’ll use Create React App in this demo to provide a starting point for our development.

**Don’t worry, the link to the repo with all the code is at the end.

To begin, create a new project folder and run the following command:

This command will create a new directory called my-app containing the file structure and dependencies for the React app.

Navigate into the my-app directory:

And start the app:

The app will be running at http://localhost:3000, and you should see the default “Welcome to React” screen in your browser. As you make changes, the app will hot reload in the background to allow you to preview your work.

Install BigDesign

From your my-app directory, install the big-design and styled component packages:

Create the App.js component

Locate the App.js file in your React app’s src folder and remove the default content. Paste in the following:

At the top of the file, we’re importing React, as well as our first three components from BigDesign: GlobalStyles, an H1 tag, and Box. The GlobalStyles component is responsible for setting global styles, like the base font family. We only need to import GlobalStyles once, in our root component, for the rest of the app to inherit the styling.

On the Box component, we’re specifying a couple of styling properties to add some padding and a light gray background color. To keep styles consistent with the BigCommerce UI, we’ve predefined these properties within BigDesign. The props each component accepts are listed in the documentation, as well as the values for predefined styles like color, typography, and spacing.

Create subcomponents

In your React app’s src directory, create a new folder, called components, containing three new files: PaymentTab.js, PaymentPanel.js, and TestCards.js.

PaymentTab.js

This component will create the tabs that appear under the main header. For demonstration purposes, we’ll hard code the values for the tab text instead of pulling them dynamically:

PaymentPanel.js

Next, we’ll create the component for the sectioned payment method lists that appear under the tabs. We’re using the Flex component, which allows us to easily make the panel center-aligned and responsive. The grow parameter on the Flex.Item causes that element to take up all available space, ensuring the DropdownIcon is pushed uniformly to the end of the panel.

TestCards.js

The TestCards component creates the checkbox at the bottom of the page that enables or disables the Test Payment Gateway. Here, we’re using the Form component with a Checkbox and setting the default state to ‘checked’.

Import subcomponents

Open App.js and import the subcomponents at the top of the file. Within the Box tags, reference the new elements as seen below:

In just a few minutes, we’ve created a page that’s a close approximation to the original Payment Methods page:

Source code repo here.

Conclusion

BigDesign allows the BigCommerce engineering and UX teams to rapidly develop new front end features and create a cohesive experience across the control panel. And now we’re excited to be able to offer the same utility to our developer ecosystem.

No signup is needed to join the beta. To get started, visit our documentation and GitHub repo to get oriented. Then, you can install BigDesign and start building!

During the beta period, we’ve created a dedicated group in the BigCommerce community to answer your questions and collect your feedback. Let us know how you’re using BigDesign and how we can improve it. We’ve started with a core set of foundational components, but we’ll be looking to the community to help us decide which components we should build out next. We need you to make BigDesign a success!

BigCommerce Developer Blog

News, tips, and stories for developing on BigCommerce

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store