Как и зачем правильно называть элементы в Figma
Макеты — это не только картинки, это еще и документация. Документация требует структуры и понятности. Понятные названия хотя бы для элементов первого уровня уже существенно упрощают восприятие макетов коллегами.
Три главных предмета в фокусе внимания
-
Ваш коллега
Разработчику или другому дизайнеру нужно разбираться в вашем макете. Эти люди будут его не только разглядывать, но и читать.
-
Левая панель Figma
Критерий хорошего макета — через левую панель понятна структура интерфейса и где вы сейчас находитесь. Для этого нужно описать каждый элемент.
-
Собеседование
Когда при устройстве на следующую работу вы будете показывать свои результаты, то бардак в нейминге вам не простят, а переделывать его вы уже не захотите.
5 советов,
как делать хорошо
- Прочтите названия элементов на канве
Figma показывает названия элементов первого уровня, и сразу видно какие названы по умолчанию.
- Начните с первого уровня
Переименовать сразу все — трудоемкая задача. Пусть хотя бы элементы первого уровня будут иметь осмысленные имена.
- Используйте спецсимволы: «!», «+» и т.д.
Например, плюсом можно помечать элементы, с которыми вы закончили работать. Для этого есть и другие инструменты, но начните хотя бы с простого.
- СМЕЛО ИСПОЛЬЗУЙТЕ КАПСЛОК
Например, для визуального разделения разных блоков.
- Используйте «/» и «_»
«/» помогает сразу указать вложенность или вариативность в компонентах, «_» подсказывает Figma, какие из элементов экспортируемые, а какие нет.
Например
Заказчик передавал макеты разработчикам без нашего участия. Аккуратный нейминг был одним из способов документирования.
Вместе с разработчиками выработали правила, что как именовать, чтобы всем было понятно.
Хороший образец
Нашей задачей было усилить штатных дизайнеров компании. Мы выработали общие принципы, чтобы лучше понимать работу друг друга.
Так делать не надо
Frame 1593/Frame 1984/Frame 435/rectangle.
Инструменты
Левая панель Figma
Ориентироваться по структуре и названиям
Нюансы нейминга есть в помощи
«Соглашение о наименованиях»
Договоритесь с разработкой, как называть элементы
Для работы с текстами
Есть люди (и их много), которые воспринимают прототип интерфейса в первую очередь как структуру. А структура требует понятности, в том числе через наименование элементов. Как ни странно, сами картинки для таких людей — дело десятое. Подумайте об этих людях, обычно они ваши работодатели.
Ольга Павлова, директор по развитию «Собаки Павловой»
Другие шпаргалки
Ищете подрядчика или команду?
Давайте обсудим вашу задачу.
Хотите у нас научиться?
1000+ упражнений по дизайну интерфейсов.
eduhund.com
Собака Павлова
На сайте есть упоминания социальных сетей, признанных на территории РФ экстремистскими организациями
Кое-что показываем и рассказываем на весь интернет
, интересное в 
, полезное на 
Санкт-Петербург • Подгорица • Хайфа
Адрес для почтовых отправлений: 194291, Санкт-Петербург, ул Руднева, д. 9 к. 3 литера А, кв. 169