Developing UI design kit

When designing, we also lay down additional “rudiments” - components necessary for a particular case. They can be reused in the next stages, when the corresponding features appear. At the same time, the largest part of the interface is built on conditional 3-4 components, which are customized for the necessary tasks - the so-called "stupid components".

The concept of project organization implies a breakdown into smaller components according to a tree structure:

The files are divided into pages by navigation tabs or by features.

In working layouts, each scenario or page has its own status - a tag.

All layouts on the page are linked to each other in such a way that the team does not get confused. Layouts have a numbering and state name or a label that describes it.

Specifications are attached to the screens on the pages. Markups and specs are designed to briefly describe the behavior of an element or screen in a given situation as conceived by the designer. It also helps to communicate small but important things that may affect the development. For complex screens, we attach a spec that reflects the behavior or interaction, and also add an animation with a link to the prototype or video.

The UI library is divided into subgroups with state tags so as not to confuse other designers and tell developers what can or cannot be touched.