Фреймы в Figma — это основа любого дизайн-проекта, но неумение корректно изменять их размер превращает работу в хаос из лишних отступов и кривых макетов. Многие дизайнеры тратят драгоценное время на ручное выравнивание элементов, не зная о простых инструментах обрезки фрейма. В этой статье я покажу три эффективных способа изменить размер фрейма, расскажу про горячие клавиши для работы с фреймами и разберу типичные ошибки, которые мешают вам работать быстрее. Если вы хотите оптимизировать рабочий процесс и перестать бороться с базовыми функциями графического редактора — читайте дальше.
Что такое фреймы в Figma и зачем их обрезать
Фреймы в Figma — это контейнеры, которые определяют границы вашего дизайна. В отличие от групп, фреймы имеют фиксированные размеры, могут содержать Auto Layout и выступают базой для адаптивных макетов. Они работают как артборды в Adobe XD или монтажные области в Illustrator, но с куда более гибкими возможностями.
Обрезка фрейма — это изменение его размеров для точного соответствия контенту или заданным параметрам экрана. Почему это важно? 🎯
- Точность макета: лишние отступы искажают восприятие дизайна и создают проблемы при передаче в разработку
- Экспорт без артефактов: правильный размер фрейма гарантирует, что изображение экспортируется без пустых областей
- Работа с прототипами: корректные границы фрейма критичны для настройки переходов между экранами
- Командная работа: чёткие фреймы упрощают навигацию по проекту для других участников команды
Многие начинающие дизайнеры игнорируют размеры фрейма, фокусируясь только на внутреннем контенте. Это ошибка. Фрейм — это не просто рамка, это структурная единица вашего проекта, которая влияет на экспорт, прототипирование и передачу макетов разработчикам.
| Характеристика | Фрейм (Frame) | Группа (Group) |
| Фиксированный размер | Да, задаётся вручную | Нет, подстраивается под контент |
| Auto Layout | Поддерживается | Не поддерживается |
| Обрезка контента | Можно включить Clip Content | Нет такой опции |
| Использование в прототипах | Основа для экранов и переходов | Не используется |
| Экспорт | Экспортируется с заданными размерами | Экспортируется по границам контента |
Инструменты Figma позволяют обрезать фрейм несколькими способами, каждый из которых подходит для разных задач. Понимание этих методов — ключ к профессиональной работе в графическом редакторе.
Быстрая инструкция по обрезке фрейма в Figma
Самый прямой способ изменить размер фрейма в Figma — использовать панель свойств справа. Этот метод интуитивен и подходит для точной настройки размеров.
Шаг 1: Выберите фрейм, который нужно обрезать. Кликните на него в рабочей области или в панели слоёв слева.
Шаг 2: Обратите внимание на правую панель Properties. В секции Frame вы увидите поля W (ширина) и H (высота).
Шаг 3: Введите новые значения размеров напрямую в эти поля. Можно использовать математические операции — например, вписать "1920/2", и Figma автоматически посчитает результат.
Шаг 4: Нажмите Enter, чтобы применить изменения. Фрейм изменит размер относительно верхнего левого угла по умолчанию.
Если вам нужно обрезать фрейм по контенту (убрать все лишние отступы), используйте функцию "Resize to Fit". Выделите фрейм, кликните правой кнопкой мыши и выберите Resize to Fit или используйте комбинацию Shift + Option + Cmd + R на Mac (или Shift + Alt + Ctrl + R на Windows).
Важный нюанс: при изменении размеров фрейма контент внутри не масштабируется автоматически. Figma просто меняет границы контейнера. Если вам нужно, чтобы элементы внутри адаптировались под новый размер, используйте constraints (ограничения) или Auto Layout.
Марина Соколова, UX/UI дизайнер: Работала над мобильным приложением для медицинской клиники. Получила от клиента набор иконок разных размеров — хаос. Создала фреймы 24×24 для каждой иконки, использовала Resize to Fit для быстрого выравнивания, затем экспортировала всё за минуту. Раньше бы потратила час на ручное выравнивание. Клиент получил аккуратный набор с единообразными размерами — никаких вопросов от разработчиков.
3 эффективных способа изменить размер фрейма
Существует несколько способов изменить размер фрейма в Figma, и каждый имеет свои преимущества в зависимости от контекста работы.
Способ 1: Ручное изменение размеров через маркеры
Самый визуальный метод — захватить угловой или боковой маркер фрейма и потянуть его в нужном направлении. Этот способ подходит для приблизительной подгонки размеров, когда точность до пикселя не критична.
- Выберите фрейм
- Наведите курсор на угловой маркер (он выглядит как небольшой квадрат)
- Зажмите левую кнопку мыши и тяните в нужном направлении
- Чтобы сохранить пропорции, удерживайте Shift во время изменения размера
Недостаток метода — сложно добиться точных значений, особенно если нужны конкретные размеры в пикселях.
Способ 2: Точное изменение через панель Properties
Этот метод я уже описал выше — вы вводите точные значения ширины и высоты в правой панели. Это самый профессиональный подход, особенно когда вы работаете над макетами с чёткими требованиями к размерам экранов.
Дополнительная возможность: если кликнуть на иконку замочка между полями W и H, вы заблокируете пропорции фрейма. Тогда при изменении одного параметра второй будет пересчитываться автоматически.
Способ 3: Использование функции "Resize to Fit"
Этот способ обрезки фрейма идеален, когда нужно убрать все лишние отступы и подогнать границы фрейма точно под контент. Функция особенно полезна при работе с компонентами или экспорте отдельных элементов.
- Выделите фрейм с контентом
- Кликните правой кнопкой мыши
- Выберите
Resize to Fitиз контекстного меню - Фрейм автоматически сожмётся до границ внутренних элементов
Это особенно удобно при создании UI-китов или библиотек компонентов, где каждый элемент должен иметь минимальные размеры без лишних отступов.
| Способ | Скорость | Точность | Применение |
| Ручное изменение | Высокая | Низкая | Черновики, наброски |
| Панель Properties | Средняя | Высокая | Финальные макеты |
| Resize to Fit | Высокая | Абсолютная | Компоненты, экспорт |
Понимание разницы между этими методами позволяет выбирать оптимальный инструмент для каждой задачи и значительно ускоряет рабочий процесс в Figma.
Дмитрий Волков, продуктовый дизайнер: Делал редизайн дашборда для финтех-стартапа. Заказчик требовал адаптивность под 5 разрешений. Создал мастер-фрейм 1440px, затем дублировал и менял размеры через панель Properties с точностью до пикселя. За день подготовил все версии, используя горячие клавиши для переключения между размерами. Раньше такая работа заняла бы неделю с постоянными правками размеров. Клиент утвердил макеты с первого раза.
Горячие клавиши для работы с фреймами в Figma
Горячие клавиши — это то, что отделяет профессионала от любителя. Если вы до сих пор ищете функции в меню, вы теряете до 40% рабочего времени. Вот ключевые комбинации для работы с фреймами:
Создание и выбор фреймов:
FилиA— активировать инструмент FrameCmd + Option + G(Mac) /Ctrl + Alt + G(Windows) — создать фрейм из выделенных объектовShift + 1— масштабировать холст до размера выбранного фреймаN— перейти к следующему фрейму в проектеShift + N— вернуться к предыдущему фрейму
Изменение размеров фрейма:
K— активировать Scale Tool для пропорционального изменения размера фрейма и всего содержимогоShift + Option + Cmd + R(Mac) /Shift + Alt + Ctrl + R(Windows) — Resize to Fit (обрезка по контенту)Cmd + D(Mac) /Ctrl + D(Windows) — дублировать фрейм с сохранением размеров
Навигация и организация:
Cmd + /(Mac) /Ctrl + /(Windows) — открыть поиск команд (здесь можно найти любую функцию по названию)Option + 1(Mac) /Alt + 1(Windows) — показать/скрыть UI интерфейса FigmaShift + R— показать линейки (помогают при точном позиционировании фреймов)
Особое внимание уделите комбинации Shift + Option + Cmd + R — это именно та функция обрезки фрейма, которая экономит массу времени при работе с компонентами.
Профессиональный совет: создайте привычку использовать горячие клавиши с первого дня работы в Figma. Первую неделю будет непривычно, но затем скорость работы вырастет в разы. Я рекомендую распечатать список основных комбинаций и держать перед глазами, пока они не войдут в мышечную память.
Если вы работаете на Mac и Windows попеременно, обратите внимание на различия: Mac использует Cmd, а Windows — Ctrl; Mac использует Option, а Windows — Alt. Современные версии Figma адаптируются под операционную систему автоматически.
Частые ошибки при обрезке фреймов и их решение
Даже опытные дизайнеры совершают типичные ошибки при работе с размерами фрейма. Вот самые распространённые проблемы и их решения:
Ошибка 1: Обрезка фрейма вместо контента
Многие путают изменение размера фрейма с обрезкой содержимого внутри него. Когда вы меняете размеры фрейма, контент не обрезается автоматически — он просто выходит за границы.
Решение: Включите опцию Clip Content в панели свойств фрейма. Это заставит Figma скрывать всё, что выходит за границы фрейма, подобно overflow: hidden в CSS.
Ошибка 2: Потеря контроля над вложенными элементами
При изменении размера фрейма элементы внутри могут вести себя непредсказуемо, особенно если не настроены constraints (ограничения). Это приводит к тому, что кнопки съезжают, текст обрезается, а отступы нарушаются.
Решение: Настройте constraints для каждого элемента внутри фрейма. Выделите объект и в правой панели установите, как он должен себя вести при изменении размера родительского фрейма: прилипать к левому/правому краю, центрироваться, растягиваться и т.д. Ещё лучше — используйте Auto Layout для адаптивных компонентов.
Ошибка 3: Использование групп вместо фреймов
Начинающие дизайнеры часто группируют элементы через Cmd + G вместо создания фрейма. Группы не имеют фиксированных размеров и не поддерживают многие функции Figma, что ограничивает возможности работы.
Решение: Используйте фреймы для всех контейнеров, которым нужен фиксированный размер или Auto Layout. Группы оставьте для простого визуального объединения элементов без структурных требований.
Ошибка 4: Игнорирование функции Resize to Fit
Многие дизайнеры вручную подгоняют размеры фрейма под контент, тратя время на точное позиционирование границ. При этом в Figma есть встроенная функция, которая делает это за секунду.
Решение: Используйте Resize to Fit (правая кнопка мыши на фрейме) или горячую клавишу Shift + Option + Cmd + R. Это особенно полезно при создании компонентов с переменным контентом.
Ошибка 5: Неправильное изменение пропорций
При ручном изменении размера фрейма легко нарушить пропорции, особенно если фрейм содержит изображения или элементы с фиксированным соотношением сторон.
Решение: Удерживайте Shift при изменении размера через угловые маркеры — это сохранит пропорции. Или используйте Scale Tool (клавиша K), который масштабирует фрейм и весь контент пропорционально.
Ошибка 6: Забывание о вложенных фреймах
При изменении размера родительского фрейма вложенные фреймы могут вести себя непредсказуемо, особенно если у них не настроены constraints.
Решение: Всегда проверяйте, как изменение размера влияет на вложенные элементы. Используйте Auto Layout на обоих уровнях для предсказуемого поведения.
| Ошибка | Последствие | Решение |
| Не включен Clip Content | Контент выходит за границы при экспорте | Включить Clip Content в свойствах |
| Не настроены constraints | Элементы "плывут" при изменении размера | Настроить ограничения для каждого объекта |
| Использование групп вместо фреймов | Отсутствие контроля над размерами | Преобразовать группу во фрейм |
| Ручная подгонка вместо Resize to Fit | Потеря времени на рутину | Использовать горячую клавишу |
| Нарушение пропорций | Искажение дизайна | Удерживать Shift или использовать Scale Tool |
💡 Лайфхак: Создайте в Figma файл-шпаргалку с базовыми размерами фреймов для разных устройств (iPhone 14 Pro, Galaxy S23, iPad, Desktop 1920px и т.д.). Сохраните его как шаблон и используйте при старте новых проектов — это избавит вас от постоянного поиска актуальных разрешений экранов.
Понимание этих ошибок и их решений поможет вам работать в Figma быстрее и профессиональнее. Графический редактор предлагает множество инструментов для эффективной обрезки фрейма и управления размерами — главное научиться их правильно применять.
Обрезка фрейма в Figma — базовый навык, но именно внимание к таким деталям отличает профессиональный макет от любительского. Используйте панель Properties для точности, Resize to Fit для экономии времени, а горячие клавиши для скорости работы. Настройте constraints и Auto Layout, чтобы избежать хаоса при изменении размеров. Помните: фрейм — это не просто рамка, а структурная основа вашего дизайна. Освойте эти три способа изменения размера фрейма, запомните ключевые комбинации клавиш и избегайте типичных ошибок — и вы заметите, как качество и скорость вашей работы вырастут. Теперь вы знаете, как обрезать фрейм в Figma профессионально — применяйте эти знания в каждом проекте.
