Cross-platform

Design Library consists of structured Figma files with links to documentation. Designed for native iOS, Android and WEB development. For the developer of each platform, there are separate repositories with a single CDN of tokens.

Unified tokens, atoms and components

A system of elements and resizers has been developed that will satisfy all cases for developing mobile and web versions of the product.

Unified guides and templates

All components are accompanied by links to documentation and examples and use of components. Also, all components are accompanied by comments on common errors and the purpose of using the component.

‍

Design+Code

The design system consists of Figma files, linked libraries and the same structure for iOS, Android and web versions of the library.

Unified system of properties

All atoms and components are switched in Figma and on each platform by options. For mobile platforms, there is a demo application design of a system with a GUI, for the web, a storybook is used.

Variable atoms and components

Widely and flexibly described components allow you to avoid errors and unrealizable solutions.

‍

Tokens, sizing & etc

Everything has its place, a separate library file in Figma for designers and a separate CDN for developers to include in code on different platforms.

Semantics and guidelines

All atoms and components are permeated with semantics that clearly describe the relationship between objects and their application. Equally good for different platforms for developers and designers.

Universal tokens

Turned into tokens: fonts, illustrations, icons, palette, application theme, sizes, elevations, paddings, grids. This allowed for faster and more independent maintenance and updating of files for designers and developers.

‍

Accessibility
& guidelines

The development took into account the best practices of the company. Development of accessible sites and applications, designing a reliable and understandable interface.

Technologies included

Voice over, talk back, without mous, scale interface. The implemented library was also tested for backward compatibility of browsers and versions of mobile OS.

Considered

HID and Material guidelines for developing mobile applications, using scaling interfaces and fonts. W3C Options for Resizable and Responsive Web.‍

‍

Templates

Component templates* and layouts

In addition to raw (raw or original) flexible components, commonly used templates and combinations of component usage are collected with additional description. Saved templates with a frequent arrangement of elements relative to screen forms.

* Does not contain templates of the final application because it's a design system. They are stored in the final application itself and its files.

‍