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

— На момент передачи макетов уже проделана огромная работа, и тем обиднее из-за перегруза задачами, ограниченных сроков или неопытности что-то упустить и затем потонуть в уточняющих вопросах разработчиков;
— Проверьте, все ли сценарии взаимодействия с объектами предусмотрели. Помните о 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