Menu Sheet Overlay
Search Sheet

Using the UI Kit

PWA UI Kit Overview
A snapshot of the UI Kit Symbols page.

What is the UI Kit and why use it?

To help decrease build times, create more consistent designs, and improve design quality, we created the Mobify UI Kit. The Kit has been built to match one-to-one with Mobify's PWA SDK, offering adaptable and reusable UI elements that follow industry best practices.

By reducing the work involved in building all these components from scratch, the UI Kit allows designers to focus more attention on the overall visual design, and on more complex interaction problems.

The purpose of the UI Kit is not to act as a predefined style template for a project but to give the designer a great starting point when assembling components together into a cohesive system.

When to use the UI Kit

The UI Kit is intended for the start of any new project. The Kit includes .sketch files containing a collection of common ecommerce UI patterns. These are then used to compose core ecommerce page templates such as the Product Details Page (PDP), Product List Page (PLP) and Checkout flows.

Start using the UI Kit

Start by downloading the UI Kit Sketch files and assets from Github:

**Download the latest version of the UI Kit**
**Tip:** In order to use the UI Kit, you will need to install the fonts Roboto and Roboto Mono (included in the repo). You will also need the latest version of Sketch installed.

After downloading the UI Kit, open the kit in Sketch, and begin by reviewing the Setup pages. These pages contain all the type, color and layer styles used throughout the UI Kit. Changing any of the elements here will populate the changes globally to all the components, and will give you a great head start in customizing the components to match your client’s brand.

UI Kits setup screen
The UI Kit setup screen for global colors.

To customize the UI Kit, you can adjust the following Setup elements:

  • Brand colors
  • Type styles
  • Basic form element styles
  • Action and Button styles
  • Background section styles

Customize the core symbols

After customizing color, font and styles, your next step is customizing the Symbols page. Here, you can adjust the layout of the common components to match the desired brand and overall user experience. (Symbols will adopt the changes you made in the Setup pages.)

UI Kit components
The UI Kit symbols page

Not all symbols will be required in the initial mocks, however, we recommend not to remove these symbols in case they are required at a later date.

Compose core templates

Once you've customized the overall design system, you can begin assembling pages by using the common components.

UI Kit symbol pathways
The UI Kit symbol structure matches the SDK component naming.

Notice that symbol names match the components in the SDK. We encourage you to customize the look and feel of the components to suit your project. As you do this, it's also a great idea to use a naming convention that makes it easy for developers to identify which components should be used to build out the designs.

Tip: To enable clear communication with Development, we recommend documenting any deviations from the default component structure. This will provide developers with a warning of any changes they'll need to make during the build.

Now that you've got the UI Kit setup and customized, celebrate! You have a big head start on the design of your Mobify Platform project.