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

Ashley McKemie
Aug 15, 2019 · 7 min read
Image for post
Image for post

Design Systems at BigCommerce

What is BigDesign?

Demo

Image for post
Image for post

Create React App

yarn create react-app my-app
cd my-app
yarn start

Install BigDesign

yarn add @bigcommerce/big-design @bigcommerce/big-design-icons styled-components

Create the App.js component

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;

Create subcomponents

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;
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;
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

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;
Image for post
Image for post

Conclusion

BigCommerce Developer Blog

News, tips, and stories for developing on BigCommerce

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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