Грамотная передача макетов разработчикам (Figma for FrontEnd)

Всем привет, меня зовут Андрей)
Я работаю ux/ui дизайнером и каждый раз когда я подготавливаю макеты для верстки появляется внутреннее ощущение, что я что-то делаю не так. Может кто-то, может подсказать верный и удобный вариант передачи макетов разработчикам?

1 симпатия

Лучшим решением будет спросить у самих разработчиков, ибо им может удобно работать с твоими макетами от привычки, а если поменять подход, то это придётся снова привыкать

3 симпатии

На самом деле разрабам все равно) Т.к. я сразу же спросил у них. Требования по макетам больше идут от продакта. “выделяем” нужный элемент и все остальное блюрим и кучу стрелок от макетов в другие состояния элементов.

Да, зависит еще от самой команды разрабов.)
Если говорить именно про продуктовую разработку, то будет полезно:

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

Возможно вы что-то для себя почерпнете по этой теме из конференции Design is Frontend, её можно смотреть бесплатно на Youtube канале. Недавно прошла пятая по счету конференция, видео здесь :blush: Мне понравился рассказ про сетки и важность использования эластичных сеток — вот ссылка на этот доклад.

Также я согласна с @Vyacheslav_Maletskiy о том, что разрабам очень важно оставлять всякие аннотации, стрелочки для показа сценария, примеры, анимации.

Ещё не менее важно удобно организовать файл, чтобы ребята не путались с тем, какие решения просто концепции, какие валидированы и утверждены, а от каких отказались — я концепты складирую на страницу «ideation», то, что уже утверждено, на страницу «solutions», а то, от чего отказались, на страницу «archive»; плюс использую статусы для пометки состояния макета: «new», «progress», «approved», «review», «dev», «complete», «archive» и конечно всё визуально располагаю в блоки с заголовками и заданной иерархией.

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

2 симпатии