Experimenting with Figma

(For an actual enterprise design system I’ve built, refer to Building the uOttawa WCMS and website in Drupal 8 )

Context

Masters class project: Visual Literacy and User Experience Design Principles class, University of Ottawa
Client: Board game arena (use-case, non-affiliated)
Work: Design system proposal – Figma
Date: 2020 (Before the 2021 Asmodee acquisition)


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.

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

See it live instructions: 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!