---
# System prepended metadata

title: + Дизайн-система и гайды

---

Статья Дизайн-система и гайды
[Все доки](https://hackmd.io/UbcEkPsoSXiok4QZx_TnIQ) 


Элементы нашей дизайн-системы хранятся в отдельном [проекте](https://www.figma.com/files/project/2864084/Design-System?fuid=726314207626455255) в Figma.

Базовые стили текста, токены цветов, формы и обводки хранятся в файле [Tokens](https://www.figma.com/file/eJ2Q6XbVFsJZHPUojBitZB/Tokens).

Библиотека иконок, которые мы используем в интерфейсах лежит в файле [Icons](https://www.figma.com/file/NUkikBKmMo6WiXbWbHJWhkWh/Icons).

Набор сеток и поведение layout-ов с breakpoint-ами описано в файле [Grid Layout](https://www.figma.com/file/ZFjFlCsCM0rrtPraZwbj6l/Grid-Layout).

А ещё у нас есть два UI Kit-а: [для веба (десктоп + моб)](https://www.figma.com/file/QP9m2CcLXBaR0tFhXe2DS9/Web-UI-Kit?type=design&node-id=1568%3A12747&mode=design&t=eN8dWWDD2cuADXyc-1) и [приложения](https://www.figma.com/file/0gEtjel0EtNvlb9OoLzmGNVh/Mobile-UI-Kit)

Для каждого компонента мы пишем спецификации (гайды). Гайды лежат в файлах UI Kit-ов рядом с компонентами. 

![](https://i.imgur.com/Hrs7gUP.png)



Гайды нужны, чтобы разработчик понимал, как должен выглядеть и работать компонент по задумке дизайнера. Работа над гайдами ведётся постоянно: добавляются новые компоненты, которые нужно описывать, либо текущие гайды нуждаются в дополнениях.
Чтобы упростить процесс согласования гайдов, существует [регламент выполнения задач на гайдлайны](https://hackmd.io/1xvV1yeCRRqvkRQgWhDDfQ).

