Skip to content

Design System

Figma Design

Purpose

Understand the purpose of a design system in UI design. Develop a simplified design system consisting of color and type for project 2.

Background Info

"A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels." - Nielsen Norman Group

It's a reusable design! A design system creates a cohesive collection of UI resources that a company uses to create consistency and harmony for its brand. They are often highly detailed and contain everything from colors to margin measurements. Here are some examples:

Google created their Material Design System
Apple has their Apple Human Interface Guidelines
Uber: Uber Design System
IBM: Carbon Design System

Atomic Design Framework

The Atomic Design Framework is a methodology that designers often use to craft design systems. It is helpful to see the purpose of this methodology in this video. You will only be required to create "Atoms" in your design system, but you are encouraged to create "Molecules" and "Organisms."

Also, create this design system in unison with your mockup. Rarely do designers works in a linear fashion, start with the markup and go back and forth between mock up and design system until you have something that works!

Instructions

  1. Open the Design System page in Unit 2 Files in Figma.
  2. Create the Color and Typography system for your project. Watch this week's assignment video for details on how to use the template.

Submission

  1. Export the completed Design System (two pages) as a PDF from Figma.
  2. Open the Week 9 folder in Blackboard
  3. Click on the Design System submission link.
  4. Under Attach Files, click the Browse Local Files to find, select and upload your PDF documents.
  5. Click Submit.

Grading Criteria

Points Possible: 4

  • Color System: Colors have a defined purpose, HEX value, have a meaningful name, and have been saved as a Figma style. You have demonstrated an understanding of color harmonies by creating a system that helps communicate behavior, mood, and website brand.

  • Type System: Fonts have a defined purpose, font family, weight, size, and other font properties. Each font has been saved as a Figma style. You have demonstrated an understanding of font systems by creating a system that helps communicates behavior, mood, and website brand.