UI designer in action
18 Aug 2020 14 min to read

Design System in Figma – How to Build Graphic Projects with a Structure

Have you ever ask your organization, how to improve the design process and achieve the best result? Here we have one solution that will change your design process, enhance the design cooperation, and impact the whole business.

Today we will write a brief explanation of the design system, a trending word used in the web industry.


The meaning of the design system is: a collection of fundamental elements and reusable UI elements useful for both designers and developers, and controlled with specific guidelines and well maintained during the life of a web product.


So, in the end, the design system ensures that your product has consistency, which makes the brand identity more emphatic.

Figma design systems

Figma on Figma: How we built our website design system – from Figma.com

 

Why using Figma?

Figma is a design tool built and thought precisely for designers – UI and UX. It has many features for the design system, and one of the main is real-time collaboration. After the original release, it revolutionized all the industry and changed the cooperation among the teams. This incredible software works perfectly for creating a cohesive and stable design system among the organization.

Figma real-time collaboration

Multiplayer Editing in Figma – from Figma.com

 

The other advantage of Figma is cross-platform. We can use it in both Mac and Windows and without installing any application on our computer because the app is also available on the browser. Thanks to this, anyone can use it easily. The design is accessible to anyone – designers, front-end developers, accessibility experts, content strategists, researchers, performance experts, product managers, leaders, customers, and end-users.

 

The structure of the Design System

Let’s explore how is a design system in dept. We can divide it into two main groups: the foundation and the assets. The foundation is all the main appearance of your application. In this group, we can find the colors, the typography, the grids and spacings, a set of imagery like icons, illustrations, and the logo, plus some additional rules such as borders, rounded corners, shadows, textures, elevations, and depths.

This part of the design system can be set in the Figma’s Styles and creating a library that contains all of these rules.

Design System Colors

In ASPER BROTHERS, we sorted all the colors we use inside our website. We created a list of all the specifics. Currently, our main colors are two, the yellow golden state and the red rush magenta.

 

The second group is the assets that are building blocks useful for our design. We can divide them into elements (or basics, or atoms), components (or molecules, or modules), regions (or zones, or organisms), and layouts. An example of the element is a button or an icon. Instead, the component is an assembly of more elements, such as a search form. The region is a larger area of the UI, for example, left-hand navigation. Finally, the layout is the whole web-page and how it is structured.

This part of the design system can be set in Figma’s Assets. This will become the UI library, or pattern library, where we create new reusable components that help create and manage consistent designs across projects. In Figma, the primary component is the one that defines the properties, while the instances are copies linked and used in our project, and they receive all updates made to the primary component.

Design System Assets

We just explained what are the assets. In ASPER BROTHERS Design System we created our personal design pattern, and we added the elements, the components, and the regions we’re using the most in our web pages. As you can see header, footer, and other features are part of our assets.

 

The design tokens

An essential part of the design system is design tokens. They are real data values created to build and maintain the design system and the product, also integrated inside our pattern library. The product has to ensure stability and unity across all platforms, and these tokens are used in place of hard-coded values.

We can divide the tokens into more groups based on the specificity of the value and the intended purpose. In this order, we have global tokens, alias tokens, and component-specific tokens.

 

design system typography

In ASPER BROTHERS, we sorted all the typography from the most emphatic to the less. We created a list of tokens for helping the developers to manage them. Currently, we use only the font-type Proxima Nova in all our internal products.

 

It is also possible to automate the process between the design and the coding thanks to Figma’s plugins. All Figma’s Styles will be variables in a stylesheet (CSS or SCSS) following the tokens’ taxonomy.


The automation makes things faster and more reliable. In this way, we give ownership to designers and more accountability to the design process because they can modify design tokens without necessarily reaching out a developer for implementing them. Designers can push the changes and decide when to do it.

Before starting to develop the design system, a good practice is to organize a front-end questionnaire and help the design system lead to getting real consistency across all various platforms.

Design System Spacing

An important part to document in our Design System is the spacing. We want to show in detail all the paddings and spacings for every single component and layout. Another thing is to organize all the breakpoints for adjusting our layout between desktop and mobile devices.

 

Design system and ROI

Why is it essential to invest in a design system before starting a product development? When we implement a valuable design system, it helps to improve your team’s efficiency while at the same time maintaining or enhancing the user experience and bridge the gap between your design and your development processes with a shared language.

Is the design system your next step?
I think yes! The most important thing, above all, is the collaboration of every role – from designers to developers, from strategists to sales and marketing. They’re understanding, learning, and involvement will save money for the organization and the investors in the future. Andrea Mecenero UI Designer

Usually, the team members waste much time performing routine operations or repeated actions, but it can be resolved or drastically reduced if your organization’s core practices assimilate the design system. Consequently, it saves a lot of time and boosts productivity levels to the company, plus your team will learn to solve problems in a systematic way rather than in an individual way.

Higher dividends will delight the shareholders, thanks to cost-savings and the increasing in profitability.

Starting a Design System FAQ

How do I prepare for a design system?

You can start by preparing an open-ended interview where you set all the steps you need. Think of it as a brainstorming session to solve a real problem related to the company's goals.

Who takes part in this interview?

A good practice is organizing several interviews with team members and especially developers. The design system is not just a UI library, but it's much more. It's broader guidance such as tooling, governance, people, accessibility standards, technology stack, and workflow.

Why is Figma suitable for Design System?

Figma is one of the most popular solutions for creating a visual layer of applications and websites. Its great advantage is its powerful tools for sharing work and projects. Creating Design System in Figma is simple and fast.

 

Call to action
If you are building a digital product and need support in designing an effective user experience – our team will be happy to show you the right direction.

Share

SUBSCRIBE our NEWSLETTER

Are you interested in news from the world of software development? Subscribe to our newsletter and receive a list of the most interesting information.

ADD COMMENT

RECOMMENDED posts