Приветствуем, дорогие читатели! Мы с вами уже создали свою первую кнопку, используя фигуры и текст. Но что творится у вас на панели слева? А там, скорее всего, скромно притаились два слоя с названиями «Rectangle» и «Text». Пока это мило и безобидно.
А теперь представьте, что через месяц работы над большим сайтом у вас здесь будет 257 слоев с именами «Rectangle 154», «Frame 43 Copy», «Group 12». Найти нужный элемент станет невозможно. Знакомое чувство?
Чтобы этого не случилось, давайте с самого начала подружимся с панелью слоев. Это ваш главный помощник, а не просто список.
Зачем это нужно? Три причины с аналогией из Excel
Представьте таблицу в Excel, где:
- Все ячейки безымянные.
- Нет листов и группировок.
- Вы не можете закрепить шапку.
Ужас? Точно! Так и с слоями в Figma. Порядок на панели слоев — это:
- Скорость. Найти элемент за 2 секунды, а не за 5 минут.
- Сохранность нервов. Не двигать случайно уже выверенный элемент.
- Командная работа. Ваш коллега (или вы сами через неделю) поймет структуру макета без лишних вопросов.
Давайте разберем три кита, на которых держится порядок в слоях.
Кит 1: Переименование. «Как корабль назовешь...»
Слой «Rectangle 456» ни о чем вам не говорит. А слой «[Кнопка] Главная CTA» рассказывает всю историю.
Как это сделать?
- Кликните дважды на названии слоя на панели слева.
- Введите понятное имя.
- Нажмите Enter.
Совет: Используйте единый стиль именования. Например, для кнопок: [Кнопка] [Страница] [Действие]. Для заголовков: [Текст H1] Главный заголовок.
Кит 2: Группировка.
Вы создали кнопку из прямоугольника и текста. Это логическая пара! Если вы будете двигать их по отдельности, они легко разъедутся. Объедините их в группу.
Как это сделать?
- Выделите на холсте или на панели слоев несколько элементов (зажмите Ctrl и кликайте).
- Нажмите горячую клавишу Ctrl+G (или Cmd+G на Mac).
Что дает?
- Вы можете перемещать всю группу как единый объект.
- Вы сворачиваете группу на панели слоев, чтобы она не отвлекала.
- Не забудьте переименовать «Group» во что-то понятное, например, «Кнопка "Узнать больше"»
Кит 3: Блокировка. «Поставить под стекло»
Вы всё выровняли с ювелирной точностью. И вот вы тянетесь к другому элементу, а случайно сдвигаете фон или логотип... Знакомо? Чтобы этого не случилось, элемент нужно заблокировать.
Как это сделать?
- Выберите слой на панели слева или на холсте.
- Щелкните по нему правой кнопкой мыши и выберите Lock (Заблокировать). Или нажмите супер-горячую клавишу Ctrl+Shift+L (или Cmd+Shift+L).
- Значок замка подскажет, что элемент теперь под защитой. Чтобы разблокировать, повторите действие.
Что дает? Заблокированный элемент нельзя выделить или переместить на холсте. Он в безопасности! Идеально для фонов, шаблонных элементов и логотипов.
Практикум: Наводим порядок в нашей кнопке
Давайте вернемся к кнопке, которую мы создали в прошлый раз, и приведем её в божеский вид:
- Выделите прямоугольник и текст.
- Нажмите Ctrl+G, чтобы сгруппировать их.
- Переименуйте получившуюся группу с Group в [Кнопка "Узнать больше"].
- Заблокируйте группу (Ctrl+Shift+L), чтобы случайно не сдвинуть. Готово! Теперь это аккуратный, защищенный и понятный блок.
Резюме:
- Переименовывайте слои сразу. «Rectangle» — это не имя.
- Группируйте логические элементы. Ctrl+G — ваша магическая кнопка.
- Блокируйте то, что не должно двигаться. Ctrl+Shift+L спасет ваши нервы.
Следуя этим трем простым правилам с самого первого дня, вы будете работать в разы быстрее и приятнее. Ваша панель слоев будет похожа на кухню мишленовского шефа, а не на поле боя.
А вы уже переименовали свои первые слои? Ставьте «палец вверх» и пишите в комментариях — какой ваш главный секрет порядка в работе? Давайте делиться лайфхаками!