Как изменить размер фрейма в фигме

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

Базовое изменение размера фрейма

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

Если удерживать клавишу Shift во время изменения размера, фрейм будет масштабироваться пропорционально. Это полезно, когда нужно сохранить соотношение сторон, например, при работе с карточками продуктов или баннерами. Удержание Alt (Option на Mac) позволяет тянуть фрейм от центра — то есть он будет увеличиваться или уменьшаться одновременно во всех направлениях.

Для быстрого создания нового фрейма можно воспользоваться горячей клавишей F. Затем просто нарисуйте прямоугольник нужного размера. Этот метод особенно удобен при первоначальной структуризации макета.

Шаги для ручного изменения размера

1. Выберите фрейм с помощью инструмента «Select» (V) или кликом в панели слоёв.
2. Наведите курсор на один из маркеров изменения размера.
3. Зажмите левую кнопку мыши и потяните в нужную сторону.
4. При необходимости удерживайте Shift для пропорционального изменения или Alt для масштабирования от центра.
5. Отпустите кнопку мыши, чтобы зафиксировать новый размер.

Точное задание размеров через панель свойств

Хотя визуальное изменение размера удобно, оно не всегда достаточно точно. В профессиональном дизайне часто требуются конкретные значения — например, 375×812 для iPhone или 1920×1080 для десктопа. В таких случаях используется правая панель свойств (Inspector).

После выделения фрейма в верхней части панели появятся поля W (ширина) и H (высота). Просто введите нужное значение в одно из них. Figma автоматически обновит размер фрейма. Можно использовать математические операции прямо в поле: например, ввести 400+20 или 500/2, и Figma рассчитает результат.

Кроме того, можно привязать фрейм к сетке, используя опцию «Constraints» в той же панели. Например, установка значения «Left & Right» сделает фрейм растягивающимся между левым и правым краями родительского контейнера при изменении размера макета.

Auto Layout и автоматическое изменение размера

Одно из самых мощных нововведений Figma — Auto Layout. Он позволяет фрейму автоматически изменять свой размер в зависимости от содержимого. Это особенно полезно при создании кнопок, списков, шапок сайтов и других динамических блоков.

Чтобы включить Auto Layout, выберите фрейм и нажмите кнопку «+» рядом с заголовком «Auto layout» в правой панели или используйте комбинацию Shift+A. После этого фрейм получит внутренние отступы (padding) и начнёт реагировать на добавление или удаление элементов.

Например, если вы создадите кнопку с текстом внутри и включите Auto Layout, при изменении текста ширина кнопки автоматически подстроится под новый объём. Это исключает необходимость вручную подгонять размер каждый раз.

Настройки Auto Layout, влияющие на размер

• Direction — определяет ориентацию: горизонтальная (по строкам) или вертикальная (по столбцам).
• Padding — внутренние отступы, которые увеличивают общий размер фрейма.
• Gap — расстояние между элементами внутри фрейма.
• Primary axis sizing — можно выбрать «Hug contents» (подстраивается под содержимое) или «Fill container» (заполняет родительский контейнер).

Ограничения и адаптивное поведение фреймов

Ограничения (constraints) определяют, как фрейм ведёт себя при изменении размера родительского контейнера. По умолчанию установлено «Left & Top», что означает привязку к левому верхнему углу. Но можно выбрать другие варианты: «Center», «Right & Bottom», «Left & Right» и другие.

Если фрейм имеет ограничение «Left & Right», его ширина будет автоматически увеличиваться или уменьшаться при изменении ширины родителя. Это ключевой механизм для создания адаптивных макетов. Аналогично работает «Top & Bottom» по вертикали.

Пример использования ограничений

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

1. Поместите панель в отдельный фрейм.
2. Установите constraints: «Left & Right» и «Bottom».
3. Теперь при изменении размера основного фрейма (например, под разные модели телефонов) панель будет автоматически растягиваться и оставаться прикреплённой к нижнему краю.

Распространённые ошибки и как их избежать

Даже опытные дизайнеры иногда сталкиваются с проблемами при работе с размерами фреймов. Одна из самых частых — это случайное включение Auto Layout, когда оно не нужно. Это может привести к неожиданному поведению при изменении размера. Чтобы избежать этого, всегда проверяйте, активен ли Auto Layout, прежде чем начинать редактирование.

Ещё одна ошибка — игнорирование padding и gap в Auto Layout. Многие начинающие дизайнеры добавляют отступы с помощью пустых фигур или пробелов в тексте, что делает макет нестабильным. Вместо этого используйте встроенные параметры padding и gap.

Как исправить «застрявший» фрейм

Иногда фрейм перестаёт изменяться по размеру. Возможные причины:

• Включен Auto Layout с режимом «Fill container» — фрейм привязан к размерам родителя.
• Фрейм является частью компонента с фиксированными размерами.
• Активированы ограничения, которые блокируют изменение по одной из осей.

Решение: временно отключите Auto Layout, проверьте constraints и убедитесь, что фрейм не заблокирован в свойствах.

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

По её словам, лучшие практики включают использование компонентов с переменными размерами, применение Variants для разных состояний и настройку responsive resizing на уровне фреймов. Она также отмечает, что Figma продолжает развивать функции автоматического изменения размера, включая новые опции для вложенных Auto Layout и улучшенную работу с текстом.

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

Заключение

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

• Используйте визуальное изменение размера для быстрой работы, а точные значения — для финальных макетов.
• Auto Layout должен быть вашим основным инструментом для создания динамических компонентов.
• Ограничения (constraints) необходимы для адаптивных дизайнов под разные устройства.
• Избегайте ручных отступов — применяйте padding и gap в Auto Layout.
• Регулярно проверяйте поведение фреймов при изменении размеров, особенно при совместной работе.