Статья Правила работы над макетом
[Все доки](https://hackmd.io/UbcEkPsoSXiok4QZx_TnIQ)

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

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

- Используем токены цветов, шрифтов, скруглений о обводок, заданные в файле [Tokens](https://www.figma.com/file/eJ2Q6XbVFsJZHPUojBitZB/Tokens).
- Используем библиотечные компоненты везде, где это возможно и нужно. Для вебных интерфейсов используем компоненты из [WEB UI Kit](https://www.figma.com/file/QP9m2CcLXBaR0tFhXe2DS9/Web-UI-Kit?type=design&node-id=1568%3A12747&mode=design&t=aWxWRQiannFXelGS-1), а для макетов приложения — из [APP UI Kit](https://www.figma.com/file/0gEtjel0EtNvlb9OoLzmGNVh/App-UI-Kit?type=design&node-id=11744%3A22024&mode=design&t=FCfcH5Po5NrccLjO-1).
- Если одно и то же интерфейсное решение можно использовать в нескольких разных макетах — используем, чтобы не изобретать велосипед.
- Всегда используем систему 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), если нужно распределить несколько однотипных блоков друг за другом.
- Часто бывает нужно показать связи от фрейма к фрейму, для этого мы используем стрелки из Figjam
- Во время написания гайдов мы размечаем компоненты: описываем размеры, отступы, величины. Для этого удобно пользоваться плагином [Redlines](https://www.figma.com/community/plugin/781354942292031141/Redlines).

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

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

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

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

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


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


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

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