QUEST AI - DESIGN SYSTEM

QUEST AI - DESIGN SYSTEM

QUEST AI - DESIGN SYSTEM

2023

2023

2023

The definitive (Free) Figma Design System & UI Kit

The definitive (Free) Figma Design System & UI Kit

The definitive (Free) Figma Design System & UI Kit

See More

See More

See More

This Design System was a project that I spread-headed and designed completely on my own.

To help customers build and launch products faster, we set out to create our of design system and component library. The magic of this UI Kit was that you could:


1.
Change the fonts, colors and effects in the Figma file, then sync it to Quest to generate an MUI theme.
Copy and paste any of the components from the component pages into their custom designs and convert the designs into working ReactJS.

2.
We based the kit on MUI and I studied the MUI docs to understand what options to add to the kit. I created the kit with over 30 MUI components that we ended up supporting which were composed of additional atom components to make everything easy to customize. The styles for fonts and colors matched the standards defined by the MUI library.

In addition to all the components that were derived from MUI, we added templates for Applications, Marketing, and E-commerce that used the design system components.

Overall the project took roughly 3-4 months to complete design and another 1 month to code.

Here I’m showcasing some examples pages from the UI Kit but you can click the link below to see it in the Figma Community.

This Design System was a project that I spread-headed and designed completely on my own.

To help customers build and launch products faster, we set out to create our of design system and component library. The magic of this UI Kit was that you could:


1.
Change the fonts, colors and effects in the Figma file, then sync it to Quest to generate an MUI theme.
Copy and paste any of the components from the component pages into their custom designs and convert the designs into working ReactJS.

2.
We based the kit on MUI and I studied the MUI docs to understand what options to add to the kit. I created the kit with over 30 MUI components that we ended up supporting which were composed of additional atom components to make everything easy to customize. The styles for fonts and colors matched the standards defined by the MUI library.

In addition to all the components that were derived from MUI, we added templates for Applications, Marketing, and E-commerce that used the design system components.

Overall the project took roughly 3-4 months to complete design and another 1 month to code.

Here I’m showcasing some examples pages from the UI Kit but you can click the link below to see it in the Figma Community.

This Design System was a project that I spread-headed and designed completely on my own.

To help customers build and launch products faster, we set out to create our of design system and component library. The magic of this UI Kit was that you could:


1.
Change the fonts, colors and effects in the Figma file, then sync it to Quest to generate an MUI theme.
Copy and paste any of the components from the component pages into their custom designs and convert the designs into working ReactJS.

2.
We based the kit on MUI and I studied the MUI docs to understand what options to add to the kit. I created the kit with over 30 MUI components that we ended up supporting which were composed of additional atom components to make everything easy to customize. The styles for fonts and colors matched the standards defined by the MUI library.

In addition to all the components that were derived from MUI, we added templates for Applications, Marketing, and E-commerce that used the design system components.

Overall the project took roughly 3-4 months to complete design and another 1 month to code.

Here I’m showcasing some examples pages from the UI Kit but you can click the link below to see it in the Figma Community.

Company

Company

Quest AI

Quest AI

Year

Year

2023

2023

Skills

Skills

Product Design

UI / UX

Product Design

UI / UX

Product Design

UI / UX

COMPONENTS

COMPONENTS

TEMPLATES

TEMPLATES

More Work

Branding

Creative Direction

Visual Design

Web Design

UI / UX

FIGMA PORTFOLIO

FIGMA PORTFOLIO

To view my work in Figma: https://tinyurl.com/yesjasper

A

A

N

N

D

D

R

R

E

E

W

W

J

J

A

A

S

S

P

P

E

E

R

R

UI/UX PRODUCT DESIGNER

UI/UX PRODUCT
DESIGNER

andyjasper@gmail.com

andyjasper@gmail.com

andyjasper@gmail.com

201.615.3861

201.615.3861

201.615.3861

©2023 Andrew Jasper

Site designed and developed by Jasper. All Rights Reserved.