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

Работа с размерами - фундаментальный навык для любого дизайнера в Figma. На первый взгляд, все кажется простым: выделил объект и изменил цифры в панели справа. Однако для создания гибких, адаптивных и аккуратных интерфейсов важно понимать глубинные принципы, по которым Figma управляет размерами. Эта система строится на взаимодействии нескольких ключевых концепций, главные из которых - рамка (Frame), содержимое (Content) и ограничения (Constraints). Освоив их, вы сможете создавать макеты, которые легко адаптируются к изменениям.

Что такое рамка и содержимое

В Figme каждый объект, будь то кнопка, иконка или целый экран, имеет два уровня размера.

• Внешний уровень - это рамка. Её размеры вы видите на холсте и в панели свойств, когда объект выделен.
• Внутри этой рамки находится само содержимое - векторные контуры, текст или дочерние слои. По умолчанию размер рамки автоматически подстраивается под контент, но это поведение можно изменить.

Важная мысль заключается в том, что "размер объекта" в дизайне часто относится именно к его рамке, в то время как визуальное содержимое может иметь собственные пропорции.

Как управлять размерами вручную

Самый прямой способ - выделить объект и ввести числовые значения в поля W (ширина) и H (высота) на правой панели. Вы также можете растягивать объект мышью, за углы или стороны. Удерживая клавишу Shift, вы сохраняете пропорции, а с клавишей Ctrl или Cmd меняете размер от центра. Для более тонкого контроля над содержимым, таким как текст или сложные векторные фигуры, используйте инструменты выравнивания и распределения, а также свойства Auto Layout.

Система ограничений для адаптивного дизайна

Ограничения (Constraints) - это мощный механизм, который определяет, как слой ведет себя внутри родительского фрейма при изменении его размера. Вы можете "привязать" слой к левому, правому краю или центру по горизонтари, и к верхнему, нижнему краю или центру по вертикали. Например, установив ограничения "левый/правый", вы растянете объект по ширине вместе с родителем. Эта система незаменима при создании прототипов для разных экранов и является краеугольным камнем адаптивного дизайна в Figma.

Автоматическая компоновка 

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

Сравнение методов управления размером

Выбор метода зависит от задачи. Чтобы было понятнее, рассмотрим их основные цели в таблице ниже.

Метод	Основное назначение	Идеально подходит для
Ручное изменение	Точная, фиксированная настройка размеров.	Иконок, иллюстраций, элементов с жесткими пиксельными требованиями.
Ограничения	Адаптация слоя к изменению размера родительского контейнера.	Элементов внутри адаптивных макетов (шапки, карточки внутри сетки).
Auto Layout	Создание динамических, связанных групп элементов, которые меняются как единое целое.	Кнопок, списков, меню, любых повторяющихся вертикальных или горизонтальных блоков.

 

Каждый из этих инструментов не исключает другие, а дополняет их. Например, кнопку часто создают с помощью Auto Layout, а затем уже всю эту группу размещают внутри фрейма экрана, используя ограничения для выравнивания.

Вывод

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