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

В Figma — одном из самых популярных инструментов для дизайна интерфейсов — создание новых листов (frames) является фундаментальной операцией, без которой невозможно построить даже простой макет. Листы — это контейнеры, в которых размещаются элементы интерфейса: кнопки, текст, изображения, компоненты. Они определяют структуру экрана, задают размеры, масштаб и позиционирование. Независимо от того, работаете ли вы над мобильным приложением, веб-сайтом или прототипом для презентации, умение быстро и грамотно создавать новые листы напрямую влияет на скорость работы и чистоту структуры проекта. Многие новички сталкиваются с путаницей между слоями, холстами и листами, что приводит к хаотичным файлам и потерям времени. Понимание того, как создавать, настраивать и управлять листами, — это не просто технический навык, а ключ к профессиональной организации дизайна.

Как создать новый лист в Figma

Создание нового листа в Figma — одна из самых простых, но при этом самых важных операций. Даже если вы новичок, вы сможете сделать это за несколько секунд. Первый способ — через инструмент Frame. Найдите его на левой панели инструментов: значок выглядит как прямоугольник с пунктирной рамкой. Кликните по нему, затем щелкните и удерживайте на холсте, чтобы нарисовать область нужного размера. При этом Figma автоматически создаст лист с прозрачным фоном и назовёт его «Frame».

Второй способ — использовать горячие клавиши. Нажмите F на клавиатуре — инструмент Frame активируется. Теперь просто кликните на холсте, и Figma создаст лист с размером по умолчанию (обычно 1440×1024). Чтобы сразу задать размер под конкретное устройство, нажмите Shift + F — откроется меню предустановленных размеров: iPhone, iPad, MacBook, десктоп, телевизор и другие. Выберите нужный — и лист будет создан с идеальными пропорциями.

Если вы хотите создать лист без рисования, просто нажмите Ctrl + Shift + F (или Cmd + Shift + F на Mac). Это создаст лист с размером, равным последнему выбранному вами шаблону. Эта комбинация особенно полезна, когда вы работаете над несколькими экранами одного приложения и вам нужно быстро копировать структуру.

Типы листов и когда их использовать

Figma поддерживает несколько типов листов, и понимание их различий позволяет работать эффективнее. Основные типы — это обычные листы, лайтбоксы и макетные сетки.

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

Лайтбоксы — это листы с затемнённым фоном вокруг, которые используются для модальных окон, попапов и диалоговых окон. Чтобы создать лайтбокс, выберите лист, затем в панели свойств найдите опцию Overlay и установите её в «Dark» или «Light». Это автоматически добавит затемнение за листом, имитируя эффект модального окна. Такой подход особенно полезен при прототипировании взаимодействий.

Макетные сетки — это не отдельный тип листа, но их можно применять внутри листов. Включите сетку (Layout Grid) в панели свойств листа, чтобы задать колонки, отступы и базовые единицы. Это критично важно при работе над адаптивными интерфейсами, где точность позиционирования влияет на восприятие пользователем.

Представьте, что вы создаёте интерфейс мобильного банка. Вы начинаете с листа «Экран входа» — обычный лист. Затем добавляете лайтбокс для окна подтверждения транзакции. Внутри него — ещё один лист с кнопками. Такая иерархия делает файл структурированным, а команду — понимающей, как устроен интерфейс.

Горячие клавиши и шаблоны листов

Экономия времени в Figma — это не миф, а результат использования горячих клавиш и шаблонов. Вот ключевые комбинации, которые стоит запомнить:

1. F — активировать инструмент Frame
2. Shift + F — открыть меню предустановленных размеров
3. Ctrl + Shift + F — создать лист с последним использованным размером
4. Alt + клик на существующем листе — скопировать его с сохранением всех свойств
5. D — дублировать выделенный лист
6. Ctrl + Shift + D — дублировать с перемещением на 10 пикселей

Для постоянной работы с определёнными размерами (например, 375×812 для iPhone 14) рекомендуется создать собственный шаблон. Для этого создайте лист с нужными параметрами, выделите его, нажмите правой кнопкой мыши и выберите “Create Template”. Теперь этот шаблон будет доступен в библиотеке шаблонов (Templates) в панели слева. Вы сможете добавлять его в любой проект одним кликом.

Также обратите внимание на функцию Auto Layout — хотя она не создаёт лист, она автоматически адаптирует его содержимое. Если вы помещаете несколько элементов в лист и включаете Auto Layout, лист будет автоматически подстраиваться под высоту и ширину содержимого. Это особенно ценно при создании компонентов кнопок, списков и форм.

Частые ошибки при создании листов и как их избежать

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

• Создание листов без размера — листы с нулевыми размерами (0×0) не видны на холсте, но занимают место в структуре. Всегда проверяйте, что лист имеет видимые размеры. Если он «исчез» — выделите его в панели Layers и проверьте значения Width и Height.
• Использование одного листа для нескольких экранов — это приводит к путанице при прототипировании. Каждый экран должен быть отдельным листом. Даже если экраны похожи, лучше дублировать, чем смешивать.
• Неправильная вложенность — лист внутри листа, который внутри другого листа, без логики — это «пирог» из слоёв. Структура должна быть плоской и понятной: один экран — один лист. Вложенные листы — только для компонентов (например, шапки, подвала).
• Игнорирование именования — листы с именами «Frame 1», «Frame 2» — это беда для команды. Установите правила именования: «Screen_», «Modal_», «Component_». Это сэкономит часы при ревью.
• Отсутствие сетки — если вы не используете Layout Grid, ваш дизайн будет выглядеть «размазанным». Даже для мобильных экранов добавьте 8px-сетку — это стандарт в современном UI-дизайне.

Чтобы избежать этих ошибок, регулярно проводите «аудит структуры»: откройте панель Layers, разверните все группы и проверьте, есть ли дубликаты, неиспользуемые листы или непонятные имена. Удалите лишнее — Figma не удаляет автоматически, но накопление мусора замедляет работу.

Как организовать листы для удобной навигации

Организация — это то, что отличает профессиональный файл от хаотичного. В крупных проектах может быть десятки и даже сотни листов. Без системы вы потеряете часы, ища нужный экран.

Начните с создания папок. В панели Layers кликните правой кнопкой мыши и выберите “New Frame” — это создаст папку. Переименуйте её в «Screens», «Modals», «Components». Перетаскивайте листы внутрь этих папок. Используйте цветовую маркировку: красный для «в разработке», зелёный для «утверждено», серый для «устаревшее».

Также используйте систему нумерации: «01_Login», «02_Onboarding», «03_Home». Это обеспечивает логический порядок, даже если папки не отсортированы вручную. Figma сортирует элементы по алфавиту, поэтому цифры работают как приоритет.

Для командной работы рекомендуется создать общий шаблон структуры. Например:

• 00_Templates — шаблоны листов
• 01_Screens — все экраны
• 02_Modals — всплывающие окна
• 03_Components — повторяющиеся элементы
• 04_Assets — изображения, иконки

Такой подход используется в крупных компаниях, включая Apple и Google, и внедряется в дизайн-системы типа Material Design и Fluent UI.

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

Дмитрий также рекомендует использовать плагины, такие как “Frame Resizer” или “Auto Layout Helper”, чтобы автоматически масштабировать листы под разные устройства. Например, если вы создали лист для iPhone, плагин может автоматически создать его версию для iPad, сохранив пропорции и отступы. Это особенно полезно при работе над адаптивными интерфейсами.

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

Заключение

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

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

• Используйте F и Shift + F для быстрого создания листов с нужными размерами.
• Всегда давайте листам осмысленные имена — это ускоряет поиск и командную работу.
• Применяйте Layout Grid и Auto Layout для согласованности и адаптивности.
• Используйте папки и цветовую маркировку для структурирования больших проектов.
• Создавайте собственные шаблоны листов — это сэкономит вам часы на каждом новом проекте.