Skip to content
New SaaS AI Design Brain Explore →

Heads up: this is an older tutorial from our Figma days. We've moved on to something new and exciting with the release of our brand new design system & dashboard templates that your AI agent installs in one prompt. The ideas below still hold up, so enjoy them.

What Is UI Design?

UI design, short for user interface design, is the craft of shaping everything a person sees and interacts with in a product: the buttons, screens, type, colour, spacing, and motion. Its job is to make a product clear to look at and easy to use.

UI design versus UX design

The two are related but not the same. UX design is about how the whole experience works: the flow, the structure, and whether people can reach their goal. UI design is the visual and interactive layer on top of that structure. Good products need both, and the same person often does some of each.

The building blocks of an interface

A UI is made of repeating parts: colour and contrast, a type scale, spacing and layout, icons, and components like buttons, inputs, and cards. When those parts are consistent, the interface feels calm and predictable, which is exactly what you want.

Principles of good UI design

A few ideas carry most of the weight. Keep it consistent so similar things look and behave the same way. Build a clear hierarchy so the eye knows where to go first. Give feedback so every action has a visible result. And reduce effort so people reach their goal with as few steps as possible.

What UI designers deliver

In practice the work includes wireframes, high-fidelity screens, interactive prototypes, and a set of reusable components, often gathered into a design system so a team can build new screens quickly and stay consistent.

Why a design system matters

Once a product grows past a handful of screens, redrawing the same buttons and forms over and over is wasted effort. A design system captures those decisions once so the team can move faster and keep everything coherent, which is exactly the problem we focus on now.

Building SaaS instead of Figma files?

We don't make Figma kits anymore. SaaS Design is the design system your AI agent installs into your project in one prompt: dashboards, data tables, settings, billing, auth, and onboarding, in React, Vue, or HTML.