We laid down the foundations of the design system for our web app platform, to make our workflows more efficient and to provide everyone in the team with a common design language to use when talking about the different aspects of our product.


  • UX & UI Design
  • Product Design
  • Design System

Project Components

  • Documented components
  • Shared Design Library


Kevin He - Product Lead
Mesai Memoria - Associate Product Designer

Context and concerns

We were thinking of ways to improve and make our process of creating mockup designs more efficient in the long run, because as it stood, it would take a few weeks before a full-fledged mockup for a particular feature was finished, including the application of feedback.
We then worked towards creating a design system that will be contributed to by everyone in the Product Team, which includes designers and engineers, as a shared living document of all the elements found within the AcadArena web app. This would serve as the common design language used across discussions for feature requests.
We made full use of Figma’s facility to have component sets, variants, and even component properties to make sure that things are ready as they are if to be used in other contexts. We also used the Figma plugin Tokens Studio (formerly known as Figma Tokens) to document the different properties of the elements in our product, to connect our designs with the development process.


notion image
notion image
notion image
notion image
notion image
notion image