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

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

Зачем поворачивать фото в Figma

Фото в дизайне редко остаётся в исходной ориентации. Даже если вы загрузили изображение с камеры смартфона, оно может быть снято в портретном режиме, а вам нужно разместить его в горизонтальном баннере. Или вы создаёте адаптивный интерфейс, где изображения должны менять угол в зависимости от экрана. Поворот — это не эстетическая деталь, а функциональная необходимость. По данным исследования UX Collective, 73% дизайнеров сталкиваются с необходимостью корректировки ориентации медиа-контента хотя бы раз в день. Неправильное поворот изображения может нарушить визуальную иерархию, вызвать смещение элементов, испортить привязку к сетке и даже сломать прототип при экспорте.

Представьте: вы разрабатываете мобильное приложение для путешествий. На экране «Домашняя страница» — фоновое фото гор. Вы загрузили его вертикально, но в макете оно должно занимать всю ширину экрана. Если вы просто растянете его — искажение неизбежно. Правильный путь — повернуть изображение на 90 градусов и уже потом масштабировать с сохранением пропорций. Именно поэтому важно не просто «покрутить», а сделать это осознанно.

Способ 1: Поворот мышкой (визуальный)

Самый интуитивный способ — поворот с помощью мыши. Выделите изображение, подведите курсор к одному из четырёх углов рамки. Когда курсор превратится в круглую стрелку (в виде дуги с двумя концами), нажмите левую кнопку мыши и начните вращать. Следите за всплывающим значением угла — оно отображается рядом с курсором. Для точного поворота на 90°, 180° или 270° удерживайте клавишу Shift — Figma автоматически «притянет» угол к ближайшей стандартной величине.

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

Способ 2: Поворот через панель свойств (точный)

Если вы работаете над макетом, где каждая деталь должна быть точной — например, при разработке UI для банка, медицинского приложения или корпоративного сайта — визуальный поворот недостаточен. Здесь нужен контроль в цифрах. Откройте панель свойств (Inspector) справа. Найдите поле «Rotate» — оно находится в разделе «Transform». Введите нужное значение: 90, -45, 180 и т.д. Вы можете вводить дробные значения — например, 22.5° — и Figma применит их мгновенно.

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

Способ 3: Использование горячих клавиш

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

• Ctrl + [ (Cmd + [ на Mac) — поворот на -15°
• Ctrl + ] (Cmd + ] на Mac) — поворот на +15°
• Shift + Ctrl + [ — поворот на -1°
• Shift + Ctrl + ] — поворот на +1°

Эти комбинации работают только при выделенном изображении. Они особенно полезны при тонкой настройке: например, когда вы выравниваете фото под наклонную линию в логотипе или под углом в архитектурной визуализации. Если вы часто работаете с углами 5°, 10° или 20° — настройте собственные горячие клавиши через меню «Help → Keyboard Shortcuts».

Способ 4: Поворот с привязкой к сетке

Если вы работаете с сеткой 12-колонной или с угловыми элементами, например, в дизайне футера или блока с наклонными секциями, важно, чтобы фото «вписывалось» в структуру. Figma позволяет включить привязку к сетке и углам. Перейдите в меню «View → Show Grid» и активируйте «Snap to Grid». Теперь, когда вы поворачиваете фото, оно будет «притягиваться» к ближайшим углам сетки — например, к 30°, 45°, 60°, если они заданы в параметрах.

Также можно использовать «Smart Guides» (Вид → Smart Guides). Они помогут выровнять фото относительно других элементов — например, сделать так, чтобы диагональ изображения совпадала с линией текста или границей кнопки. Это особенно важно в динамических макетах, где композиция должна оставаться гармоничной при любых изменениях.

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

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

• Искажение пропорций. Не используйте ручное растяжение при повороте — это сжимает или растягивает изображение. Всегда поворачивайте, а затем масштабируйте от центра (удерживая Shift).
• Поворот контейнера вместо фото. Если вы выделили не фото, а его рамку (Frame), то поворот будет применён к всей группе. Убедитесь, что вы кликаете именно на изображение — оно должно выделяться жёлтой рамкой, а не серой.
• Отсутствие сохранения качества. Повернутое фото в Figma не теряет качество — но если вы экспортируете его в PNG с низким DPI, артефакты проявятся. Экспортируйте с параметром 2x или 3x для экранов Retina.
• Неправильная привязка после поворота. После поворота изображение может «съехать» от привязки к краю. Используйте Auto Layout или ручную привязку (Constraints) — выберите «Left + Top» или «Center» в зависимости от задачи.

Особенно критична ошибка с привязкой: вы повернули фото на 90°, но оно осталось прикреплено к левому краю — и теперь оно выходит за границы экрана. Решение: после поворота переключите Constraints на «Center Horizontal» и «Center Vertical» — это гарантирует центрирование.

Экспертное мнение: как не сломать макет

Артём предлагает использовать компоненты с переменными для повторяющихся задач. Создайте компонент «Фото с поворотом», добавьте параметр «Angle» в Variants и настройте его диапазон от 0° до 360°. Теперь вы можете менять угол не вручную, а через панель свойств — и это работает даже в прототипах. Такой подход особенно полезен в системах дизайна, где изображения часто повторяются с разными ориентациями.

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

Заключение

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

• Используйте панель свойств для точного поворота — это надёжнее, чем вращение мышкой.
• Всегда удерживайте Shift при повороте, чтобы «притянуть» угол к 90°, 180° и т.д.
• После поворота проверяйте привязку (Constraints) — иначе элемент может уйти за границы.
• Для повторяющихся задач создавайте компоненты с переменными rotation — это экономит часы работы.
• Экспортируйте фото с коэффициентом 2x или 3x, чтобы избежать потери качества.