[Все доки](https://hackmd.io/@simadsgn/ry_u5tC6O)

# Правила работы над макетом

## Консистентность и компонентный подход

- Используем токены цветов, шрифтов, скруглений о обводок, заданные в файле [Tokens](https://www.figma.com/file/eJ2Q6XbVFsJZHPUojBitZB/Tokens).
- Используем библиотечные компоненты везде, где это возможно и нужно.
Для десктопных интерфейсов используем компоненты из [Desktop UI Kit](https://www.figma.com/file/EwAsXveLVRWvfUtJTZPgAs/Desktop-Ui-Kit?node-id=48%3A0), а для мобильных — из [Mobile UI Kit](https://www.figma.com/file/0gEtjel0EtNvlb9OoLzmGNVh/Mobile-UI-Kit?node-id=2471%3A6768).
- Если одно и то же интерфейсное решение можно использовать в нескольких разных макетах — используем, чтобы не изобретать велосипед.
- Всегда используем систему layout-ов и сеток, заданную в файле [Grid Layout](https://www.figma.com/file/ZFjFlCsCM0rrtPraZwbj6l/Grid-Layout).

## Экономия ресурсов: инструменты и плагины

- Используем инструменты Figma для более быстрой работы, например [Autolayout](https://help.figma.com/hc/en-us/articles/360040451373-Create-dynamic-designs-with-auto-layout), если нужно распределить несколько однотипных блоков друг за другом.
- Часто бывает нужно показать связи от фрейма к фрейму, для этого мы используем плагин [Autoflow](https://www.figma.com/community/plugin/733902567457592893/Autoflow).
- Во время написания гайдов мы размечаем компоненты: описываем размеры, отступы, величины. Для этого удобно пользоваться плагином [Redlines](https://www.figma.com/community/plugin/781354942292031141/Redlines).

## Удобочитаемость макетов

Заботимся о том, чтобы задумку дизайнера можно было понять кому угодно, оказавшемуся в файле макетов, а разработчики смогли воплотить нарисованное, поэтому соблюдаем правила:

- Отображаем области элементов так, чтобы было понятно, как будет вести себя контент при изменении его размеров.

- Показываем все состояния блоков в макете:
-максимальное наполнение
-минимальное наполнение,
-состояние при скролле,
-при ховере и тапе,
-при ошибке,
-при дизейбле
-при прогрузке

- Используется реальный или похожий на реальный контент. Откновенно рыбного контента нет.
-Нет мата и неуместных шуток (политика, религия и т.д.)
-Если в макете используются фотографии, показано, как будут выглядеть карточки фото с белым фоном, тёмным фоном, цветные.
- Если интерфейс существует в тёмной теме, для нее нарисованы макеты.
- Если к сценарию есть прототип, он прикреплён к макетам посредством ссылки


- Если у фрейма есть связи с макетами из других проектов, то на них даются ссылки


## Читать также

- [Структура макетов и контроль версий](https://hackmd.io/-dqGdKt-Rp-UyxBWMqOZVw)