BigDesign: Build Native-looking UIs with the BigCommerce Design System
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:
yarn create react-app my-appThis 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:
cd my-appAnd start the app:
yarn startThe 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:
yarn add @bigcommerce/big-design @bigcommerce/big-design-icons styled-componentsCreate 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:
import React from ‘react’;
import { GlobalStyles, H1, Box } from ‘@bigcommerce/big-design’;function App() {
return (
<div>
<GlobalStyles />
<Box backgroundColor=”secondary20" padding=”xxLarge”> <H1>Payment Methods</H1>
</Box>
</div>
);
}export default App;
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:
import React from ‘react’;
import { Tabs } from ‘@bigcommerce/big-design’;function PaymentTabs() {
return(
<Tabs activeTab=”checkout_payment_settings”>
<Tabs.Tab id=”checkout_payment_settings”>Checkout Payment Settings</Tabs.Tab>
<Tabs.Tab id=”bank_deposit”>Bank Deposit Settings</Tabs.Tab>
<Tabs.Tab id=”braintree”>Braintree Settings</Tabs.Tab>
</Tabs>
);
}export default PaymentTabs;
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.
import React from ‘react’;
import { H4, Link, Flex } from ‘@bigcommerce/big-design’;
import { ArrowDropDownIcon } from ‘@bigcommerce/big-design-icons’;function PaymentPanel(props) {
return(
<Flex backgroundColor=”white” padding=”xxLarge” border=”box” alignContent=”center” marginTop=”xxLarge” marginBottom=”xxLarge” elevation=”raised”>
<Flex.Item alignSelf=”baseline” flexBasis=”auto” flexGrow={0} flexOrder={0} flexShrink={1}>
<H4 margin=”none”>{props.name}</H4>
</Flex.Item> <Flex.Item alignSelf=”baseline” flexBasis=”auto” flexGrow={1} flexOrder={0} flexShrink={1} marginHorizontal=”xxLarge”>
<Link>{props.linkVisible}</Link>
</Flex.Item> <Flex.Item alignSelf=”baseline”>
<ArrowDropDownIcon />
</Flex.Item>
</Flex>
);
}export default PaymentPanel;
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 React from ‘react’;
import { Checkbox, Small, Box} from ‘@bigcommerce/big-design’;function TestCards() {
return (
<Box>
<Checkbox label=”Enable test credit card payments” checked />
<Small marginTop=”xxLarge”>To process test orders, use card number 4111 1111 1111 1111 and enter any values for name and expiration date</Small>
</Box>
);
}export default TestCards;
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:
import React from ‘react’;
import { GlobalStyles, H1, Box } from ‘@bigcommerce/big-design’;
import PaymentTabs from ‘./components/PaymentTab’;
import PaymentPanel from ‘./components/PaymentPanel’;
import TestCards from ‘./components/TestCards’;function App() {
return (
<div>
<GlobalStyles /> <Box backgroundColor=”secondary20" padding=”xxLarge”>
<H1>Payment Methods</H1> <PaymentTabs /> <PaymentPanel name=”Offline Payment Methods” linkVisible=”1 visible on storefront”/>
<PaymentPanel name=”Online Payment Methods” linkVisible=”1 visible on storefront”/>
<PaymentPanel name=”Digital Wallets” /> <TestCards />
</Box>
</div>
);
}export default App;
In just a few minutes, we’ve created a page that’s a close approximation to the original Payment Methods page:
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!
