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

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

Общее устройство интерфейса Figma

Figma — это веб-приложение для дизайна пользовательских интерфейсов, которое сочетает в себе простоту использования и глубокие возможности настройки. Основной рабочий процесс строится вокруг холста, слоёв и панелей инструментов. Справа от холста расположена панель свойств (Inspector), где отображаются и редактируются параметры выделенного объекта, включая его размеры.
Каждый объект на холсте — будь то прямоугольник, текст, фигура или группа — имеет свои геометрические параметры: ширину (W) и высоту (H). Эти значения можно изменять как визуально, так и численно. Интерфейс Figma позволяет быстро переключаться между режимами редактирования, что особенно полезно при создании адаптивных макетов.
Панель свойств обновляется в реальном времени при выборе любого элемента. Она разделена на логические блоки: трансформация (размер и положение), заливка, обводка, тени, эффекты и параметры макета. Блок «Transform» — ключевой для управления размерами.

Где находятся параметры размера

Параметры ширины и высоты находятся в верхней части правой панели, сразу под названием слоя. Рядом с полями ввода W и H отображается значок цепочки — он указывает, включено ли сохранение пропорций при масштабировании. Если цепочка замкнута, изменение одного параметра автоматически скорректирует второй. Это удобно для работы с иконками и изображениями.
Вы можете ввести значение напрямую, используя цифры. Figma поддерживает единицы измерения по умолчанию — пиксели. Дробные значения также допустимы (например, 16.5), что важно при тонкой настройке интерфейсов.

Как задать размер объекта: основные способы

Существует несколько способов задать размер элемента в Figma. Каждый из них подходит для разных задач: от быстрого прототипирования до точного пиксель-перфект дизайна.
Первый и самый очевидный способ — использование ручек масштабирования. Выделите объект, и по углам и сторонам появятся маркеры. Перетаскивая их, вы меняете размер. Удерживая Shift, вы сохраняете пропорции. Этот метод идеален для первичной настройки, но не гарантирует точности.
Второй способ — числовой ввод в панели свойств. Здесь вы можете ввести точное значение ширины и высоты. Это необходимо, когда вы следуете гайдлайнам (например, Material Design требует кнопки высотой 48px). Также можно использовать математические операции прямо в поле: введите +10 или -5, чтобы увеличить или уменьшить текущее значение.
Третий способ — комбинации клавиш. Например:

• Alt + стрелки — изменение размера с шагом 1px;
• Ctrl + + / Ctrl + - — зум, не влияющий на размеры объектов;
• Shift + Alt + стрелки — изменение размера с шагом 10px.

Привязки и сетки для точного позиционирования

Figma предлагает мощные инструменты привязки: к сетке, направляющим, другим объектам и границам холста. Чтобы включить привязку к объектам, убедитесь, что активна иконка магнита в верхнем меню. Привязки помогают поддерживать единый отступный ритм и избегать «плавающих» размеров.
Вы можете настроить собственную сетку через панель справа. Например, 8px-сетка — стандарт в современном UI-дизайне. Все размеры тогда кратны 8, что упрощает чтение кода и согласованность интерфейса.

Особенности размеров в авто-макетах

Авто-макет (Auto Layout) — один из самых мощных инструментов Figma. Он позволяет создавать гибкие контейнеры, которые автоматически подстраиваются под содержимое. Однако поведение размеров в таких контейнерах отличается от обычных объектов.
Когда вы применяете Auto Layout к группе или фрейму, он получает два режима ширины и высоты: Fixed (фиксированный) и Hug Contents (объять содержимое). В режиме Hug Contents ширина и высота определяются внутренними элементами и отступами. Это означает, что вы не можете вручную задать ширину, если выбран этот режим.
Чтобы задать конкретную ширину, нужно переключить параметр на Fixed. Это полезно, когда вы хотите, чтобы кнопка имела минимальную ширину, но могла расширяться при длинном тексте. Для этого установите Min Width вместо фиксированной.
Отступы (padding) внутри авто-макета также влияют на общий размер. Например, если у вас есть кнопка с текстом и padding 16px слева и справа, то общая ширина будет равна ширине текста + 32px. Figma автоматически рассчитывает это.

Как контролировать размеры в динамических макетах

При работе с карточками, списках или формами часто требуется, чтобы элементы занимали всю доступную ширину. Для этого используется режим Fill Container. Выберите авто-макет, щёлкните по значку ширины и выберите «Fill container». Теперь он будет растягиваться по родительскому фрейму.
Вы можете комбинировать режимы: например, по вертикали — Hug Contents, по горизонтали — Fill Container. Это типично для модальных окон или панелей навигации.
Если вы хотите ограничить максимальную ширину, используйте Max Width. Это предотвращает чрезмерное растяжение при очень длинном контенте.

Работа с размерами в компонентах и экземплярах

Компоненты в Figma — это переиспользуемые элементы, такие как кнопки, иконки или карточки. При создании компонента важно правильно задать его размеры, чтобы экземпляры были гибкими.
По умолчанию экземпляр наследует размеры мастера-компонента. Но Figma позволяет переопределять размеры, если включена соответствующая настройка. В редакторе компонента откройте панель свойств и найдите раздел Constraints (Ограничения). Здесь вы можете указать, как элемент должен вести себя при изменении размеров родителя.
Ограничения бывают:

• Left & Right — растягивается по горизонтали;
• Top & Bottom — привязан к верху и низу;
• Center — остаётся по центру;
• Left и Top — остаётся в левом верхнем углу.

Для создания адаптивных компонентов рекомендуется использовать авто-макеты. Тогда экземпляр сможет адаптироваться под разный текст или иконки без ручной корректировки.

Переопределение размеров в экземплярах

Иногда нужно, чтобы экземпляр отличался по размеру от оригинала. Figma позволяет это делать, но только если мастер-компонент настроен корректно. Например, если у кнопки в компоненте установлен режим Hug Contents, вы можете свободно менять её ширину в экземпляре.
Однако если размер зафиксирован, изменение будет заблокировано. Чтобы разблокировать, вернитесь к мастер-компоненту и переключите режим на Hug Contents или Fill Container.

Типичные ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки при работе с размерами в Figma. Одна из самых частых — отсутствие единой системы отступов и размеров. Когда каждый элемент создаётся «на глаз», это приводит к несогласованности интерфейса.
Другая ошибка — игнорирование Auto Layout. Многие продолжают использовать обычные фреймы, что усложняет поддержку макетов. Без авто-макетов невозможно создать по-настоящему адаптивный дизайн.
Также распространённая проблема — неправильные ограничения в компонентах. Например, иконка в кнопке привязана к левому краю, но при сокращении ширины она наседает на текст. Решение — использовать внутренние отступы и режимы выравнивания в авто-макете.

Чек-лист: Проверка размеров перед передачей макетов

1. Убедитесь, что все размеры кратны 4 или 8px.
2. Проверьте, что авто-макеты настроены корректно (Min/Max, отступы).
3. Протестируйте экземпляры компонентов с разным контентом.
4. Убедитесь, что нет «плавающих» пикселей (например, 15.3px).
5. Проверьте привязки и выравнивание относительно сетки.

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

«Сегодняшние дизайн-системы живут по законам динамических размеров. Фиксированные значения уходят в прошлое. Вместо этого мы проектируем правила роста: как кнопка должна вести себя при длинном тексте, как карточка адаптируется под изображение. Figma с её Auto Layout даёт нам эту возможность уже сейчас. Главное — перестать думать в терминах “ширина=320px” и начать думать в терминах “поведение при изменении”.»

— Михаил Петров, архитектор дизайн-системы, TechLead в крупной финтех-компании

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

Заключение

Управление размерами в Figma — это не просто технический навык, а важная часть проектирования качественного пользовательского интерфейса. От того, насколько точно и системно вы задаёте размеры, зависит согласованность, масштабируемость и удобство передачи макетов команде.
Современный подход предполагает переход от фиксированных значений к динамическим системам. Auto Layout, компоненты, Min/Max ширина — всё это инструменты, которые помогают создавать живые, адаптивные интерфейсы. Главное — понимать логику каждого инструмента и применять их осознанно.

• Размеры задаются через панель свойств или ручки масштабирования.
• Для точности используйте числовой ввод и привязки к сетке.
• Auto Layout меняет логику управления размерами — используйте Hug Contents и Fill Container.
• Компоненты должны быть гибкими — настройте Min/Max и ограничения.
• Избегайте «плавающих» размеров и несогласованных значений.