Building a Design system

Client: Board game arena (use-case, non-affiliated)
Relation: Visual Literacy and User Experience Design Principles class, University of Ottawa
Work: Design system proposal – Figma

An excerpt of our design system elements.

For the final group project, we were tasked with applying all that we have learned during class to the development of a Design System.

We took an atomic approach to the design elements, and feature the system with Demo pages. This means that we created the smallest components, and built on them to create templates and design patterns. The designs are therefore scalable and modular, effectively making it easy to update the system. This tool can be used to generate desktop wireframes and mockups.

A preview of some of the atomic elements; buttons and inputs.
An example of the demo page prototyping for animated demo.

Note: If you don’t have a Figma account, use the hamburger menu to browse the different design system pages. Press the play icon to experience the demo page’s user journey!