return to home | next page

DESIGN SYSTEM

What is a Design System?

Composed of components which are elements you can reuse across your design.
These components help maintain consistency across design so users are not jarred with excess and new information.
Design systems also encompass a set of fonts, colors and icons.
These systems also include rules for interactions like buttons and animations along with breakpoints related to sizing like frame size and padding.

1. Icons

Phosphor Icons

Figma plugin that features a library of thousands of open source icons.
Icons can be filtered by thickness and shape type to ensure consistency.
Icons are searchable and indexed.

Our Phosphor Icon Rules:

Regular Thickness

Flat

White

2. Components

By creating a meticulous system of components, we can achieve nearly 100% cohesion across our design. Every single UI element is a component or variant of a component in our design. Our design is comprised entirely of reusable components which is evident in the cohesion across the design.

Through this system, we achieved almost 100% cohesion as not a single component needed to be detached from its parent component.

Below is a closer look at a few of the many components we created. Each component is also completely comprised of auto layout.

3. Breakpoints

We synthesized a set of breakpoints we can use as a template on each new screen we each build.

This breakpoint screen highlights the iPhone size but also is annotated with padding and space necessary to account the top and bottom navigation.

By creating this breakpoint, all of our screens should have equal padding and with concrete numbers.

It will also make it more rudimentary when utilizing auto layout.