Как дизайнер передавал шаблоны в команде

Отличный вопрос! Взаимодействие с дизайнерами — критически важная часть процесса разработки. За годы работы я видел эволюцию от разрозненных файлов к целостным, «живым» системам. Передача шаблонов (UI-китов, дизайн-систем) всегда должна быть не просто отправкой картинок, а передачей контекста, логики и интенции.

Вот как это происходит на практике, от простого к сложному:

1. Исторический способ: Статичные файлы и мануалы

Это была отправная точка, и она до сих пор встречается.

• Инструменты: Adobe Photoshop, Sketch (позже), .psd, .sketch файлы.
• Передача: Архив по почте или в общем чате. К нему прилагался PDF-мануал или текстовый файл с размерами, шрифтами и HEX-кодами.
• Проблемы:

    *   **Версионный ад:** `button_final_v3_approved_updated.psd`.
    *   **Нет интерактивности:** Не видно анимаций, состояний (pressed, disabled).
    *   **Сложность экспорта:** Дизайнер вручную слайсил и экспортировал ассеты (`@1x`, `@2x`, `@3x`), что вело к ошибкам.

2. Современный стандарт: Интерактивные макеты в Figma

Figma произвела революцию, став единым источником правды для дизайна и разработки.

• Единая ссылка на макет: Вся команда работает с актуальной версией. Версии фиксируются внутри Figma.
• Встроенная дизайн-система: Компоненты (кнопки, поля ввода) и стили (цвета, типографика) переиспользуются. Разработчик может изучить их структуру.
• Полезные для девелопера функции:

    *   **Инспектирование:** Позволяет одним кликом получить точные **отступы (padding, margin)**, свойства **тени (shadow)**, **радиусы скругления (corner radius)**, параметры **Auto Layout** (аналог `ConstraintLayout` или `LinearLayout` в Android).
    *   **Экспорт ассетов:** Разработчик может экспортировать иконки и изображения в нужных плотностях (PNG, WebP, SVG) прямо из макета.
    *   **Плагины:** Например, **Figmotion** для прототипирования анимаций, или плагины для генерации цветовых палитр в формате `xml` для Android.

// Пример: Цвет из Figma напрямую попадает в colors.xml
<!-- colors.xml -->
<color name="primary_500">#6750A4</color> <!-- Скопирован из стиля Figma "Primary/500" -->

// И затем используется в коде или layout
<Button
    android:background="@color/primary_500"
    ... />

3. Продвинутый подход: Дизайн-система как код и Zeplin

• Zeplin: Был популярен как "мост" между дизайнерами (Sketch/Figma) и разработчиками. Автоматически генерировал спецификации, стили и фрагменты кода (например, dimens.xml для отступов). Сейчас его роль largely взяла на себя Figma.
• Дизайн-токены (Design Tokens): Это следующий уровень абстракции. Дизайнеры и разработчики договариваются об именованных примитивах (--color-primary, --spacing-unit-4), которые затем конвертируются в код для всех платформ (Android, iOS, Web). Инструменты: Style Dictionary, Theo. Это обеспечивает абсолютную синхронизацию.
• Storybook для мобильной разработки (аналоги): Использование библиотек вроде Appetize или внутренних инструментов для каталогизации UI-компонентов, где разработчик может сразу увидеть все состояния кнопки в изоляции.

Ключевые артефакты, которые разработчик ожидает получить:

1. Ссылка на актуальный макет Figma.
2. Прототипы с интерактивностью (клики, переходы, базовые анимации).
3. Описание поведения (UX-сценарии) для сложных элементов: что происходит при пустом списке, как ведет себя поиск, логика валидации полей.
4. Specs (спецификации): Все отступы, шрифты, цвета, скругления — желательно доступные через режим инспекции.
5. Ассеты, экспортированные по правилам: Иконки в SVG (для вектора) или PNG в необходимых плотностях (hdpi, xhdpi, xxhdpi), названные по конвенции (например, ic_24_search.xml для вектора).

Идеальный процесс в Agile-команде:

1. Совместное планирование (Grooming): Дизайнер показывает макет всей команде (включая iOS, Android, бэкенд), обсуждаются edge-cases и технические ограничения.
2. Создание макета с учетом платформы: Хороший дизайнер знает гайдлайны Material Design (Human Interface Guidelines для iOS) и обсуждает с разработчиками нюансы (например, кастомные трансформации между экранами).
3. Передача в тикет: В задаче (Jira, YouTrack) прикрепляется ссылка на конкретный Frame в Figma и комментарии для разработчика.
4. Дизайн-ревью готовой реализации: После того как разработчик реализовал экран, дизайнер проводит ревью на реальном устройстве или эмуляторе, проверяя pixel-perfect соответствие и, что важнее, feeling анимаций и взаимодействий.

Главный вывод: Современная передача шаблонов — это не файл, а процесс коммуникации. Идеальный инструмент (как Figma) минимизирует разрыв, но не устраняет необходимость живого диалога между дизайнером и разработчиком для создания по-настоящему качественного продукта.