Bplans Design System

 
1.png
 

General Organization

For organizational reasons, the design system is made of 2 libraries in Figma. I decided to do it this way as a best practice for our organization. We also have a software product with it’s own marketing site so it made sense to have a library for high-level brand assets that are shared, along with a separate design system library specific to the website or app. Following this convention for Bplans made things more consistent.

 
 
2.png
 

Art Assets

This first of the 2 libraries is a traditional brand style guide that’s expanded to include some global components and styles. Color styles, the logo, and vector illustrations live at this level, while specific web UI components live in a second design system doc. This library is basic right now but has a lot of room to grow in complexity as we expand. This is really the foundation of a full content system, or DAM.

 
 
3.png
 

Atomic Principles

For the design system file itself, I have a page for component files and a page for documentation. Structurally, I followed the atomic design principles to organize both of these. On the dev side we used Pattern Lab to build this out and mirror that structure.

 
 
4a.png
4b.png
 

Components and Variants

For the components themselves, I try to use Figma's variant feature as much as possible. It’s definitely extra work to build out so many variations, particularly the forms example, but it makes building out pages with these components so much easier. I also try to make my components as dynamic and responsive as possible. Replacing text or having a component span different column widths works really well. I enjoy Figma's auto-layout feature a great deal.

 
 
5.png
 

Grid Structure

I prefer to build everything on a grid, in this case 8px. Keeping as many measurements as possible a multiple of 8 simplifies and standardizes the design decisions and makes for a more holistic system. We use the Bootstrap framework, so the vertical spacing fills those columns, and I have 8px horizontal rows.

 
 
6.png
 

Responsive Scaling

For smaller screens, it's often necessary to scale down UI elements. This can be a pain to keep track of at the component-by-component level, so I instead proposed a different scheme. We built all the components using rem values, the default being 1rem = 16px (which worked great for my 8px grid). We kept this value for the largest breakpoint, but for smaller ones, we simply set the rem value to 14px. This happens at the page level so we can scale all of our UI elements by 7/8ths with only 1 line of code, making it really consistent and easily adjustable in the future.

 
 
7a.png
7b.png
 

Documentation

I’m a big proponent of documentation. Every component has a full redline section with measurements, descriptions of functionality, insight into the design process, and more. I want it to be as easy as possible for a developer or another designer to come along and make sense of this system.