Design systems are essential for maintaining consistency and efficiency in modern web development. By setting up design guidelines, resources, and documentation early in a project, you make the design process easier for your team and everyone involved.
In this tutorial, I’ll show you how to create a design system from scratch in UXPin. Fast. But before we start, set up a trial at UXPin to follow this guide.
PS: Did you know that UXPin supports React-based design systems? Bring your React Design System to UXPin and design with code-backed elements that make your design correspond with frontend 1:1. Request access to UXPin Merge.
Getting Started with Design Systems
To begin, open the Design Systems tab in the top bar of your UXPin dashboard. Here, you can create a new design system or view existing ones. Let’s start by clicking the “Create Design System” button.
You can build a design system in two ways:
- Using an Existing Library: UXPin provides pre-built libraries that you can use as a foundation.
- Starting from Scratch: For this tutorial, we’ll start with a blank slate by clicking “Create from Scratch.”
Adding Resources to Your Design System
Each design system in UXPin is divided into four main sections: Colors, Typography, Assets, and UI Patterns. Let’s go through each section to see how you can add resources to your project.
1. Colors
You can add colors by typing their HEX code and pressing “Enter,” importing colors from a website URL, or linking directly to a CSS file. For this tutorial, I’ll paste our website address to collect colors directly from the site. UXPin also supports color tokens.
2. Typography
Text styles and formatting can be added directly from the Editor. This section allows you to manage your typography consistently across all designs.
3. Assets
Assets include images and icons, which can be uploaded in various formats, including SVG. Click the “Upload Images” or “Icons” button to add your files.
4. UI Patterns
UI patterns are reusable components and elements that you design and prototype in UXPin. These need to be added to the design system while the Editor is open.
Using the Design System in the Editor
Once you’ve set up your design system, you can start using it to build and expand your prototypes. UXPin automatically creates a corresponding design system library with the same name, allowing you to use its elements directly in your designs. You can add, edit, and update elements from your design system to maintain consistency across your project.
Managing Design System Libraries
UXPin’s design system libraries store all elements and are organized into categories, making them easy to use and manage. Here’s a quick overview of the key functionalities:
- Colors and Text Styles: Colors imported into the system sync automatically with the design system. You can add text styles by selecting an element on the canvas and clicking “Add Text Style.”
- Assets and Symbols: Assets like images and icons are easily accessible, and you can add symbols to your library by selecting them on the canvas and choosing “Add to Library.”
Documenting Your Design System
Documentation is crucial for ensuring that your design system is easy to use and understand. UXPin allows you to add detailed descriptions, code snippets, and links to each category. This is especially useful for developers who can access the documentation when using the Spec mode, saving them time and reducing miscommunication.
Exploring Spec Mode
The Spec mode is a powerful tool for developers, providing detailed information about design elements such as colors, typography, and CSS code.
It also shows the origin of each element, linking it back to the design system. To access Spec mode, return to the Editor and select Preview. Here, you’ll find all the properties and documentation for the elements in your design system.
Finalizing and Sharing Your Design System
Once your design system is complete, you can adjust its settings to make it private or public. You can also create different types of tokens and upload a custom logo for a personalized touch.
Summary
To recap, setting up a design system in UXPin involves:
- Creating and organizing design elements like colors, typography, assets, and UI patterns.
- Documenting each element with descriptions, code, and links.
- Using the Spec mode to inspect elements and ensure consistent implementation across your project.
By following these steps, you’ll be able to maintain a cohesive design across all your projects, making collaboration and development much more efficient.
Don’t foget that… UXPin supports React-based design systems? Bring your React Design System to UXPin and design with code-backed elements that make your design correspond with frontend 1:1. Request access to UXPin Merge.
