Design Systems
Design Systems make realizing products easier
Working efficiently in a team throughout design files and working effectively with developers, all starts with design systems. Design systems make realizing a product easier. Today's design software makes using a design system easy by enabling one to create components and define color & typography styles. These can be deployed throughout subsequent files. Master components and styles allow one to make mass changes. If a header changes or a color needs to be different, these changes can ripple through one's files.
A "Design System" is a robust guide and inventory of components, styles, colors, grids, navigation schemes, accessibility standards, and when to use them.
Create a design system based upon the Dev Framework
Design systems become really handy when they match the developers framework. Using a design system that matches a dev framework makes it easier for everyone to know where and when to use a component. For example, if a developer was building with Kendo UI for JQuery, they might use this date picker. To make developing the software easier for the developers, a designer should create similar components within their design library. These components may be styled differently than the framework (The roundness of the border or the border color,) but the two components should function the same.
The below image is a page within a design system which outlines the use of typography.
Build Pattern Libraries with reference to Design Systems
A "Pattern Library" is an inventory of the components of a Design System built within a design software.
The below pattern library is of a design system created in Adobe XD. This pattern library contains common colors, styles, and components.
The below image is a pattern library of a design system created in Axure.
Design Systems in 2024
RIP to Axure, Sketch, Adobe XD. Hello Figma.
The last few years have marked a major shift the software designers use. I once worked across design software, but now I design only in Figma. The screenshots above ^ will never be updated. For the last few years I have worked exclusively in Figma. There are some areas it is still lacking compared to Axure, but for the most part, I am glad most UX designers are finally speaking the same tooling language.
Here are a few facts about the way I use Figma:
1. I am an advocate for design systems and their coded counterparts (often in storybook or the like.) I have worked on two separate corporate design systems that had Storybook counterparts.
2. I am also an advocate for atomic design, tokenization, auto-layout, and other ways of speeding up the maintenance of design systems. Link here is a design system which I have been refactoring to include auto-layout, variants, and other improvements. I also maintain this design file which contains more commonly used components in the software product I design for.
