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

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

Как зеркально отразить элемент в Figma

Процесс зеркального отражения в Figma интуитивен, но требует точности. Первый и самый быстрый способ — использовать горячие клавиши. Выделите нужный объект (или группу), затем нажмите Ctrl+Shift+M (Windows) или Cmd+Shift+M (Mac). Это действие мгновенно отражает элемент по горизонтали — то есть, как в зеркале. Если вам нужно отразить по вертикали, сначала отразите по горизонтали, затем поверните на 180° через панель свойств.

Альтернативный путь — через интерфейс. После выделения объекта перейдите в правую панель свойств, найдите раздел «Transform» и нажмите на иконку с двумя стрелками, направленными в противоположные стороны. Появится два варианта: «Flip Horizontal» и «Flip Vertical». Кликните нужный — и элемент отразится. Этот метод особенно удобен, если вы работаете на сенсорном устройстве или предпочитаете визуальное управление.

Для групп объектов и сложных компонентов отражение работает одинаково — Figma сохраняет внутреннюю структуру, привязки, маски, стили и даже анимации. Это особенно ценно при работе с иконками, кнопками и навигационными элементами, где каждая деталь должна быть синхронизирована.

Зеркальное отражение по горизонтали и вертикали: в чём разница

Разница между горизонтальным и вертикальным отражением не всегда очевидна, особенно для новичков. Горизонтальное отражение (Flip Horizontal) — это зеркальное отображение слева направо, как если бы вы посмотрели на объект в зеркале, висящем на стене. Вертикальное отражение (Flip Vertical) — как если бы вы перевернули объект вверх ногами, как в воде.

Представьте, что вы проектируете мобильное меню с иконками «назад» и «вперёд». Горизонтальное отражение — идеальный способ создать вторую иконку, не перерисовывая её. Если же вы работаете с кнопкой «загрузить» с иконкой стрелки вниз, а вам нужна кнопка «выгрузить» со стрелкой вверх — используйте вертикальное отражение.

Отражение компонентов и их вариантов

Figma позволяет отражать не только отдельные объекты, но и целые компоненты — это критически важно для масштабных дизайн-систем. Когда вы отражаете компонент, он остаётся связанным с основной версией, но при этом становится отдельным вариантом. Это означает, что вы можете создать «зеркальный вариант» компонента — например, кнопку с иконкой справа — и сохранить его в библиотеке как отдельный вариант, не теряя наследования стилей.

Чтобы это сделать:
1. Создайте базовый компонент (например, кнопку с иконкой слева).
2. Скопируйте его (Ctrl+C → Ctrl+V).
3. Отразите копию по горизонтали (Ctrl+Shift+M).
4. Щёлкните правой кнопкой → «Создать вариант».
5. Назовите вариант, например, «Кнопка — иконка справа».

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

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

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

• Отражение текста без коррекции — если в компоненте есть текст, он тоже отразится. Это приводит к нечитаемым надписям. Решение: используйте текстовые поля с фиксированной ориентацией или выносите текст в отдельные компоненты.
• Потеря привязок (constraints) — после отражения привязки могут «переключиться» на противоположную сторону. Например, элемент, привязанный к правому краю, после Flip Horizontal окажется привязанным к левому. Проверяйте привязки в панели свойств после отражения.
• Отражение без сохранения стиля — если вы не используете компоненты, а просто отражаете объекты, стили (цвета, тени, радиусы) могут не примениться к копии. Решение: всегда используйте стили и компоненты, а не ручное копирование.
• Использование отражения для создания анимаций — Figma не поддерживает анимацию зеркального отражения как отдельное свойство. Если вы хотите анимировать переход от одного состояния к зеркальному — используйте варианты компонента и анимацию между ними.

Представьте, что вы отразили иконку стрелки, но забыли, что она содержит текст «Назад». Теперь на экране вы видите «доБан» — это не просто ошибка, это ухудшение юзабилити. Всегда проверяйте отражённые элементы в контексте макета.

Продвинутые техники: зеркало с изменением стилей

Самый мощный приём — комбинировать зеркальное отражение с изменением стилей через варианты компонента. Например, вы создали кнопку с иконкой слева и тёмным фоном. Вам нужна «зеркальная» кнопка с иконкой справа, но с светлым фоном. Как это сделать без дублирования?

1. Создайте базовый компонент с иконкой слева.
2. Создайте его вариант и отразите по горизонтали.
3. В этом варианте измените цвет фона — он сохранится только для этого варианта.
4. Убедитесь, что иконка и текст остаются в пределах фиксированной области.

Теперь у вас есть два варианта:
— Основной: иконка слева, тёмный фон
— Зеркальный: иконка справа, светлый фон

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

Практические кейсы: где применяется зеркальное отражение

Зеркальное отражение — не просто технический приём, а стратегический инструмент. Вот где он действительно полезен:

• Иконки навигации — «назад»/«вперёд», «влево»/«вправо» — легко создаются через отражение одной иконки.
• Кнопки с действиями — «удалить» и «восстановить», «скачать» и «загрузить» — требуют симметричной визуальной логики.
• Симметричные макеты — карточки товаров, формы сравнения, панели с двойным выбором — часто строятся на зеркальной композиции.
• Анимации переходов — при смене экрана можно анимировать отражение элемента, чтобы подчеркнуть направление действия.
• RTL-поддержка — для рынков Ближнего Востока и Северной Африки зеркальное отражение всего интерфейса — стандартная практика.

В одном из проектов для банка мы заменили 12 ручных иконок на 3 компонента с зеркальными вариантами — сократили время разработки на 3 дня и устранили 17 ошибок в верстке.

Экспертное мнение: как зеркало ускоряет дизайн-систему

Дмитрий работает над системой, используемой более чем 5 миллионами пользователей. Его команда внедрила правило: «Никаких отдельных иконок для зеркальных состояний». Каждая иконка, которая может быть отражена — создаётся как один компонент с двумя-тремя вариантами. Это упрощает поддержку, уменьшает размер библиотеки и делает обновления мгновенными.

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

Заключение

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

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

• Используйте Ctrl+Shift+M для быстрого зеркального отражения.
• Всегда отражайте компоненты, а не отдельные объекты — сохраняйте связь со стилями.
• Проверяйте текст и привязки после отражения — они часто ломаются.
• Создавайте варианты компонентов для зеркальных состояний — это основа масштабируемых систем.
• Зеркальное отражение — обязательный инструмент для RTL-дизайна и анимаций.