Как называть слои в фигме

Как называть слои в Фигме — вопрос, который на первый взгляд кажется тривиальным, но на практике определяет скорость работы команды, качество ревью, масштабируемость дизайна и даже успешность продукта. Неправильно названные слои превращают даже самый красивый макет в навигационный лабиринт, где разработчики тратят часы на поиск нужного элемента, а дизайнеры — на переименование сотен объектов перед передачей. Стандартизация именования — это не вопрос эстетики, а инженерная дисциплина, без которой невозможно масштабировать дизайн-системы.

Почему именование слоёв критично для команды

Представьте: вы — разработчик. Вам нужно найти кнопку «Зарегистрироваться» в макете, который создавался двумя дизайнерами неделю назад. В панели слоёв вы видите: «Button 1», «Group 15», «Ellipse 3», «Text 2». Вы тратите 15 минут, чтобы найти нужный элемент. Теперь представьте, что вместо этого вы видите: «Primary Button — Sign Up — Default». Разница очевидна. Согласно исследованию InVision, 68% разработчиков тратят более 20% своего времени на поиск и интерпретацию дизайнов из-за неструктурированной номенклатуры слоёв. Это не просто неудобство — это убытки в виде пропущенных дедлайнов, ошибок в реализации и снижения качества продукта.

Именование — это не про эстетику интерфейса, а про эстетику процесса. Когда каждый слой имеет логичное, предсказуемое имя, вы создаёте не просто макет — вы создаёте систему, которую можно масштабировать, аудитировать и передавать между командами. Это особенно важно в больших проектах: мобильные приложения с десятками экранов, веб-платформы с 50+ компонентами, дизайн-системы с сотнями вариантов состояний.

Основные принципы именования в Фигме

Существует пять фундаментальных принципов, которые должны лежать в основе любой системы именования:

1. Семантичность — имя должно говорить о назначении элемента, а не о его форме. Не «Rectangle 4», а «Card — Product Preview».
2. Последовательность — одинаковые элементы должны иметь одинаковый формат имени. Если одна кнопка называется «Primary Button — Login», то вторая не должна быть «Login Button».
3. Иерархичность — имя отражает структуру: родитель → дочерний элемент. Например: «Header → Logo», «Modal → Close Button».
4. Однозначность — избегайте двусмысленностей. «Text» — плохо. «Heading 1 — Hero» — хорошо.
5. Масштабируемость — система должна работать и на 10 слоях, и на 1000. Не используйте номера, если они не несут смысловой нагрузки.

Эти принципы не требуют сложных инструментов — только дисциплины и чёткого понимания, что именно вы хотите передать через имя.

Структура имени: как собрать правильный шаблон

Правильное имя слоя — это не случайный набор слов. Это структурированный шаблон, состоящий из 3–4 обязательных элементов:

— Тип элемента (Button, Text, Icon, Image, Frame)
— Назначение / функция (Sign Up, Close, Logo)
— Состояние (Default, Hover, Disabled, Active)
— (Опционально) Позиция / контекст (Header, Footer, Sidebar)

Формат:
[Тип] — [Назначение] — [Состояние] — [Контекст]

Примеры:
— `Button — Sign Up — Default`
— `Icon — Close — Hover — Modal`
— `Text — Heading 1 — Primary — Hero`
— `Image — Product Preview — Default — Card`

Если состояние не меняется — его можно опустить. Если контекст очевиден (например, все кнопки в модальном окне), его тоже можно не указывать. Главное — сохранять единообразие.

Как именовать разные типы слоёв: кнопки, текст, иконки, компоненты

Разные типы элементов требуют разных подходов. Ниже — конкретные рекомендации по основным категориям.

Кнопки

Используйте тип и состояние. Для вариаций — добавляйте стиль:

— `Button — Primary — Default`
— `Button — Secondary — Hover`
— `Button — Destructive — Disabled`
— `Button — Icon Only — Close`

Для кнопок с иконками внутри — уточните, что это иконка:
`Button — Search — Default` → внутри: `Icon — Search — Default`

Текст

Указывайте уровень и стиль. Не «Text 1», а:

— `Text — Heading 1 — Primary`
— `Text — Body — Secondary`
— `Text — Caption — Error`
— `Text — Button Label — Primary`

Если используется кастомный стиль (например, «Title XL»), добавьте его в название:
`Text — Title XL — Hero`

Иконки

Имя должно отражать смысл, а не форму:

— `Icon — Search`
— `Icon — User`
— `Icon — Chevron Right`
— `Icon — Warning — Error`

Для иконок в кнопках или тексте — используйте контекст:
`Icon — Close — Modal`
`Icon — Star — Filled`

Компоненты и варианты

Именуйте компоненты по их логической роли, а не по внешнему виду:

— `Component — Card — Product`
— `Component — Modal — Alert`
— `Component — Navigation — Primary`

Варианты компонентов:
`Component — Card — Product / Default`
`Component — Card — Product / Hover`
`Component — Card — Product / Loading`

Используйте `/` как разделитель — Фигме автоматически группирует их в библиотеке.

Фреймы и группы

Фреймы — это контейнеры. Их имена должны отражать роль на экране:

— `Frame — Header`
— `Frame — Hero Section`
— `Frame — Footer`
— `Frame — Modal Overlay`

Группы внутри — как дочерние элементы:
`Header → Logo`
`Header → Navigation → Menu Item 1`

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают одни и те же ошибки. Вот самые распространённые:

• Использование номеров: «Button 3», «Text 12». Это временные метки, которые теряют смысл при изменении структуры.
• Слишком общие названия: «Rectangle», «Group», «Text». Не дают никакой информации.
• Смешение языков: «Кнопка — Войти» + «Button — Sign Up». Это путает разработчиков и нарушает единообразие.
• Неиспользование состояний: «Button — Login» без указания Hover/Disabled. Это делает прототип неполноценным.
• Длинные, разговорные имена: «Кнопка, по которой пользователь кликает, чтобы войти в систему». Это не имя — это описание.

Чтобы избежать ошибок, используйте чек-лист перед экспортом:

• Все ли слои имеют осмысленные имена?
• Нет ли номеров или «Group»?
• Состояния указаны для всех интерактивных элементов?
• Одинаковые элементы имеют одинаковое имя?
• Имя не превышает 4–5 слов?

Как внедрить стандарты именования в команде

Система не работает, если её знает только один человек. Чтобы внедрить стандарты:

1. Создайте документ-стандарт. Это не документ в Google Docs — это живой чек-лист в Notion или Confluence с примерами и запретами.
2. Используйте шаблоны в Фигме. Создайте пустые компоненты с предустановленными именами: «Button — Primary — Default». Делайте их шаблонами для новых дизайнеров.
3. Добавьте проверку в ревью. Включите пункт «Имена слоёв» в checklist ревью дизайна. Без этого — стандарты не приживутся.
4. Обучайте новичков. Проводите 15-минутные сессии «Как мы именуем слои» на каждом онбординге.
5. Автоматизируйте. Используйте плагины типа «Layer Namer» или «Figma Auto-Name», чтобы подсказывать имена в реальном времени.

Экспертное мнение: как это делают топовые команды

Команды из Apple, Google и Telegram используют одинаковую логику:
— Все имена — в нижнем регистре, с пробелами, без дефисов в словах.
— Состояния — через `/`, как в компонентах.
— Иконки — без «SVG» в названии.
— Текст — строго по тайпографической иерархии.

Они не гонятся за «красотой» имени — они гонятся за предсказуемостью.

Частые вопросы и ответы

• Можно ли использовать английские имена, если команда русскоязычная?
  Да. Разработчики, тестировщики и менеджеры чаще работают с англоязычными системами. Использование английского — стандарт индустрии. Главное — единообразие. Не смешивайте «Кнопка» и «Button».
• Как именовать слои в адаптивных макетах (мобильный/десктоп)?
  Добавляйте контекст: `Button — Sign Up — Mobile`, `Button — Sign Up — Desktop`. Или используйте фреймы: `Frame — Mobile — Hero`, `Frame — Desktop — Hero`.
• Нужно ли именовать все слои, даже если они не интерактивны?
  Да. Даже фоновые прямоугольники, линии и декоративные элементы. Они влияют на структуру, экспорт и анимации. Пример: `Background — Light Gray — Hero`.
• Как обрабатывать слои, которые являются частью компонента, но не должны быть переименованы?
  Используйте префикс `//` — Фигме игнорирует такие имена при экспорте. Например: `// Hidden for export — Background`.
• Как сделать, чтобы все дизайнеры следовали стандарту?
  Сделайте его частью процесса: шаблоны в библиотеке, проверка в ревью, штрафы за нарушения (например, возврат макета). Без механизма контроля — стандарты не работают.

Заключение

Именование слоёв в Фигме — это не мелочь, а фундаментальная практика, которая определяет, насколько быстро и точно ваш дизайн превратится в продукт. Это то, что отличает профессионалов от новичков, масштабируемые проекты от хаотичных макетов, команды, которые работают в унисон, от тех, кто тонет в собственных файлах.

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

• Имя слоя должно отвечать на вопросы: «Что?», «Где?», «В каком состоянии?»
• Используйте шаблон: [Тип] — [Назначение] — [Состояние]
• Никогда не используйте номера, «Group», «Text» без контекста
• Согласуйте стандарты с командой и внедряйте их в процессы
• Автоматизация и чек-листы — ваше оружие против хаоса