Чек-лист для проверки компонентов в Figma
Данный чек-лист не является всеобъемлющим. Он содержит базовые рекомендации для самопроверки при работе с компонентами UI-кит.
Всем привет!
Меня зовут Даниил Видишев, я работаю продуктовым дизайнером в INLY.
Наша команда делится опытом и знаниями со всеми желающими. Вот, например, наша База знаний о которой я рассказывал в своем канале.
А сейчас — чек-лист.
Зачастую на собеседованиях невозможно определить точный уровень того или иного soft скилла у дизайнера, особенно у младшего. В работе может оказаться, что есть сложности с внимательностью, вдумчивостью и т.п.
Дизайнер быстрее бежит показать, забывая о том, что проговаривали на звонке. Приходится снова проговаривать. Тратится время. Замедляется рост.
Именно поэтому приходится заниматься оптимизацией: создавать процессы, писать регламенты, инструкции — все то, что нужно для сокращения затрачиваемого времени, на повторение одних и тех же вещей, так и для развития необходимого навыка. Стараюсь оптимизировать те места, где проблемы возникают на регулярной основе.
Что мне дает чек-лист:
- Рассказывает о базовых требованиях команды
- Подсказывает, что нужно делать, «если»
- Прокачивает внимательность
Погнали!
1. Используйте общепринятые названия компонентов
Понятные названия помогут другим быстрее разобраться в том, что вы имеете в виду и как это реализовывать
- Анализируйте крупные дизайн-системы и читайте описания компонентов
- Договаривайтесь с разработчиками о названиях, если есть такая возможность
- Не используйте кириллицу, потому что в коде будет латиница
Примечание: вводить свои названия не запрещено. Главное, чтобы команда одинаково понимала, что они означают
2. Используйте понятные названия свойств компонента (properties)
Аналогично п.1 помогут быстрее разобраться в том, что вы имеете в виду
- Создавайте визуальную иерархию
- Если сомневаетесь в том, как назвать нужное свойство, то анализируйте крупные дизайн-системы в Figma
- Если чувствуете, что не хватает знаний, то посмотрите урок по теме Properties
Примечание: если работаете в команде и у вас есть UI-kit, то сначала проанализируйте аналогичные решения в других компонентах и только потом уточняйте у коллег
3. Проверьте стили цвета и текста
Примененные стили влияют на скорость внесения изменений и сокращение количества ошибок
- Просто выделите нужный объект, который хотите проверить, и воспользуйтесь selection colors в правой панели Figma
Примечание: если работаете в команде и не знаете, какой стиль применить, то сначала проанализируйте аналогичные решения у других компонентов и только потом уточняйте у коллег
4. Соблюдайте чистоту слоев
Слева зло, с которым невозможно работать другим участникам команды
- Используйте понятные названия
- Сохраняйте последовательность: если на макете описание находится под заголовком, то в слоях должно быть то же самое
- Не создавайте лишних вложенностей, если это не обусловлено строением компонента
- Не оставляйте скрытых слоев, если они не скрыты свойством компонента Boolean
- Не используйте Group внутри компонента без необходимости
Примечание: для сброса слоев на дефолтные названия используйте плагин
5. Придерживайтесь целых значений в пикселях
Размеры компонента и его вложенных элементов должны быть выражены целыми значениями
- Не используйте инструмент Scale (K) при работе с компонентом, текстом и элементами внутри
- Объекты, которые имеют дробные значения (например, иконки или изображения), должны находиться в контейнерах
Примечание: используйте плагин для округления дробных значений
6. Поверьте Resizing на корректную работу
Ваши компоненты будут работать не случайным образом, а именно так, как вы задумали
- Если чувствуете, что не хватает знаний по теме, то посмотрите урок по работе с AutoLayout и Frame
7. Добавляйте интерактивность
Это поможет улучшить опыт взаимодействия с вашими прототипами и сделать их более продуманными и понятными
- Если чувствуете, что не хватает знаний по теме, то посмотрите урок по работе c Interactive components
8. Используйте качественный растр
Растровое изображение для обычного монитора 1:1 на Retina будет выглядеть размытым
- Добавляйте изображения как минимум в двухкратном размере (х2)
Чеклист — простой, но в то же время действенный рецепт, чтобы фокусировать обучение на более приоритетных вещах