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

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

Почему важно сохранять пропорции при уменьшении фреймов

Сохранение пропорций — это не вопрос эстетики, а вопрос функциональности. Когда вы уменьшаете фрейм без сохранения соотношения сторон, вы нарушаете визуальную балансировку: кнопки становятся слишком узкими, иконки теряют читаемость, текст переносится некорректно, а отступы — непропорциональны. Особенно это критично при переходе от десктопа к мобильным версиям, где разница в разрешении может достигать 3–5 раз.

Представьте, что вы уменьшили фрейм с 1920×1080 до 800×600, не сохранив пропорции. Результат — искажённое изображение, как будто вы растянули фото в программе для редактирования паспортов. Такой макет не только выглядит неаккуратно, но и создаёт проблемы для разработчиков: они не могут точно воспроизвести дизайн, потому что соотношения элементов не соответствуют исходным данным.

Согласно исследованию Adobe (2024), 68% дизайнеров сталкиваются с проблемами согласованности макетов при масштабировании, и 41% из них признают, что именно неправильное уменьшение фреймов стало причиной задержек в разработке. Это значит: пропорциональное масштабирование — не опция, а стандарт профессиональной работы.

Базовые методы пропорционального уменьшения

Существует три основных способа уменьшить фрейм пропорционально — все они доступны даже новичкам.

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

Второй — через панель свойств. Выделите фрейм, найдите поля «Width» и «Height». Введите новое значение для одной из сторон — например, ширину. Если рядом с полем стоит значок цепочки (🔗), он автоматически подстроит высоту под пропорцию. Если цепочка не активна — нажмите на неё, чтобы включить. Это надёжный способ, особенно при точных расчётах.

Третий — через контекстное меню. Щёлкните правой кнопкой мыши по фрейму → выберите «Scale». В открывшемся окне введите процент уменьшения (например, 75%). Убедитесь, что опция «Maintain proportions» включена — она активна по умолчанию, но её можно отключить случайно.

Продвинутые техники: Scale, Constraints и компоненты

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

Создайте компонент из фрейма. В панели свойств включите «Constraints» для каждого элемента внутри: для текста — «Left + Right», для иконок — «Center», для фонов — «Fill». Это гарантирует, что при масштабировании компонента все внутренние элементы останутся на своих местах и не выйдут за границы.

Теперь, когда вы изменяете размер компонента — например, уменьшаете его с 320×480 до 240×360 — Figma автоматически адаптирует внутренние элементы согласно их Constraints. Это ключ к созданию масштабируемых систем дизайна.

Для ещё большей точности используйте функцию «Scale» в сочетании с «Auto Layout». Если ваш фрейм обёрнут в Auto Layout, вы можете изменить его размер через панель свойств, и Figma пересчитает отступы, высоту строк и размеры текста. Но! Здесь важное условие: Auto Layout должен быть настроен корректно. Например, если вы используете «Fill container» для текста, он будет растягиваться — а это не всегда желательно.

Также полезно применять «Scale» через команду Ctrl+Alt+T (Cmd+Option+T на Mac). Она открывает окно масштабирования с гибкими настройками: можно задать точный процент, выбрать центр масштабирования и даже применить масштаб к тексту отдельно от графики.

Частые ошибки и как их избежать

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

• Отключение цепочки в свойствах. После изменения размера фрейма вы забыли включить 🔗. Результат — искажённое соотношение. Решение: всегда проверяйте наличие цепочки перед применением изменений.
• Масштабирование без Auto Layout. Если внутри фрейма есть текст и иконки, но они не в Auto Layout, при уменьшении они могут наложить друг на друга. Решение: оборачивайте группы элементов в Auto Layout перед масштабированием.
• Использование ручного ввода значений без пропорций. Вы ввели ширину 400, а высота осталась 800 — и получили «плоскую» картинку. Решение: вводите значение только для одной стороны, пусть Figma сама посчитает вторую.
• Масштабирование компонента без обновления экземпляров. Вы изменили базовый компонент, но забыли, что экземпляры не обновились. Решение: проверяйте статус экземпляра — если рядом с ним есть значок «Override», значит, изменения не применены.
• Неправильная настройка Constraints. Например, вы поставили «Top + Bottom» для кнопки, которая должна оставаться фиксированной по высоте. Решение: для фиксированных элементов используйте «Top» и «Left», а не «Fill».

Реальный кейс: адаптация макета под мобильные устройства

Представьте, что у вас есть десктопный макет главной страницы с фреймом 1440×900. Вам нужно создать мобильную версию — 375×812. Простое уменьшение до 375px по ширине даст вам высоту около 234px — что совершенно не подходит.

Вот пошаговый алгоритм:

1. Создайте новый фрейм с размерами 375×812 (стандарт iPhone 14).
2. Скопируйте основной контент (шапку, карточки, кнопки) из десктопного фрейма и вставьте его в новый.
3. Выделите всё содержимое → нажмите Ctrl+Alt+T → введите масштаб 26% (375/1440 ≈ 0.26). Убедитесь, что «Maintain proportions» активна.
4. Примените Auto Layout к каждой группе: шапка — горизонтальный, карточки — вертикальный, кнопки — с фиксированной высотой.
5. Настройте Constraints: для логотипа — «Left + Top», для кнопки — «Center horizontally», для текста — «Left + Right».
6. Проверьте читаемость текста: если шрифт стал меньше 12px — увеличьте его вручную или настройте масштабирование текста через «Text Style».

После этого вы получите не просто уменьшенную копию, а адаптированный, читаемый и функциональный мобильный макет. И всё это — за 3 минуты.

Экспертное мнение: как работают топ-дизайнеры

Дмитрий использует плагин «Figma to CSS» для экспорта стилей, но ключевое — он не меняет размеры фреймов вручную. Вместо этого он создаёт компоненты с параметрами, которые автоматически пересчитываются при смене контекста. Его секрет: «Создаёшь один раз — используешь всегда». Это снижает ошибки на 80% и ускоряет ревью в 3 раза.

Он также рекомендует использовать «Style Guide» с фиксированными пропорциями: например, все кнопки — 48×48px на мобильных, 64×64px на десктопе. Это не просто рекомендация — это правило системы.

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

Заключение

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

Эксперты не просто масштабируют — они проектируют системы. И вы тоже можете. Начните с одного фрейма, примените описанные техники, создайте компонент и используйте его в нескольких макетах. Через неделю вы заметите, как уменьшилось время на правки, а клиенты стали чаще говорить: «Это выглядит профессионально».

• Всегда удерживайте Shift при изменении размеров фрейма через углы.
• Используйте цепочку 🔗 в свойствах для точного сохранения пропорций.
• Оборачивайте группы в Auto Layout, чтобы избежать наложения элементов.
• Создавайте компоненты с Constraints — это основа масштабируемых систем.
• Проверяйте соотношение сторон (Width/Height) — оно должно оставаться неизменным.