Чек-лист для проверки компонентов в Figma

Данный чек-лист не является всеобъемлющим. Он содержит базовые рекомендации для самопроверки при работе с компонентами UI-кит.

Всем привет!
Меня зовут Даниил Видишев, я работаю продуктовым дизайнером в INLY.

Наша команда делится опытом и знаниями со всеми желающими. Вот, например, наша База знаний о которой я рассказывал в своем канале.

А сейчас — чек-лист.

Зачастую на собеседованиях невозможно определить точный уровень того или иного soft скилла у дизайнера, особенно у младшего. В работе может оказаться, что есть сложности с внимательностью, вдумчивостью и т.п.

Дизайнер быстрее бежит показать, забывая о том, что проговаривали на звонке. Приходится снова проговаривать. Тратится время. Замедляется рост.

Именно поэтому приходится заниматься оптимизацией: создавать процессы, писать регламенты, инструкции — все то, что нужно для сокращения затрачиваемого времени, на повторение одних и тех же вещей, так и для развития необходимого навыка. Стараюсь оптимизировать те места, где проблемы возникают на регулярной основе.

Что мне дает чек-лист:

Рассказывает о базовых требованиях команды
Подсказывает, что нужно делать, «если»
Прокачивает внимательность

Погнали!

Понятные названия помогут другим быстрее разобраться в том, что вы имеете в виду и как это реализовывать

Чек-лист для проверки компонентов в Figma

Анализируйте крупные дизайн-системы и читайте описания компонентов
Договаривайтесь с разработчиками о названиях, если есть такая возможность
Не используйте кириллицу, потому что в коде будет латиница

Примечание: вводить свои названия не запрещено. Главное, чтобы команда одинаково понимала, что они означают

Аналогично п.1 помогут быстрее разобраться в том, что вы имеете в виду

Создавайте визуальную иерархию
Если сомневаетесь в том, как назвать нужное свойство, то анализируйте крупные дизайн-системы в Figma
Если чувствуете, что не хватает знаний, то посмотрите урок по теме Properties

Примечание: если работаете в команде и у вас есть UI-kit, то сначала проанализируйте аналогичные решения в других компонентах и только потом уточняйте у коллег

Примененные стили влияют на скорость внесения изменений и сокращение количества ошибок

Просто выделите нужный объект, который хотите проверить, и воспользуйтесь selection colors в правой панели Figma

Примечание: если работаете в команде и не знаете, какой стиль применить, то сначала проанализируйте аналогичные решения у других компонентов и только потом уточняйте у коллег

Слева зло, с которым невозможно работать другим участникам команды

Используйте понятные названия
Сохраняйте последовательность: если на макете описание находится под заголовком, то в слоях должно быть то же самое
Не создавайте лишних вложенностей, если это не обусловлено строением компонента
Не оставляйте скрытых слоев, если они не скрыты свойством компонента Boolean
Не используйте Group внутри компонента без необходимости

Примечание: для сброса слоев на дефолтные названия используйте плагин

Размеры компонента и его вложенных элементов должны быть выражены целыми значениями

Не используйте инструмент Scale (K) при работе с компонентом, текстом и элементами внутри
Объекты, которые имеют дробные значения (например, иконки или изображения), должны находиться в контейнерах

Примечание: используйте плагин для округления дробных значений

Ваши компоненты будут работать не случайным образом, а именно так, как вы задумали