Figma для разработчика
Перед тем как приступить к проектированию сценария, дизайнеру стоит обсудить с командой, что он планирует сделать. Вы разработчик, как технический специалист, можете предложить изменения и улучшения, которые помогут избежать подводных камней на этапе реализации. Также при ревью PR вы, возможно, уже встречали реализацию схожих сценариев в других командах и можете поделиться этим с дизайнером.
Сonfluence: Сборка МП СБОЛ для демонстрации сценариев
Вы влияете на продукт с начала его создания и можете подсказать продакту и дизайнеру, как удобнее и быстрее сделать ту или иную функциональность.
Отсмотр первых набросков
Дизайнер должен делиться и обсуждать с разработчиками первые наброски, а не показывать первый раз, когда уже готов окончательный вариант макета. Если это не принято в вашей команде, то самое время внедрить эту практику. На этом этапе вам необходимо:
- убедиться, что у вас есть права на просмотр макетов в Figma, позаботьтесь об этом до финальной передачи макетов;
- уточнить все непонятные моменты в сценарии, например, как ведут себя компоненты, когда клиент пользуется интерфейсом;
- проверить, хватает ли информации от команды для начала разработки, указать, что ещё нужно;
- подсветить сроки разработки кастомных решений, если таковые имеются.
- проверить, соответствуют ли экраны привычным паттернам платформы, нет ли антипаттернов;
- уточнить до старта разработки, переданы ли все токены и иконки для добавления в дизайн-систему.
Сonfluence: Как получить доступ Figma
Работа с макетом в Figma
Макеты получены, все вопросы уточнены, и теперь можно приступать к разработке. Если осталось что-то непонятное, обратитесь в чаты поддержки.
Не приступайте к разработке, пока макеты не утверждены окончательно.
SberVideo: митап 2020 года, ответы на важные вопросы
Как выделить компонент
Иногда при клике выделяются вложенные слои, а не компонент целиком, в таком случае параметры и название компонента в разделе Inspect не отобразятся. Для получения необходимой информации о компоненте нажмите на элемент, который похож на прицел.
Как определить размеры элемента
- Выделите компонент, кликнув по нему. Иногда из-за сложной вложенности не получается попасть на нужный элемент. Для удобства воспользуйтесь древом слоёв слева, постепенно раскрывая элементы, и доберетесь до необходимого.
- Перейдите в правой панели в раздел Inspect.
- Размеры компонента вы сможете найти в секции Properties.
Как найти название иконки, которую использовал дизайнер
- Выделите непосредственно иконку в левой панели Figma.
- Перейдите в раздел Instance в правой панели.
- Прокрутите до конца списка, найдите секцию Instance, нажмите Go to main component.
Второй вариант начала пути.
- Выделите непосредственно иконку в левой панели Figma.
- Кликните по иконке правой кнопкой мыши и выберите в выпавшем контекстном меню Go to main component.
Далее путь одинаковый для обоих вариантов выше.
- В открывшемся разделе icons иконка, к которой вы перешли, будет выделена.
- Перейдите в правой панели в раздел Inspect.
- В правой панели сверху можно посмотреть название иконки. Если оно не поместилось полностью, то продублировано в секции Code. Также название отображено и в левой панели. В iOS иконки используются без символа нижнего подчеркивания и написаны CamelCase'ом.
P.S. Иконки может не быть в коде, если её никто не передал команде дизайн-системы на добавление.
Сonfluence: Заявка на добавление иконки
Какой компонент использован в макете
- Выделите компонент.
- Перейдите в раздел Inspect в правой панели.
- В правой панели, сразу после названия компонента в UI Kit, будет раздел с комментариями к компоненту: Design — полное название в UI Kit, Code — название в коде, WorkFlow — название виджета, Note — полезная информация по компоненту.
Если напротив Code или Workflow стоит символ ✗, значит этого компонента там нет. Перейдя к материнскому компоненту через Go to main component, можно увидеть ещё одно состояние помимо описанных выше, если повешен красный бейдж: deprecated.
- Если у компонента полностью отсутсвует описание, указанное выше, то значит он не из UI Kit дизайн-системы. Дизайнер может подать заявку на добавление компонента в дизайн-систему или получить зелёный свет для реализации кастома.
Сonfluence: Заявка на добавление компонента
Как определить цвет и использовать его в коде?
- Выделите компонент.
- Справа в секции Colors будет указан либо токен, либо цвет из палитры.
Если токена нет и указан hex цвета, то есть вероятность, что токен «слетел». Дизайнеру необходимо переназначить его.
Как проверить макет в тёмной теме
Перед выполнением шагов убедитесь, что у вас установлен плагин VJUX.
- Выделите и скопируйте в буфер экран (или экраны), который хотите посмотреть в другой теме.
- Создайте новый дизайн-файл в Figma в drafts, в нём у вас будут доступны права редактирования.
- Вставьте файлы из буфера на полотно.
- Выделите те части, которые хотите перекрасить и проверить их в тёмной теме.
- Перейдите в меню Plugins.
- Выберите VJUX.
- Выберите тему, в которую надо перекрасить. В первый раз перекраска может происходить с задержкой, последующие — почти моментально.
Какой текстовый стиль использован
- Выделите текстовый блок на макете.
- В правой панели отобразится информация по стилю и токену цвета.
- В Figma указано: Title/Semibold. Соответствие в коде: Title1. В таблице матчинга стилей будет указано:
Title1 (Title/Semibold) Значение в коде / Значение из Figma
Чтобы сопоставить стиль со значением в коде, воспользуйтесь страницей Style Matching в UI Kit в Figma.
SBOL Design Department → NOVA SBOL Libraries → 01・SBOL・iOS・UI kit → Styles SBOL Design Department → NOVA SBOL Libraries → 01・SBOL・Android・UI kit → Styles
Отступы между элементами
Часто бывает, что в макете между компонентами сделаны отступы и их надо повторить в коде. Чтобы узнать отступ от одного компонента до другого, выберите нужный объект и, зажав на клавиатуре option ⌥
( alt
на Windows), наведите курсор на другой компонент.
В iOS в таблицах используйте компонент: SpacerItem— , в Android используйте: DesignSpacerLayout.
Итоговая проверка
После того как вы заканчиваете работу над экраном, обязательно проверьте все ли правильно свёрстано:
- выделите и скопируйте в буфер экран (или экраны), который хотите проверить;
- создайте новый документ, в нём у вас будут доступны права редактирования;
- сделайте скриншот с экрана устройства;
- вставьте скриншот на рабочую область в Figma;
- подгоните под размер макета: на iOS необходимо поделить ширину вставленного файла на 2 (для iPhone с UIScreen.scale = 2) или 3 (если UIScreen.scale = 3), на Android необходимо выставить ширину экрана 360 (например для эмулятора Nexus);
- у скриншота выставьте прозрачность на 50%;
- наложите скриншот на макет (по несовпадающим точкам будет понятно, где ошибка).
Проверка работы
Во время работы над фичей дизайнер обязательно проводит вместе с разработчиком авторский надзор. Показывайте дизайнеру разработанные экраны, скринкасты прохождения сценария, отдельно уделите внимание сложным компонентам и их работе. Старайтесь больше обсуждать, это позволит уже на этапе разработки находить и исправлять неточности в сценариях, что ускорит запуск вашей фичи.
После того как новый сценарий разработан и протестирован, вам предстоит этап ПСИ. И чем больше вы взаимодействовали между собой, тем проще он пройдёт.
Удачного выхода в пром и развития вашей фичи!