Как в фигме пропорционально масштабировать

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

Основы пропорционального масштабирования

Пропорциональное масштабирование означает изменение размера объекта с сохранением его исходного соотношения сторон (например, 1:1 для квадрата или 4:3 для прямоугольника). В Figma каждый векторный объект, фигура, изображение или текстовый блок имеет свои габариты, которые можно менять вручную или с помощью инструментов интерфейса.
Когда вы выделяете объект и начинаете тянуть за один из восьми маркеров по краям, Figma по умолчанию не фиксирует пропорции. Это означает, что если просто потянуть за боковой маркер — объект деформируется по горизонтали, а если за угловой — может растянуться неравномерно. Чтобы этого избежать, нужно активировать режим пропорционального изменения.
Самый простой способ — использовать клавишу Shift. При её зажатии и перетаскивании углового маркера объект будет масштабироваться строго пропорционально. Это работает для всех типов объектов: фигур, изображений, векторных путей и текстовых рамок.

Для более точного контроля откройте панель свойств справа. Там вы увидите поля «Ширина» и «Высота». Между ними расположен значок цепочки — это индикатор заблокированного соотношения сторон. Если цепочка замкнута, изменение одного параметра автоматически скорректирует второй, сохраняя пропорции. Если разомкнута — размеры можно менять независимо.
Представьте, что вы работаете с логотипом, который должен оставаться в соотношении 2:1. Вы вводите ширину 200 px — высота автоматически установится в 100 px. Это особенно полезно при создании дизайн-систем, где важна согласованность размеров.

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

Figma — это инструмент для скоростной работы. Чем меньше вы кликаете мышью, тем выше ваша продуктивность. Горячие клавиши позволяют масштабировать объекты быстро и точно, минуя ручное управление.
Наиболее часто используемые комбинации:

• Shift + перетаскивание — пропорциональное масштабирование из любого угла;
• Alt + Shift + перетаскивание — масштабирование из центра с сохранением пропорций;
• Cmd/Ctrl + T — активация режима преобразования (transform), где можно вращать и масштабировать объект;
• Shift + стрелки — изменение размера с шагом 10 px, с сохранением пропорций, если цепочка заблокирована.

Режим преобразования (Cmd/Ctrl + T) особенно полезен при работе с группами или сложными фигурами. После активации вы можете вращать, наклонять и масштабировать объект. Удерживая Shift, вы гарантируете, что пропорции не нарушаются.
Если вы хотите увеличить объект из центра, а не с края, удерживайте Alt (Option на Mac) вместе с Shift. Это удобно, когда вы не хотите, чтобы объект «уехал» в сторону при растягивании.

Также стоит помнить, что Figma поддерживает дробные значения. Вы можете ввести размер 15.7 px или 98.3 px — система корректно обработает такие данные. Это важно при работе с пиксель-перфект дизайном, особенно в мобильных интерфейсах.

Масштабирование групп и фреймов

Группы и фреймы — основа структуры в Figma. Они объединяют несколько объектов, но поведение при масштабировании у них разное.
Когда вы масштабируете группу, все входящие в неё элементы изменяются пропорционально, если вы используете Shift. Однако внутренние пропорции между объектами могут нарушиться, если они имеют разные настройки авто-макета или закрепления.
Фреймы ведут себя иначе. При масштабировании фрейма с содержимым поведение зависит от типа контента:

• Статические объекты — масштабируются вместе с фреймом;
• Объекты с Auto Layout — могут игнорировать внешнее масштабирование, если заданы фиксированные размеры;
• Изображения внутри фрейма — масштабируются, только если не включён режим «Cover» или «Contain».

Если вы работаете с макетом, содержащим текст и кнопки, и попытаетесь масштабировать весь фрейм, результат может быть непредсказуемым. Текст не масштабируется визуально (его размер остаётся в pt), а кнопки могут «сжаться» или «растянуться» некорректно.

Для безопасного масштабирования составного объекта рекомендуется:

1. Выделить все нужные элементы.
2. Нажать Cmd/Ctrl + G, чтобы сгруппировать.
3. Удерживать Shift и перетаскивать за угол.
4. При необходимости — открыть панель свойств и проверить итоговые размеры.

Работа с компонентами и вариантами

Компоненты — сердце повторного использования в Figma. Но при их масштабировании есть важные особенности.
Если вы масштабируете экземпляр компонента, он временно становится «деформированным» — то есть отличается от оригинала. Figma показывает значок рядом с названием, сигнализируя о расхождении. Однако это не ломает связь с мастер-компонентом.
Чтобы экземпляр всегда оставался пропорциональным, можно настроить параметры в разделе «Constraints» (Ограничения). Например, установите «Scale» в качестве правила изменения размера. Тогда при изменении ширины или высоты экземпляра, все внутренние элементы будут масштабироваться пропорционально.
Для вариантов компонентов (component variants) важно понимать: каждый вариант может иметь свои собственные размеры. Если вы создаёте кнопку с текстом «Короткая» и «Очень длинная надпись», Figma автоматически подстроит ширину. Но если вы вручную зададите пропорциональное масштабирование, это может нарушить адаптивность.

Если вам всё же нужно пропорционально изменить компонент, сделайте это на уровне мастер-объекта. Затем обновите все экземпляры, чтобы избежать рассинхронизации.

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

Даже опытные дизайнеры иногда допускают ошибки при масштабировании. Вот самые распространённые:

• Забывают про Shift — растягивают объект без клавиши и получают искажённую форму. Решение: всегда начинайте с зажатия Shift при ручном масштабировании.
• Не проверяют цепочку пропорций — вводят размер вручную, не заметив, что цепочка разомкнута. Итог — объект теряет форму. Решение: перед вводом значений проверяйте состояние иконки цепи на панели свойств.
• Масштабируют фреймы с Auto Layout — ожидают, что содержимое изменится, но кнопки или текст остаются прежними. Решение: либо отключите Auto Layout перед масштабированием, либо используйте параметры ширины/высоты внутри системы.
• Увеличивают растровые изображения — после масштабирования картинка становится пиксельной. Решение: используйте векторные форматы или импортируйте изображения с запасом по разрешению.
• Игнорируют сетку и гайды — масштабируют «на глаз», нарушая единую систему отступов. Решение: привязывайтесь к сетке (включите View → Show Grid) и используйте плагины вроде Constraints Helper.

Если вы работаете в команде, добавьте в чек-лист проверки макета пункт: «Проверить пропорции всех масштабированных объектов». Это поможет избежать визуальных косяков перед сдачей проекта.

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

Пропорциональное масштабирование — это не просто технический навык, а часть визуальной дисциплины. Хороший дизайн живёт за счёт гармонии, а любое нарушение пропорций бросается в глаза, даже если пользователь не может объяснить почему.
Современные интерфейсы всё чаще используют адаптивные и отзывчивые макеты. В таких условиях ручное масштабирование должно быть осознанным. Лучше потратить 10 секунд на проверку цепочки пропорций, чем час на исправление деформированной иконки в прототипе.
При создании дизайн-систем я настоятельно рекомендую использовать Auto Layout и компоненты с параметрами. Это снижает необходимость в ручном масштабировании. Но когда оно необходимо — делайте это правильно: с Shift, из центра, с контролем через панель свойств.

Также стоит следить за обновлениями Figma. Команда регулярно улучшает поведение объектов при трансформациях. Например, в 2025 году был добавлен режим «Proportional Scaling Mode» в настройки пользователя — теперь его можно включить как глобальное поведение по умолчанию.

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

Заключение

Пропорциональное масштабирование в Figma — это фундаментальный навык, который влияет на качество всего проекта. Будь то иконка, карточка товара или целый экран, сохранение пропорций обеспечивает визуальную целостность и профессионализм.
Главное — использовать сочетание Shift при ручном изменении размера и контролировать параметры через панель свойств. Не забывайте про цепочку пропорций и особенности работы с группами, фреймами и компонентами. Автоматизация через Auto Layout и компоненты снижает потребность в ручных операциях, но когда она возникает — делайте это осознанно.

• Всегда используйте Shift при растягивании объектов для сохранения пропорций.
• Контролируйте соотношение сторон через иконку цепи на панели свойств.
• Избегайте масштабирования растровых изображений больше 100%.
• При работе с компонентами и Auto Layout отдавайте предпочтение параметрическим решениям.
• Проверяйте результат масштабирования в увеличенном виде (200–400%), чтобы убедиться в отсутствии искажений.