Как пропорционально увеличить в фигме

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

Метод 1: Использование клавиши Shift

Наиболее простой и интуитивный способ пропорционального изменения размера — использование клавиши Shift. При активированном инструменте выбора (V) кликните по объекту и потяните за один из угловых маркеров, удерживая Shift. Это блокирует соотношение сторон, например 1:1 для квадратов или 16:9 для прямоугольников.

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

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

Когда использовать этот метод

• При быстром прототипировании без необходимости точных значений.
• Для масштабирования одного элемента или нескольких выделенных объектов.
• Когда нужно визуально оценить пропорции в контексте макета.

Метод 2: Масштабирование через панель свойств

Для точного пропорционального увеличения лучше всего подходит панель свойств справа. После выделения объекта в разделе «Size» вы можете вручную ввести новые значения ширины или высоты. Figma автоматически пересчитает второе значение, если включена иконка цепочки между W и H.

Цепочка означает, что пропорции зафиксированы. Например, если у вас изображение 200×300 px и вы измените ширину на 400 px, высота станет 600 px — коэффициент 1.5 сохранён. Это идеальный способ для работы с ресурсами, где важна точность: логотипы, аватары, баннеры.

Если цепочка разомкнута, вы можете свободно менять параметры, но рискуете исказить объект. Рекомендуется всегда проверять состояние цепочки перед вводом новых значений. Также в панели есть кнопка «Reset to original size», которая возвращает элемент к исходным размерам — полезно после экспериментов.

Пример расчёта масштабирования

Представьте, что вам нужно увеличить логотип с 150×100 px до 225×150 px. Коэффициент масштабирования — 1.5. Вы можете:

1. Выделить объект.
2. В поле Width ввести 225.
3. Убедиться, что цепочка замкнута — Figma сама установит Height = 150.

Метод 3: Инструмент Transform (Ctrl+T)

Figma поддерживает горячую клавишу Ctrl+T (Cmd+T на Mac), которая активирует режим преобразования — аналогично Photoshop. После нажатия вы увидите рамку с маркерами, и при перетаскивании с зажатым Shift будет происходить пропорциональное масштабирование.

Инструмент Transform особенно полезен при работе с несколькими слоями одновременно. Вы можете выделить группу, нажать Ctrl+T и равномерно увеличить все элементы, сохранив их внутренние пропорции. Однако важно понимать, что Transform применяется ко всей группе как к единому объекту, а не к каждому элементу отдельно.

Если вы хотите масштабировать каждый элемент внутри группы пропорционально, но независимо, придётся использовать скрипты или плагины. Сам Figma не предлагает встроенной функции «масштабировать содержимое группы».

Ограничения Transform в Figma

• Не масштабирует шрифты пропорционально по умолчанию — размер текста остаётся прежним, если не включена опция «Scale text with object».
• Не влияет на эффекты (теней, обводок) — они остаются в исходных значениях.
• После применения Transform нельзя отменить действие через двойной щелчок (в отличие от других редакторов).

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

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

Если группа содержит текст, важно включить опцию «Scale text with object» в контекстном меню (правый клик → Scale text with object). Без этого текст останется прежнего размера, что может нарушить читаемость. Эта настройка доступна только при выделении группы или фрейма.

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

Практический пример: адаптация карточки товара

Допустим, у вас есть карточка товара (изображение, название, цена, кнопка). Вы хотите увеличить её в 1.3 раза.

1. Выделите все элементы и сгруппируйте (Ctrl+G).
2. Щёлкните правой кнопкой → включите «Scale text with object».
3. Удерживая Shift, растяните группу за угол.
4. Проверьте, что текст стал крупнее, а отступы остались пропорциональными.

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

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

Вторая ошибка — масштабирование текста без учёта читаемости. Увеличивая текст вместе с объектом, можно получить шрифт 48 px там, где нужен максимум 24 px. Всегда сверяйтесь с типографской сеткой после Transform.

Третья — попытка пропорционально увеличить Auto Layout-фрейм. Это не работает, как ожидается. Вместо масштабирования вы получаете растянутый контейнер с теми же элементами. Решение — конвертировать в обычный фрейм или использовать внешние плагины.

Как исправить искажённый элемент

Если вы случайно нарушили пропорции:

• Нажмите Ctrl+Z, чтобы отменить действие.
• Или в панели свойств введите одно значение и включите цепочку — Figma восстановит второе.
• Для изображений используйте «Reset to original size» в контекстном меню.

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

Мы поговорили с Михаилом Смирновым, ведущим UI-архитектором компании «Нейроинтерфейсы», который более 10 лет использует Figma в проектах для банков и медицинских платформ.

Он также отметил, что команда внедрила чек-лист перед презентацией макетов:

• Проверка всех изображений на искажение.
• Сравнение размеров текста с гайдлайнами.
• Тест масштабирования компонентов на 120% и 80% оригинала.

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

Заключение

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

• Всегда используйте Shift при перетаскивании за углы для сохранения пропорций.
• Контролируйте состояние цепочки (W/H) в панели свойств при ручном вводе размеров.
• Включайте «Scale text with object» при масштабировании групп с текстом.
• Auto Layout-фреймы не масштабируются — их нужно временно отключать.
• Для сложных задач используйте проверенные плагины, такие как «Responsive Scale» или «Super Scale».