Как переименовать слой в фигме

Переименовать слой в Figma — простая, но критически важная операция для поддержания порядка в проекте. Делается это быстро: достаточно дважды щёлкнуть по названию слоя в панели «Layers» или нажать Enter при выделенном элементе. Однако за этим действием скрываются тонкости: от корректного именования до влияния переименования на компоненты, инстансы и автолейаут. В этой статье мы не просто расскажем, как изменить название, а покажем, как сделать это эффективно, чтобы ваш дизайн-система оставалась читаемой, масштабируемой и удобной для командной работы.

Зачем переименовывать слой в Figma

Каждый дизайн в Figma состоит из множества слоёв: фигур, текстовых блоков, изображений, фреймов и компонентов. По умолчанию Figma присваивает им обезличенные названия вроде «Rectangle 1», «Text», «Frame». Такие имена не несут смысловой нагрузки и затрудняют навигацию по проекту, особенно если макет содержит сотни элементов.
Переименование слоёв — это не просто прихоть перфекционистов. Это необходимость для эффективной работы. Чёткие и понятные названия позволяют быстро находить нужные элементы, упрощают совместную работу с другими дизайнерами, разработчиками и стейкхолдерами. Представьте, что вы открываете чужой файл: без логичной структуры именования вам придётся дешифровать каждый слой вручную.
Кроме того, правильно названные слои критически важны при использовании плагинов, автоматизации и экспорте в код. Современные инструменты, такие как Anima, Zeplin или Figma to React, опираются на имена слоёв при генерации компонентов. Если слой называется «Frame 7», система не сможет понять, что это шапка сайта или карточка продукта.

Как переименовать слой в Figma: пошаговая инструкция

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

1. Откройте панель Layers. Она находится в левой части интерфейса Figma, рядом с панелью инструментов. Убедитесь, что она видима (горячая клавиша Y включает/выключает панель).
2. Найдите нужный слой. Прокрутите список или воспользуйтесь поиском по имени (в верхней части панели Layers доступно поле поиска).
3. Дважды щёлкните по имени слоя. Курсор сразу активируется, и вы сможете ввести новое название.
4. Введите новое имя и нажмите Enter. Изменения применяются мгновенно.

Альтернативный способ — использовать горячие клавиши:

• Выделите объект на холсте.
• Нажмите Enter — это активирует режим редактирования имени.
• Введите новое название и снова нажмите Enter, чтобы подтвердить.

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

Работа с мобильными устройствами

На планшете или смартфоне через Figma Mobile процесс немного отличается:

• Коснитесь слоя в панели Layers.
• Удерживайте нажатие около 1–2 секунд, пока не появится контекстное меню.
• Выберите пункт «Rename».
• Введите новое имя с помощью экранной клавиатуры.

Figma Mobile адаптирует интерфейс под сенсорное управление, но функциональность остаётся полной. Переименование доступно даже в офлайн-режиме, изменения синхронизируются при подключении к интернету.

Особенности переименования компонентов и инстансов

Когда дело касается компонентов, ситуация усложняется. Компонент в Figma — это шаблон, который может быть использован многократно через инстансы. Переименование здесь влияет не только на один элемент, но и на всю систему.
Если вы переименуете основной компонент (master component), все его инстансы автоматически обновят своё отображение в панели Layers. Однако важно понимать: само имя инстанса не меняется, если оно было переопределено вручную. Figma позволяет задавать уникальные имена инстансам, и в этом случае они становятся независимыми.

Как безопасно переименовать компонент

• Убедитесь, что никто из команды не работает с этим компонентом в данный момент.
• Проверьте, не были ли инстансы уже переименованы — это можно увидеть по жирному шрифту в панели Layers.
• Измените имя master-компонента, дважды щёлкнув по нему в библиотеке компонентов.
• Уведомите команду о внесённых изменениях, особенно если используется design system.

Лучшие практики именования слоёв

Простое переименование — это только начало. Чтобы получить максимальную пользу, нужно придерживаться системы. Профессиональные дизайнеры используют конвенции именования, которые делают проекты самодокументируемыми.
Например, вместо «Button» лучше написать «CTA Button / Primary / Large». Такое имя сразу даёт понять: это кнопка призыва к действию, основного цвета, большого размера. Это особенно важно при работе с автолейаутами и variant-компонентами.
Популярные подходы к именованию:

• BEM (Block__Element—Modifier) — заимствован из вёрстки. Пример: Header__Search--Active.
• Слоистая нотация — через слэш. Пример: Product Card / Image / Placeholder.
• Семантическое именование — отражает функцию, а не тип. Вместо «Frame» — «User Profile Modal».

Выбор системы зависит от масштаба проекта и команды. В маленьких прототипах можно обойтись простыми названиями, но в крупных дизайн-системах стандартизация обязательна.

Шаблон для именования компонентов

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

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

• Оставить стандартные названия. «Rectangle 3» ничего не говорит о назначении слоя. Решение: переименовывайте всё сразу после создания.
• Использовать пробелы и спецсимволы. Хотя Figma их допускает, лучше применять дефисы или нижнее подчёркивание. Это важно для совместимости с кодом.
• Переименовывать инстанс вместо мастера. Это создаёт путаницу. Правило: сначала правьте мастер, потом — при необходимости — инстансы.
• Не использовать кириллицу. Да, Figma поддерживает русские буквы, но если проект передаётся разработчикам, лучше придерживаться английского.

Проверочный чек-лист перед публикацией файла

• Все ключевые слои имеют осмысленные имена?
• Компоненты названы по единой системе?
• Инстансы, требующие уникального имени, переименованы?
• Нет дубликатов или временных слоёв с именами вроде «Copy 2»?
• Скрытые и неиспользуемые слои удалены или помечены?

Экспертное мнение

Он также делится практикой: «Мы используем цветовые метки в названиях: [DEV] для элементов в разработке, [OLD] для устаревших. Figma отображает квадратики цвета в панели, и это работает как визуальный фильтр.»

Вопросы и ответы

Заключение

Переименование слоя в Figma — это не просто техническая операция, а часть культуры качественного дизайна. За каждым названием стоит забота о читаемости, масштабируемости и командной эффективности. Даже такой простой шаг, как замена «Frame 1» на «Header Desktop», может сэкономить часы поиска и объяснений.

• Переименовывайте слои сразу после создания — это привычка, которая экономит время.
• Используйте единые правила именования, особенно в дизайн-системах.
• Будьте осторожны с компонентами: изменение мастера влияет на инстансы.
• Автоматизируйте процесс с помощью плагинов для массового переименования.
• Регулярно проводите «генеральную уборку» — удаляйте дубликаты и временные слои.