Дарья Хуторянская написала, что проверить при передаче макетов разработчикам.

— На момент передачи макетов уже проделана огромная работа, и тем обиднее из-за перегруза задачами, ограниченных сроков или неопытности что-то упустить и затем потонуть в уточняющих вопросах разработчиков;
— Проверьте, все ли сценарии взаимодействия с объектами предусмотрели. Помните о CRUD (create, read, update, delete) — операциях, свойственных всем объектам. Составьте карту объектов, их свойств и действий с ними (концепция #ooux);
— Представьте поведение интерфейса, когда данных нет, мало, много (пагинация или скрол, обрезание длинной фамилии или перенос на вторую строку) или достигнут их лимит (технические ограничения, возможность добавить не более 10 фото в профиль);
— Учтите разные варианты завершения пользовательского сценария: успех, ошибка (пользовательская и на стороне системы), загрузка, пустые состояния, онбординг;
— Сверьтесь с ролевой моделью. Например, как будет выглядеть объект, если пользователь может и не может его редактировать;
— Опишите сложные компоненты-организмы: зона клика, поведение при изменении ширины и высоты, разном объёме данных. Спецификация может быть там же, где вы собираете макеты;
— Покажите адаптивные состояния для разных разрешений экрана;
— Соедините макеты стрелочками, объедините отдельные сценарии в блоки макетов, опишите сценарии текстом;
— Если какие-то макеты не ушли в релиз, добавьте комментарии для тестировщиков;
— Добавьте ссылки на описания сложных компонентов.

#handoff

В Контуре подготовили гайд, как навести порядок в макете.

— Настройте автолейауты и констрейнты. Разработчик быстрее поймёт задумку и воспроизведёт её средствами CSS и HTML;
— Назовите слои единообразно и так, чтобы было понятно, что это за элементы. Multi-edit станет работать лучше;
— Размеры элементов задавайте так, чтобы было понятно, как они ведут себя при изменении содержимого и размеров контейнера. Произвольные размеры мешают понять, как работает макет;
— Группируйте элементы так, как они будут связаны в вёрстке. Можно показать область ховера, объяснить логику отступов между ними;
— В компонентах используйте варианты вместо скрытия слоёв или множества отдельных компонентов. Заполненные значения не будут сбрасываться, меньше нагрузка на компьютер;
— В их описаниях пропишите ключевые слова с синонимами, как люди называют такие элементы;
— Компонент, который используется только внутри других компонентов, можно сделать приватным, поставив _ в начале его имени. Он не будет опубликован в библиотеке;
— Как только начинаете использовать компонент в разных частях системы, переносите его в библиотеку и подключайте её к нужным макетам;
— В стили можно добавить не только цвета и типографику, но и изображения (например, аватарки), обводки, сетки, тени и другие эффекты;
— Старайтесь не использовать лишних элементов. Аватар можно сделать с помощью заливки фигуры картинкой вместо маски и 2 объединённых в группу элементов;
— Не дублируйте всю страницу целиком, чтобы описать поведение отдельного элемента. Чтобы показать, где происходит изменение, достаточно показать страницу один раз;
— Показывайте состояния элементов рядом, используйте подписи, если они нужны;
— Давайте осмысленные названия секциям. Они видны при зумировании, так проще найти нужные фрагменты макета.

#figma #handoff

Яна Георгиева написала о налаживании взаимодействия с разработчиками.

— На встречах по оценке задач в спринте (ПБР) было недопонимание, на работу с обратной связью уходило много энергии и времени. Встречи затягивались, задачи переносились из спринта в спринт;
— Часто разработчики плохо представляют себе дизайн-процесс (этап Discovery в модели Double Diamond);
— Проведите небольшую фичу по эталонному процессу и презентуйте команде, чтобы они увидели, как вы приходите к результату: от понимания задачи до изменения макетов на основе обратной связи;
— Презентацию можно потом показывать новым участникам команды;
— Договоритесь (и зафиксируйте это текстом) об интерфейсных паттернах, чтобы не обсуждать их каждый раз. Например, что любой сокращённый текст должен полностью отображаться в тултипе;
— Договоритесь о правилах коммуникации. Например, что если дизайнер не может сразу объяснить, почему предложенная идея не сработает, он берёт паузу, пробует приземлить её и возвращается с обратной связью;
— Или что надо обратиться к дизайнеру за недостающими макетами состояний, а не делать без дизайна;
— И в целом: как оформлять задачи, где источник правды, критерии приёмки, что если реализация отличается от макета;
— Поставьте командную встречу «Презентация финальных макетов» до ПБР, на которой расскажите о целевой аудитории, какую проблему решаете, какие провели исследования и сделали выводы;
— Раз в полгода запрашивайте у команды обратную связь о взаимодействии с вами, внедряйте необходимые изменения, например, через цель в индивидуальном плане развития;
— Если разработчики неравнодушны к продукту и хотят влиять на решения, показывайте им неидеальные макеты (или несколько вариантов решений) и спрашивайте обратную связь. Можно получить экспертную оценку по технической реализации и расширять диапазон решений;
— Если у команды особое восприятие дизайна, повышайте уровень её экспертизы в дизайне. Рассказывайте о психологических принципах, эвристиках, трендах;
— Подскажите, как давать обратную связь: не спешить делать выводы, сначала задавать уточняющие вопросы, отмечать хорошие моменты, без субъективных суждений и перехода на личности;
— Научитесь в какой-то момент завершать обсуждение и принимать решение о судьбе задачи.

#handoff

Захар Бернадский написал о передаче цветовых токенов разработчикам приложений и базовом наборе токенов.

— Базовые группы цветов: Primary, Secondary, Error, Success, Surface (поверхности и объекты на них), Disabled;
— В первых 4 группах базовый набор на примере Primary: primary, active_primary, on_primary, primary_container, active_primary_container, on_primary_container;
— Его можно расширить: primary_stroke только для обводок, primary_variant для варианта цвета без конкретного применения;
— Если нужен токен с прозрачностью, добавьте к названию токена суффикс _xx со значением прозрачности в процентах;
— В каждой группе будут оттенки цвета с одинаковыми Hue и Saturation, но разными Lightness;
— В Фигме в Variables создайте коллекцию color/semantics → в ней базовые группы → в них токены;
— Можно добавить коллекцию color/components и хранить в ней группы токенов для отдельных компонентов вроде цвета текста и дефолтного фона праймари кнопки (значениями будут токены из коллекции color/semantics);
— Но это если есть время и желание гибко настраивать цвета отдельных компонентов, почти не задействуя разработчиков;
— Следите за длиной названий. В Фигме токены выглядят красиво за счёт древовидной структуры, в коде название токена станет одной строкой;
— Если организовать передачу токенов разработчикам, это уменьшит вероятность ошибки и упростит дальнейшие изменения;
— С помощью плагина variables2json можно экспортировать переменные в текстовом формате. Цвета с прозрачностью будут в формате 00000080;
— Уточните у разработчиков формат строки для стиля цвета с hex-значением для семантики и alias-значением для компонентного уровня;
— Преобразуйте экспортированный текст в строки в нужном формате (например, с помощью нейросетей).

#color #handoff

Влад Крят написал об оформлении макетов.

— Отсутствие стандартов усложняет работу с чужими макетами, особенно в большой команде;
— Дизайнеры работают в тёмной и светлой теме примерно поровну, поэтому оптимальный цвет фона рабочей области #6B6B6F;
— Макеты лежат внутри секций, фоновый цвет которых зависит от того, какая тема интерфейса показана в макетах: светлая (#DADAE2) или тёмная (#38373D);
— Секции показывают: 1) happy flow: основной путь только с ключевыми ответвлениями, чем линейнее, тем лучше, 2) дополнительные экраны: ошибки, загрузки, альтернативные состояния экранов;
— На дополнительные экраны можно ссылаться в основном пути;
— Основной путь можно разделить на логические части и показывать их в отдельных секциях;
— Сценарии-микросхемы, где развилки и состояния компактно расположены и связаны сеткой соединительных линий, выглядят круто, но изучать их неудобно;
— Уникальные экраны идут слева направо, их состояния — сверху вниз;
— В нумерации экранов (например, «1.1») первое число — номер уникального экрана, второе — его состояние. Но иногда достаточно лишь названия, например, в наборе экранов с ошибками;
— Соединительные линии выходят из места, с которым пользователь взаимодействует. Если их начало лежит рядом с макетом, место взаимодействия может быть неочевидным;
— Если появляется много пересечений стрелок, значит макеты превращаются в микросхему. Надо декомпозировать;
— Макеты можно сопровождать полезными метками, например: Prod (экран в показанном сценарии уже разработан), Webview, Copyright (требуется редактура);
— Единые правила для расстояний между макетами, блоками с комментариями и так далее помогают воспринимать любой макет быстрее.

#handoff

Наталия Бажан написала, как дизайнеру улучшить взаимодействие с разработчиками.

— Научитесь читать API и сразу его учитывать при проектировании. Это позволит не предлагать того, к чему не готов бекенд, или заранее понимать, когда придётся идти договариваться;
— Передавайте списки данных, необходимых для отображения проработанных вами состояний и кейсов, коллегам, отвечающим за тестовые данные. Сэкономите время разработчикам и скажете себе спасибо на дизайн-ревью;
— Привлекайте тестировщиков и бекендеров к ревью макетов;
— Описывайте даже то, что считаете очевидным. Дефолтное поведение компонентов может отличаться, как и мнение фронта. Не заставляйте его решать, как должен работать интерфейс;
— Расширяйте знания в том, как работает современный веб. Например, как работают серверная и клиентская сортировка, фильтрация, поиск, пагинация, как загружается и обновляется страница, как верстаются таблицы и так далее;
— Обсуждайте кейсы ошибок, предлагайте решения, фиксируйте в своей проектной документации, можно даже ставить задачи по обработке ошибок на бек. Особенно важно, если данные могут поступать из других сервисов или импортироваться из файлов;
— Используйте автолейауты, компоненты, переменные и не детачте инстансы, чтобы не костылить и зря не увеличивать сложность реализации. Подсвечивайте любые отступления от дизайн-системы.

#handoff