Overview

Worked with a global clients to create a consistent design systems by working closely with a design leads and developers to turn designs into reusable products using Figma as the primary design tool.

The challenge

The challenge was to create a design systems that will enable existing or future product teams to be able to use the elements to create products that will be based on a consistent system and follow all the rules of branding and design.

Also, when a team gets involved with a project, sometimes there was no design system but only a basic UI kit. So this led to the need to create an integrated system which will cover the design needs but will also be directly connected to the implementation in code.

Therefore, the tasks that had to manage were to:

• Create the foundations

• Redesign or create new components

• Create rules and patterns

• Investigate and create design tokens system

• Communicate all these changes with the developer team

The benefits

• It’s a single source to view components, patterns, and styles.

• Using a design system, new updates to the same projects can be redesigned and managed at scale.

• Design resources can concentrate more on complicated challenges and solutions and less on tweaking appearance. This ensures the product’s visual and functional consistency throughout the designs..

• Ability to replicate designs quickly by utilising pre-made components and elements.

• Reducing the need to reinvent the wheel and eliminating inconsistency.

• Reduces wasted designs or development time around micrommunications.

The approach

For the implementation of the design systems, some actions must be carried out, which will be faithful to the timelines and the client's requirements. These procedures might be as follows:

• Research and collection of all elements of the existing UI kit.

• Detection and implementation of all the foundations, such as style guides, grids, layouts, responsiveness and many more.

• Detecting and creating common patterns.

• Creation of online documentation.

• Communication channels between design and code.

• With an eye on accessibility.

Implementation & tools

Figma and many of its functions and features were used to create the design systems.

By using Figma, each implemented component has its own properties, which should be created with the aim of meeting the needs of both the design and the code. Also, Figma variables are used to create different modes and screen sizes, by using the design tokens. For the needs of the communication between design and code, can be used the Figma Dev Mode.