Design Systems is a relatively new concept that aims to organize the way design happens in structured systems such as applications, websites, organizations, etc.
Historically, working with graphics for the digital age has been unorganized, lives in personal computers, is not collaborative and leads to uncoordinated design.
When the world of graphic design meets development, designers were often confused about why mockups are not followed, why colors are not the same, not the same shapes, etc. All the while, developers ask designers why they can’t provide something that more closely resembles the system they aim to change. It’s uncoordinated work entering a highly-systemized world.
Often, both sides are confused and system changes become much more difficult to achieve.
Meet UI-design applications. The first wave of these started with Sketch (for Mac). Sketch is a fast and powerful vector graphics application that introduced a number of advantages over traditional SVG editors meant for artistic work. For example:
- Infinite canvas
- Area bounding
- CSS-based design
- CSS-based organization
- Easy exports into various sizes
- Asset library management
- Collaborative design
Through their efforts, a sleuth of similar applications appeared in the scene, one building upon what the previous one lacked. Until we arrived at Figma, yes, Figma.
Figma did a few things right at the start of their development. They provided stronger asset library management, easier online collaboration, web-based editor with near-native speeds (If not faster now with the use of Web Assembly and other technologies), and variable and token management.
Through these enhancements Figma became the de-facto application to use for UI-oriented graphic development.
But what do they all do?
Put simply, these applications develop color, typography, spacings, shadows, icons, etc sets of organized assets. The assets have properties borrowed from development, such as, components, variables and tokens.
Designers can set up entire color libraries in a graphical way and then apply those colors to SVG graphics. Upon export, these graphics contain enough information for developers to more easily implement the design.
All the while, designers only have to spend time at the beginning of a project to set up all the assets required for designing. Additionally, Figma and other applications have been keenly focused on building graphical ways to deal with code-oriented complexities.
For example, Figma and PenPot detect variants creation and can express their values in dropdown menus that get created on the fly by the designers. If you create a button and your variants are size oriented, you can have a dropdown in the application’s UI that shows SM, MD, LG, XL, etc. These are huge time savers. Traditionally, designers would have to do a lot of copy/paste in their designs. With integrations like these, designers simply switch the variant for another and the design updates itself.
A similar idea happens with graphical components in these applications. Users are able to create a master version of an asset, let’s say a button, set up all of their locked and open parameters, colors, typography, margins, gutters, etc. When you make copies of this component, any changes made at the component level will be updated anywhere copies were placed. For very large design documents containing a company’s brand strategy, for example, these types of changes save countless hours of tedious copy/paste work.
Tokens
In recent times, and through various changes in the app-making industry, UI design applications have created the concept of tokens. Tokens are essentially named attributes for graphical components. They are often used as correlated language between design applications and systems.
For example, for Ocean Design, the team created tokens named thus:
pd.ref.color.primary50
- PD: Plasma Design
- REF: Reference color (Raw color value as opposed to applied color, which is called “sys”)
- PRIMARY50: Color role and its named color value in a line from light to dark values of the same color family.
This value can be replicated in Plasma. Through the storing of a master list of token values, Plasma can stay coordinated with graphic primary50, the system would have to do the same and just change the raw color value of that token without having to create new tokens, break coordination with the design system, or have to interpret information coming from designers.
Tokens are becoming more common use and reflect the desire of developers and designers to have even tighter integration between design and development.
Independence
Design Systems also allow for great independence between design and development. Having laid the groundwork to create coordinated design, applications like Figma and PenPot allow users to download asset libraries, reuse, and create UI. All without redefining the source library. It democratizes graphic design while keeping designers coordinated in their designs.
Developers looking to execute an application idea can much more easily create coordinate UI that supports their efforts. Developers would have much less design-oriented work to do and dedicate more into the features they want to deliver.
Ocean Design
Ocean Design aims not only to become a new UI design for Plasma but also plug in these powerful design applications into our development ecosystem and deliver UI to users faster, more coordinated, and more often.
If you’re interested in learning more about this effort, connect with our teams here:
- Plasma Visual Design Team (General chat about all things designs for the Plasma Desktop)
- Ocean Design Team (Focused discussion on Ocean Design)
anditosan
