Figma: страницы, секции и разделители в левой панели
Файл на 300 фреймов листается одинаково плохо независимо от того, насколько хорош сам дизайн.
Страницы и секции — два уровня порядка, и они не заменяют друг друга.
Где список страниц
Документация: список страниц открывается щелчком по названию текущей страницы в левой панели.
Практика: в панели Layers видно только содержимое текущей страницы, поэтому «пропавший» фрейм почти всегда лежит на другой странице.
Только в дизайн-файлах
Документация: страницы есть в файлах Figma Design.
В FigJam и Slides этой структуры нет.
Практика: перенос дизайна в FigJam страницы не сохранит — останутся только фреймы.
Переименование и порядок
Практика: страницы переименовываются двойным щелчком, перетаскиваются для изменения порядка.
Практика: порядок в списке — не алфавитный, а ручной, поэтому «Design» может стоять ниже «Archive» и это нормально.
Разделитель
Документация: если название страницы начинается с дефиса, страница превращается в разделитель — визуальную группировку в списке.
Практика: разделитель нельзя сделать из страницы, в которой уже есть содержимое.
Практика: рабочий приём — завести пустую страницу, назвать её «— Прототипы», а потом складывать нужные страницы под ней.
Лимит холста
Документация: холст ограничен примерно от −130 000 до +130 000 по каждой оси.
Практика: за пределы выйти нельзя, и при плотной раскладке большой библиотеки это реально мешает.
Практика: если фреймы «не влезают», пора разносить их по страницам, а не утрамбовывать.
Что такое секция
Документация: Section — контейнер, который группирует объекты на холсте и даёт им общую подпись.
Практика: секция не является фреймом: она не обрезает содержимое и не задаёт layout.
Как создать
Практика: инструмент Section в панели, сочетание Shift+S, либо выделить объекты, вызвать контекстное меню и выбрать Wrap in new section.
Практика: второй способ удобнее, когда содержимое уже нарисовано.
Вложенность
Документация: секции живут на верхнем уровне холста.
Их можно вкладывать друг в друга, но нельзя поместить внутрь фрейма или группы.
Практика: это ключевое ограничение: «секция внутри карточки» не получится, а «карточка внутри секции» — да.
Навигация
Практика: двойной щёлчок по иконке секции в панели Layers перемещает вид к ней.
Практика: на большом файле это быстрее, чем скроллить холст.
Типовая раскладка
Практика: Explorations — черновики и варианты, которые никто не должен верстать.
Designs — актуальные макеты по экранам.
Components — библиотека компонентов и стилей.
Archive — всё, что было заменено, но может понадобиться.
Практика: пятая страница «Dev» нужна, если разработчики ходят в файл: там лежат только финальные фреймы.
Секции внутри страницы
Практика: одну страницу Designs удобно делить секциями по флоу: онбординг, оплата, настройки.
Практика: секции читаются и в Dev Mode как ориентир, поэтому подписи должны быть осмысленными, а не «Section 12».
Порядок уборки
- Вынесите черновики на Explorations.
- Соберите компоненты на отдельную страницу.
- Закройте старые макеты в Archive.
- Разделите Designs на секции по флоу.
- Переименуйте секции по-человечески.
- Удалите пустые страницы.
- Проверьте, что ссылки прототипа не ведут в архив.
Практика: шаг 7 — обязательный: удаление страницы рвёт прототипные связи.
Где ломается
Фрейм не находится. Он на другой странице.
Разделитель не создаётся. На странице уже есть контент.
Секция не вставляется в фрейм. Секции не могут быть вложены во фреймы.
Прототип перестал работать. Удалена или переименована страница с экранами.
Файл тормозит. Слишком много объектов на одной странице.
FAQ
Как открыть список страниц?
Щёлкнуть по названию текущей страницы в левой панели.
Как сделать разделитель?
Назвать пустую страницу с дефиса в начале.
Чем секция отличается от фрейма?
Секция только группирует и подписывает, фрейм задаёт layout и обрезку.
Можно ли вложить секцию во фрейм?
Нет, только наоборот.
Сколько страниц можно создать?
Ограничение задаёт не количество страниц, а лимит координат холста.
Почему страницы важнее фреймов
Практика: фреймы решают задачу «как это выглядит», страницы — «что здесь лежит».
Практика: на файле без страниц поиск по названию слоя выдаёт десятки совпадений: «Card» встречается в каждом макете.
Практика: когда макеты разнесены по страницам, в поиске остаётся только то, что относится к текущей задаче.
Практика: второе следствие — скорость открытия. Файл с сотнями фреймов на одной странице подгружается целиком, страница с сотней — заметно быстрее.
Практика: третье — общекомандное. Новый человек в проекте за две минуты понимает, где черновики, где финал и где архив.
Секции и экспорт
Практика: при экспорте ассетов область выбора ограничивается выделением, а не секцией целиком.
Практика: поэтому секция не заменяет имя фрейма: экспортируемый объект всё равно должен называться осмысленно.
Практика: зато секция помогает при пакетном выделении: щёлчок по подписи секции выделяет всё её содержимое, и дальше можно применить общий экспорт.
Практика: ещё одна польза — комментарии. Оставить замечание к секции проще, чем к каждому фрейму по отдельности.
Совместная работа
Практика: страницы видны всем участникам файла и не требуют отдельного доступа.
Практика: секции тоже видны всем, но они не влияют на права: ограничить доступ к отдельной странице внутри файла нельзя.
Практика: если часть макетов не должна попадать к подрядчику, это решается отдельным файлом, а не порядком на странице.
Практика: для передачи в разработку обычно используют отдельную страницу с финальными фреймами и ссылку на неё — так Dev Mode открывается сразу в нужном месте.
Когда порядок навести уже поздно
Практика: файл, в котором 600 фреймов на одной странице, разбирать тяжело, но можно.
Практика: начните с архива: вырежьте всё, что старше двух месяцев и не используется в прототипах, на отдельную страницу.
Практика: затем соберите компоненты: всё, что повторяется больше двух раз, переносится на страницу библиотеки и заменяется экземплярами.
Практика: после этого станет видно, что действительно уникально, и это можно разложить по секциям.
Практика: не пытайтесь сделать всё за один вечер: файл, который рос год, разбирают несколько дней.