Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
How to build
Kick-off your design system process with sprints devoted to unifying and implementing the atoms. The atoms of our interfaces serve as the foundation building blocks that comprise all our user interfaces.
These atoms include
Colors affect all the parts of the system, so you have to organize them first
Step 1 - Color Palette: Base on brand color of the product, you will create a color palette that contains primary, secondary, neutral, grayscale colors
Step 2 - Background Gradient: Create background gradients to be used to great effect when used in moderation
Step 3 - Color Overlays: Set simple color overlays with opacity properties for an element to be applied to any images in a project
Step 4 - Border Styles: Identity border styles on the light and dark background
When you’re working with typography on the web, the two major things you want to pay attention to are the font sizes and line heights. Although there’s so much else that goes along with those two things, these are your two key components to creating a better vertical rhythm on your page design.
Step 1 - Build a visual hierarchy of text with 3 levels: the heading, body text (body, paragraph, description, input, sub-title, caption, tiny) and button
Step 2 - Opt for font sizes for each of your levels: Large, Medium, Small
Step 3 - Establish specific text styles with font-weight, font-style (normal or italic), text-transform (lowercase, uppercase)
Step 4 - Create a guideline for typography to help the team understand the metrics and follow the style of them
Surfaces are used to emulate real-world depth at various levels of elevation where a light source is casting a shadow from the surface onto the layer below it.
Step 1 - Box Shadows: Create box shadows of varying strengths for elements
Step 2 - Scrim: A Scrim is a semi-transparent gradient layer that helps text appear more readable against backgrounds
All the icons that products, apps, or sites use. Having a standardized iconography library ensures consistency across the entire brand.
Step 1 - Create a bounding box for your icons to aid with alignment and visual consistency going forward. Then setting a default color for your icons
Step 2 - Divide into 3 sizes: Large, Medium and Small ( in case of using Figma app)
Base on branding identity of product to set master components. We will define it into 3 types of logo: vertical, horizontal and favicon.
Now you have small atoms where you use them to create molecules are relatively simple groups of UI elements. For example, a form label, search input, and button can join together to create a search form molecule.
Buttons are used primarily for actions such as "Edit", "Create", "Share" or "Cancel." They are to navigate the important or less commonly used actions in the interface.
Step 1 - Create 4 button styles:
- Primary: To indicate important actions on a page or a view
- Secondary: For secondary or less important actions
- Outline: For sub action
- Danger: To indicate destructive or dangerous actions
Step 2 - Divide into 5 properties for each of style: Default, Link, Icon only, Button with left icon and Button with right icon
Step 3 - Continue to sharing out the properties to 3 sizes: Large, Medium, Small
Step 4 - Define the state of button: Normal, Hover, Pressed (Active), Disabled
b. Button Group
Button group displays multiple related actions stacked or in a horizontal row to help with arrangement and spacing.
Step 1 - Default button group: Use when you have multiple buttons to space them out evenly.
Step 2 - Segmented button : Use to emphasize several buttons as a thematically-related set among other controls.
States: Define 5 status: Inactive, Focus, Wrong, Activated, Disable
- Step 1 - Define 5 types of field: Default fields, Fields with left icon, Fields with right icon, Fields with double icons and Text Area
- Step 2 - Continue to divide into 3 styles for each of type: Basic input, input with label, input with label and caption
- Checkbox - Use in forms to toggle the state of something on or off. Default checkboxes can appear in two states: selected and disabled, or unselected.
- Radio buttons - Use radio buttons where users must make a single selection.
- Switch (Toggle) - Use on settings pages to allow users to toggle a setting that has an enabled or a disabled state.
d. Date and Time Picker
Date and time pickers let users choose dates or time from a visual calendar that’s consistently applied wherever dates or time need to be selected across app.
e. Progress bar
The progress bar is used to represent the completion of a task or operation visually. You need to define two sizes for it in case of wanting to increase or decrease the visual weight of the progress bar.
A Slider component for displaying current value and intervals to input a value in a range.
Labels are used to inform users of the status of an object or an action that’s been taken. They include two types:
Avatars use to present a thumbnail image for an individual, customer, or business.
They should be one of two types: Photos and Initials(icon or letter). Then, you need to divide them into three sizes to use when too small or big the layout, or when the avatar has less importance:
- Large (80 x 80 px)
- Medium ( 40 x 40 px)
- Small (24 x 24 px)
Cells are used to organize columns and rows of the data table based on the information needs of your users.
1 - Heading Cell: describes the content in a clear and concise way.
2 - Text Cell: fits a short or long text into a table cell
3 - Person Cell: includes the avatar and name of users
4 - Status: displays status of an object
5 - Empty values: If a cell is empty or unavailable, keep the cell empty. This includes removing the icon entirely to reduce noise and help with legibility.
6 - More menu: A collapsible menu containing secondary actions that are hidden, in order to focus the user's attention on the main actions in the table. Use the more menu if you want to display more than two secondary actions.
7 - Checkbox: is used to indicate your users make a range of selections from an individual table row.
Compose of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.
To structure all information from a data set in a way that helps users easier compare and analyze the data.
We define the type of tables include: Default and Sortable data table, with footer, with row heading links and with all of its elements.
This component displays data in calendar form, such as schedules, timetables, date picker
c. Description List
Use when you need to organize and explain related information. It's a way to display a list of items or term alongside explantations.
d. Resource List
A resource list indicates a collection of items of the same type to help the user find an object and navigate to a other page
Filters is a composite component that filters the items of a list or table.
Users use filters to:
- view different subsets of items in a list or table
- filter by typing into a text field
- filter by selecting filters or promoted filters
The navigation is used to display the primary navigation of the frame of any application or website. Navigation includes a list of links that users use to move between the sites quickly and efficiently.
A versatile menu for navigation include:
Top Navigation - Horizontal top navigation menu.
Inline menu - Vertical inline menu.
b. Page Header
Page header is used to highlight the page topic and display crucial information about the page. It can also have the action items related to the current page.
Use to alternate among related views within the same context.
Pagination is used to switch through a collection of items that has been split into pages
Cards can be used to group similar contents related to a single subject. They also make application easier for users to scan, read and get things done.
Upload by clicking - Classic mode. File selection dialog pops up when upload button is clicked.
Pictures Wall - After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.
Drop Zone - This component lets users upload file by dragging or dropping the files into an area on a page, or activating a button.
To build a outer wrapper of a page, including a title page and associated actions
d. Error messages
Error messages can be scary with users so they should tell users what happened and there's a solution. If possible, offer an action with a button or give them a troubleshooting instruction.
Provide a placeholder while you wait for content to load, or to visualize content that doesn't exist yet.
f. Empty State
Empty states are used when a list, table, or chart has no items or data to show. This is an opportunity to provide explanation or guidance to help users progress. The empty state component is intended for use when a full page in the admin is empty, and not for individual elements or areas in the interface.
Overlays prevent users from interacting with the rest of the application until a specific action is taken.
Use modals when user must complete an action before they can continue with the main workflow. Avoid using modals to display complex forms or large amounts of information.
Popovers are small overlays that open on demand. They let merchants access additional content and actions without cluttering the page.
c. Pop confirm
When the operation of the target element requires further confirmation by the user, a floating layer prompt is ejected near the target element to inquire the user.
Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when users hover, focus, tap, or click.
e. Dropdown menu
When there are more than a few options to choose from, you can wrap them in a Dropdown. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.
To provide users with necessary information about what the app is currently doing, and suggest users' next behavior. Feedbacks allow users to understand the result of the system when they interact with the app.
It is a non-blocking information display. It does not interrupt the user's current operation. It usually stays at a certain position on the page (top preferentially). Note: The close button can be added or hidden according to business needs.
It includes 4 status components: Info, Success, Error, Warning
The important global notification information actively pushed by the system is displayed in the upper right corner of the system.
The message prompt for the aggregate type, generally appearing in the upper right corner of the notification icon or avatar, attracts the user's eye through a striking visual form.
Continue to place molecules, organism or even atoms into a layout and articulate the design’s underlying content structure. And with these templates you'll have pages.
A page is based on 12 grids system to define the screen structure for platforms. The column grid system is a value of 1-24 to have stable arrangement. And we should define an elaborate grid system to ensure a high level of the visual comfort.
Include four objects:
- 1 - Header: The top layout with the default style, in which any element can be nested, and must be placed on a page
- 2 - Sider: The sidebar with default style and basic functions, in which any element can be nested, and must be placed on a page.
- 3 - Content: The content layout with the default style, in which any element can be nested, and must be placed on a page
- 4 - Footer: The bottom layout with the default style, in which any element can be nested, and must be placed on a page
The Layout is used to handle the overall layout of page. The layout sections have four main configurations: one-column, two-columns, three-columns and annotated layout:
Two-columns with primary and secondary width
Three-columns with equal width
Usually use for settings pages. When settings are grouped thematically in annotated sections, the title and description on each section helps users quickly find the setting they’re looking for.