Design System

Fake it while making it! Built a system for an exsiting product.

role
UX Designer
team
Developers
period
Mar.2021 - current
image of the design system

BACKGROUD

Codegiant is a web-based application designed for software development team, with Issue tracking, hosted Git repositories, continuous integration and documentation all in one single platform.

It has became a huge and complex software in the past year, with all the inconsistent components and design, we decided to build a design system for Codegiant to solve the problem.


WORKFLOW
  1. Bootstrap library : the product was built on bootstrap in the first place, so I digged deep in the components library and learn the structure of the bootstrap Scss.

  2. Break down components : using the Atomic Design Methodology, also did some research on the Component Driven User Interfaces in order to make a component list.

  3. Fake it while making it : referenced multiple design systems including Pajamas, Atlasssian, Carbon, Wix etc. and rebuilt the components library using Figma.

  4. Test and Document in Figma : went through all the components to test them out and made the documentation for both designers and developers.

  5. Storybook : last but not lease, we used Storybook to build, document, and testing UIs.

DESIGN DETAILS

The Fundation of the component library includs : Color, Typography, Grid system, Spacing, Shadow, Icon used

image of the color

Color

image of the font and icons

Typography and Icons

image of the buttons and navs

Button and Nav

image of the rows and heads

Row and Head


MORE

I only memtioned a few components in the library, click here to view the library in Figma.