ReelWorld
Design System
Role: Project Lead & UI Designer
Software: Figma
Objective: When I moved the design and development teams over to Figma, my first order of business was to create a new design system. The goal for the system was to create a cohesive design language and reusable components that would increase our design and development workflow.
I pitched, planned, and managed the design system for ReelWorld and worked with the design team, developers, and creative director to envision and craft the system. I took advantage of my knowledge of Figma along with researching how other companies solved the problems of their design systems.
The Challenge
Every time we started a new project, the design team was creating projects from scratch. This meant setting up new components every single time.
This resulted in inconsistent styling and naming of components, colors, and type styles.
I started the project by auditing all existing components and styles to find any sense of cohesion.
This is an example of what a component looked like without the design system implemented versus what the new design system component looked like. In the old component, there was no clear hierarchy of what the states of the nav row component were.
Components and Design Language
Prototyping
Below is a sample of the prototyping I worked on to demonstrate the power of the Figma to the design and development teams.