How a developing design system boosts up your product

Design Systems are frequently used elements of our brand identity. From 70’s first know brands and events such as NASA or 1972 Munich Olympics had their own brand book with all necesseary design principles, logo anatomies and basic information how to use their brand identities. Since then, definitions of Design Systems continue to evolve for improved shape, shown as a compendium of visual knowledge and component repo.

We can clearly state that the Design Systems still keep growing, involving more parts and processes of the development.

In this article, you will get some basic information about Design System elements and how to set-up first DS with all necesary parts of this process.

‍

Definition of Design System

A design system is a set of rules and technical instructions for the visual and technical aspects of each digital product or website. The design system is also a collection of the assets and components used in each of the processes of product development in a scalable way.

It’s important to understand that a Design System is not a single visual system or a design language, individual css framework but it collects all these information together.

Design System includes all design assets and tools, but also governance, ways of working and processes.

‍

Atomic Design

The development process of Design System is a continuous cognitive process. We are still defining all areas of DS and the impact on it in our product values. It is also believed that the Design System doesn’t have any existing frameworks but it grows proportionally to the present level of product technological advancement.

To define the categories of each Design System’s parts and correctly name them, there is a one good method. Brad Frost just shows how the Design System looks similar to chemistry. Influential Atomic Design methodology puts forward a more structural approach. This methodology shows us that the same division into atoms, molecules, or constraints is a good solution for categorizing System Design. Atomic Design suggests that the hole collection of UI elements should be thought of as a meaningful component. Atomic Design methodology can also accelerate the process of creating new elements in our digital products.

Five stages of atomic design:

• Atoms: basic HTML elements like buttons, inputs, selects. We treat them as individual components.
• Molecules: group of atoms bounded to each other creating single component unit. For example form with all buttons and inputs.
• Organisms: complex groups of molecules and atoms. Organisms forms distinct an individual parts of UI interface on website or application
• Templates: prepared views of bounded organisms and molecules. Templates can be re-usable in all prepared layouts.
• Pages: ready to develop views with all templates and organisms and real representative content in place.

Much more information about Atomic Design you can read in this article.

‍

‍

The main pillars of a design system

‍

Documentation

Designers and Developers need standards and design principles, instructions to develop products in the right way. Documentation as guidelines are part of each Design System. All prepared structural information which contains the best practices to develop products faster, easier, and much more predictable.

Guidelines contain information about:

• colors, typography and define tokens
• icons and pictograms
• anatomy of UI components design, types and variables of components
• used grids and layouts in application or website
• product vision that sets the direction and guides
• terms on how to implement product on mobile or different devices

‍

Components = Lego bricks

Components are ready to use interactive elements very simillar to Lego bricks. Using them as little bricks which are compatible, we can develope new improvements saving time and speed up the workflow avoiding duplication.

For example the components are:

• buttons and cta elements
• inputs, selects, checkpoints, radios, switches
• dropdown’s
• modals and specific cards
• form fields
• avatars, badges, statuses
• menu items, lists
• sidebars, drawers, navigations bars

There are many more components. Here is a great sample of React.js components made by IBM as Carbon Design System .

Components are designed usually with Sketch or Figma app and coded by front-end developer. They can be a single atom of UI or molecules group.

Here are some more crucial informations about components:

• React.js, Angular or Vue.js — these languages are basic to build components
• testing environment for components is sandbox— place where developers put ready-made interactive components. One of the most popular React.js sanbox is Storybook
• each of components contains properties — defined values and options determining behavior, actions and visual aspects
• components created by designers and developers should be generic and scalable elements of each design system

To define much more binded components together we can create patterns. Patterns often use one or more components and explain how to adapt them to the context. For example, the date-picker containing two fields and a primary button can be used in a range of product improvements.

‍

‍

‍

Tokens

Tokens are parameters of the elements. We can treat Design Tokens as a CSS abstraction. Using CSS preprocessors or custom CSS properties, for example, we can define the color of each element in more than one place in the code using the same token. If we maintain the consistency of the naming of tokens and their use in the application code, we will be able to make global changes and updates easily.

Tokens collect informations about:

• colors
• typography
• animations
• shadows and elements transparency
• margins and paddings
• sizes of elements
• z-index

The advantage of using tokens is a possibility to format them to each of the platform types (Android, iOS, Web).

Great article of Tokens naming process by Nathan Curtis.

‍

Design systems impact business

IBM(Carbon), Shopify(Polaris), Uber, Atlassian, and other famous companies are the rockstars in the Design System environment. They set trends and principles on how to build and develop the Design System in the correct way.

Having a Design System has become a key element in the technological and business competition of companies. The race between companies to implement new functionalities and modern solutions requires greater flexibility of the production process, thus — increasing the speed of delivering new implementations while maintaining the same high quality. Scaling development and maintaining visual consistency is also an important aspect of the fight to be number 1 in your industry. Using your own Design System and having a qualified team to manage it is the basis for authenticating a high-quality product and the brand itself. Investors during due diligence also take into account companies’ awareness of scaling their own products through the use of a Design System.

• High efficiency
  The design system allows for boosting up the process of developing new product functionalities. Using components and patterns improves development and design. Your company can save a lot of time and money during much more automated and repetitive workflow.
• Team work
  Developing the design system is teamwork. It is built by many people from various tech-environments ( Front-end, UX, QA, Business). Thanks to the involvement of various specialists in the development of the System Design, we expand the team’s competencies and give the opportunity to jointly influence the appearance of the product and its operation.
• Scalability
  By improving the speed of implementation of new system functions, we maintain high product quality. The implementation of new solutions is much easier and more predictable, we can plan product development and the scale of its availability and advancement.
• Comprehensive instruction
  Design System is a compendium of technical and substantive knowledge, in particular for use by internal product development teams. By providing a knowledge repository to external developers, we shorten the cognitive processes of the product. We reduce the probability of errors and incorrect implementations. Customers who also have access to DS can integrate their products with our applications more easily knowing about the applicable visual and technical rules of the product.

‍

How to start

System Design development is a long process. We should remember to make DS affordable and quickly digestible. Creating a Design System means writing a cookbook so that every layman can easily cook even the most difficult dish, knowing exactly what ingredients and proportions to use to make it. The following to-do list, in my opinion, shows the scope of tasks needed to start working on your own design system.

1. Design a system in more efficient way

Designing a design system, we must have the right tools for it. Select the appropriate program for component design, guidelines, and element anatomy. Use e.g. Sketch, Figma, or Adobe XD. Thanks to these programs you will be able to quickly design scalable DS elements while maintaining all integration with other product development environments. I recommend Sketch because, in my opinion, it is a very intuitive and accessible tool that facilitates the work of designers.

2. Think in generic way

Creating elements of the Design System, remember about their usability. Buttons can perform various functions, lists create forms, and at the same time be separate elements. Additionally, remember about the possibility of expanding the components with new elements and their use also in terms of responsiveness.

3. Keep your design elements in the cloud

Always upload your component designs in Zeplin, Sketch cloud, or similar apps to give a chance to your team mates to get any crucial information in the simplest and fastest way. Using these programs, developers can also inspect all views and projects, get to know with basic used components, patterns, and their tokens.
I like to work with Zeplin. This program generates all specs, assets, and code snippets from used components in each specific project. Another advantage is full compatibility with Sketch with fast artboards exports keeping the names of the symbols and tokens used.

4. Git + Design System

If you plan to create and run a design system, you should know that you will have a lot of work with managing all components libraries and also each of the designed UI elements. It’s similar to work as a Librarian who properly catalogs each book and knows their editions as well. He knows also if a given book or article fits into a larger collection.

If you want to control all these areas, variations of components, patterns, and tokens versions as well — start using tools that give you this opportunity. Git as distributed version system control mainly exists in the development environment. For some time now, the Abstract app has enabled this methodology for Design Systems as well. It’s a particularly interesting and useful solution in the component designing process. You don’t have to keep all libraries local, all huge Sketch files as well, just connect all libraries with Abstract. Using Abstract you can also manage your work with all commits, pushes and if you want to upload a new master of the component library just merge it. Of course, this git methodology is so important having all backups and last versions on the cloud. Also, by following the rules of work based on commits, branches, or file versioning, you will not have to worry about overwritten versions with errors.

‍

Create a value DS team

Create well working Design system team, because it’s so important.

It speeds up decision-making, makes roles and responsibilities crystal clear, and gets everyone on the same page.

Create an efficient team dealing with the design system. Building components and developing the system depends largely on the work of 3 different environments/teams cooperating.

• UI /UX designers — designers are responsible for developing DS from the visual and UX side. They design DS elements and reusable components later built by developers
• Front-end developers — they develop the design system from the technical side. They build components that later define and put into sandboxes, such as a Storybook.
• Component testers — in design system teams, we can also meet testers who focus on checking the quality and logic of manufactured components. Tests mainly concern the behavior of components, their compatibility with browsers, and the possibility of their operation with application data in conjunction with databases.

The work of 3 environments is supervised by the design system Lead. The person who cares about the quality of the system defines goals and tasks. It sets the pace of the System Design building process. DS Lead also determines the prioritization of the implementation of system elements, combining 3 environments into one common workflow.

‍

Plan, manage , develope

Developing a Design System is largely similar to running a large IT project. Use the tools to create tasks and assign them to individual people in the Team. Plan the stages of system development to maintain the clarity of its message and easy reception. Some of my tips to help with this process:

• introduce a functional road-map 📆 so that you can see tasks in a wider range of time and easier to plan, especially the development of components and assigning their construction to individual team members create a kanban environment.
• try to combine the work of 3 teams (design, dev, QA) and your task into one visible kanban so that everyone can see exactly what we are all currently working on.
• define types of tags, e.g. in Jira, and assign them to appropriate tasks:(Component improvement, Component design, Component development, Component testing, Component bug, Component implementation).
• conduct DS development work based on Sprints — e.g. 2-week ones. Create smaller tasks, e.g. for components, so that in such a short time 3 teams can design, implement, and test a new DS element.
• develop a design system that is scalable over time with technical assumptions and business requirements.

‍

Let’s show your Design System

Publishing a ready-made repository is important for the correct flow of information related to product development.

• Sandbox React.js — the environment in which we place already working, interactive components. It contains components grouped often according to the scheme: Tokens, Components, Patterns. Each component of the separate possession also prepared so properties that allow the component to be adapted to a specific use, e.g. color, condition, type. Storybook.js is a very popular sandbox, thanks to which we can post our latest versions of components and show them to the world. The storybook also serves as a style guide generator, component explorer, documentation site, sandbox, and UI elements library.
• Guidelines — website containing all the most important information about our Design System. A repository in the form of descriptions and instructions for the system’s operation, how to build and develop it according to the appropriate rules. The website is also a resource of knowledge about our reusable components — what they are for and how they are built. The anatomy of the elements, their structures, and descriptions are presented. Discussing the colors of the application, the typography used, or the set of icons. Additionally, such a repository serves as instructions for what not to do with Design System elements.

‍

What’s next?

In this article, I tried to describe the basics of knowledge about design systems. I hope that it is helpful for you and you will manage to build your own repo of useable components. If you have any questions just hit me up!

‍