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

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

Зачем нужно зеркальное отражение изображений в Figma?

Зеркальное отражение — это не просто «повернуть картинку в другую сторону». Это стратегический приём, используемый в UX/UI-дизайне для создания симметрии, воспроизведения реалистичных отражений, адаптации иконок под разные языки (например, стрелки в RTL-интерфейсах) и экономии времени при работе с компонентами. Представьте, что вы проектируете мобильное приложение для рынка Ближнего Востока, где текст читается справа налево. Стрелка «назад» должна указывать вправо — и если вы не отразите её зеркально, пользователь будет путаться.

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

Способ 1: Использование Flip Horizontal/Vertical

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

1. Выделите изображение, которое нужно отразить.
2. Щёлкните правой кнопкой мыши по объекту.
3. В появившемся контекстном меню выберите Flip Horizontal (зеркальное отражение по горизонтали) или Flip Vertical (по вертикали).
4. Объект мгновенно перевернётся.

Этот метод не требует ввода чисел, не меняет позицию объекта относительно сетки и не влияет на другие параметры (прозрачность, тени, стили). Он идеален, если вам нужно просто «перевернуть стрелку» или «отразить значок».

Если вы работаете с группой объектов (например, иконка + фон), вы можете отразить всю группу целиком — Figma сохранит внутреннюю структуру. Это особенно удобно при работе с комплексными иконками, где несколько слоёв образуют единый элемент.

Как отразить несколько объектов сразу?

— Выделите все нужные элементы, удерживая Shift.
— Правый клик → Flip Horizontal/Vertical.
— Все объекты отразятся одновременно, сохраняя свои относительные позиции.

Это экономит минуты при дизайне панелей навигации, каруселей или наборов кнопок.

Способ 2: Ручное изменение масштаба по оси X или Y

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

1. Выделите изображение.
2. Перейдите в правую панель свойств.
3. Найдите поле Scale (Масштаб).
4. Введите -100% в поле X (для горизонтального отражения) или Y (для вертикального).

При вводе -100% по оси X объект отразится по горизонтали — как если бы вы посмотрели на него в зеркале. При -100% по оси Y — он перевернётся вверх ногами.

Этот метод имеет важное преимущество: он позволяет постепенно анимировать отражение. Например, если вы установите масштаб X от 100% до -100% в таймлайне, вы получите плавное зеркальное переворачивание — полезно для микропротоколов и интерактивных прототипов.

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

Способ 3: Поворот на 180 градусов — когда он подходит

Поворот на 180° — это не зеркальное отражение, а полный переворот. Его часто путают с Flip Horizontal, но это разные вещи. Поворот на 180° — это вращение объекта вокруг его центра, а не отражение по оси.

— Flip Horizontal: объект отражается, как в зеркале — левое становится правым, но не переворачивается.
— Rotate 180°: объект поворачивается на полный круг — и верх становится низом, а левое — правым, но внутренняя ориентация сохраняется.

Пример: если у вас есть иконка с лицом, смотрящим влево, то:

— Flip Horizontal → лицо смотрит вправо.
— Rotate 180° → лицо смотрит вниз, а затем вверх — и вы получите перевёрнутую морду.

Используйте поворот на 180° только тогда, когда вам нужно полностью перевернуть объект — например, для создания эффекта «падения» или отражения в воде. Для всех остальных случаев — Flip.

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

Несмотря на простоту инструментов, ошибки в отражении случаются часто — и они могут стоить времени.

Ошибка 1: Использование поворота вместо отражения
Многие дизайнеры вводят 180°, думая, что это «зеркально». Но это не так. Результат — перевёрнутый, а не отражённый объект. Особенно критично для иконок с текстом или ориентацией.

Ошибка 2: Отражение без привязки к сетке
После Flip Horizontal объект может «съехать» относительно сетки. Это происходит, если его центр не совпадает с центром группы. Решение: выделите объект, нажмите Ctrl/Cmd + Shift + A — выровнять по центру.

Ошибка 3: Отражение текста
Если вы отразите текст — он станет непонятным. Не делайте этого, если не планируете использовать его как графический элемент. Для отражённого текста лучше использовать специальные шрифты или создать отдельный слой.

Ошибка 4: Игнорирование компонентов
Если вы отразите компонент, а не его экземпляр — вы измените шаблон. Это может сломать другие экземпляры. Всегда работайте с экземплярами, если хотите сохранить целостность системы.

Продвинутые советы для профессионалов

Для опытных пользователей Figma есть несколько тонкостей, которые значительно ускоряют работу.

1. Быстрый горячий ключ
Figma не имеет стандартного горячего ключа для Flip, но вы можете создать его через плагин “Hotkeys”. Установите плагин, настройте сочетание Ctrl + M для Flip Horizontal — и работайте в два раза быстрее.

2. Отражение с сохранением анимации
Если вы используете Figma для анимаций (в режиме Prototype), отражение через масштаб X = -100% сохраняет переходы. Поворот — нет. Это критично для микроанимаций кнопок.

3. Использование Auto Layout
Если объект находится в Auto Layout-контейнере, Flip может нарушить выравнивание. Решение: временно отключите Auto Layout, отразите, затем снова включите — и Figma сам подстроит.

4. Зеркальное отражение в режиме Dev Mode
При экспорте в разработку важно, чтобы отражённые элементы имели правильные имена. Используйте префикс — например, `icon-back-flipped` — чтобы разработчики сразу понимали, что это отражённая версия.

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

Заключение

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

• Для зеркального отражения используйте Flip Horizontal/Vertical — это самый надёжный способ.
• Для анимаций — применяйте масштаб X/Y = -100%, а не поворот.
• Отражение не разрывает связи с компонентами — работайте с экземплярами.
• Никогда не отражайте текст, если не планируете его как графический элемент.
• Используйте выравнивание (Ctrl/Cmd + Shift + A), чтобы избежать смещений после отражения.