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

# Структура макетов и контроль версий

## Организация

**Макеты web-интерфейсов** разбиты по отдельным проектам. Каждый проект соответствует определённому сервису сайта sima-land.ru, все сервисы перечислены [здесь](https://gitlab.sima-land.ru/dev-dep/dev/simaland-pages).

У нас есть отдельные проекты под макеты шапки, футера, карточки товара, корзины и так далее.

Проекты разбиты на отдельные файлы: каждый файл отведён под отдельный функционал данного сервиса (фичу). Например в проекте шапки есть файлы с основным дизайном шапки, а также файлы “Поиск”, “Каталог”, которые являются составляющими.


**Макеты app-интерфейсов** разбиты по аналогичной структуре. Организация разделов может немного отличаться из-за разностей функционала в вебе и приложении. Например, в структуре файлов приложения нет разделов "Шапка" и "Футер", но есть отдельные проект под "Поиск" и "Каталог".


Макеты внутри каждого файла распределяются по пейджам, где каждый пейдж соответствует задаче из гитлаба.

Пейджи идут по порядку задач снизу вверх, то есть самый верхний пейдж соответствует самой недавней задаче. Порядок пейджей не зависит от номера задачи — какую сделали последней, та и выше.


## Внутри каждого пейджа:

- Находятся макеты под десктоп и мобильные экраны во всех разрешениях, которые указаны в гайде Grid Layout от большего разрешения к меньшему.

- Сделаны заголовки для серий фреймов по типу “Шапка Desktop”, “Шапка Mobile” и тд. Заголовки написаны крупно, чтобы можно было увидеть сразу. У заголовков сохраняется иерархия: самые крупные обозначают платформу (desktop, mobile), заголовки поменьше обозначают вариации функционала.


- Показаны состояния для блоков из данного макета. Если блок повторяется в макетах нескольких проектов, имеет смысл сделать из него компонент и описать его поведение уже в глобальных [гайдах](https://hackmd.io/@simadsgn/Bk8iTs6TO) на компоненты.

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


***Чтобы показать связи между фреймами, удобно использовать плагин для Figma — AutoFlow.***

## Как найти нужный макет
- В верхней панели Фигмы есть поле поиска. Забиваем туда прямое название раздела, либо идентификатор Web/App:

- Нажимаем Enter и видим результаты поиска. Фигма ищет как отдельные файлы (вкладка Files), так и целые проекты.
Если нас интересует целый проект, переходим во вкладку Projects:

Вы прекрасны! Все нужные макеты, по заданному запросу найдены.

## Как работать с новой задачей?

Вы начали выполнение новой задачи #003, по её условиям необходимо добавить дни недели в календарь. Открываем последний пейдж в нужном макете.


Для начала создадим новый пейдж, в названии укажем номер задачи и кратко опишем суть. Перед названием временно добавим пометку “Draft”, чтобы разработчики не ориентировались на этот макет до согласования. Вновь созданный пейдж должен содержать все те же макеты, что и последний актуальный пейдж. Для удобства можно создать его копированием пейджа предыдущей задачи (тут #002).


Теперь вносим необходимые изменения в новый пейдж: добавляем дни недели в календарь. Доработанный макет отправляем дизайнерам и проджект-менеджеру на согласование.


Ура, макет утверджден! Убираем из наименования пейджа пометку “Draft”. Ссылку на пейдж прикрепляем к задаче в Гитлабе.


**Важно:** Новые задачи по изменению уже готовых макетов и добавлению нового функционала всегда оформляются на новом пейдже.
Если в согласованных макетах просто не хватает каких-то состояний, то необходимые дополнения вносим на том же пейдже.

***Короткое правило: меняем что-то в макетах —> новая задача и новый пейдж, дорисовываем что-то, не трогая старые макеты —> в рамках того же пейджа.***