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