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

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

Как работает отзеркаливание в Figma

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

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

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

Что происходит с объектом при отзеркаливании

• Figma применяет трансформацию масштабирования с отрицательным значением по одной из осей: -1 по X (горизонтально) или -1 по Y (вертикально).
• Объект не дублируется — изменяется исходный слой.
• Стили, эффекты, обводки и прозрачность сохраняются без изменений.
• Если объект входит в компонент или экземпляр, отзеркаливание можно применить, но это не повлияет на основной компонент, если только вы не редактируете его напрямую.

Пошаговое руководство: как отзеркалить фигуру

Процесс отзеркаливания прост и интуитивно понятен. Ниже приведены три основных способа — выберите тот, который лучше всего вписывается в ваш рабочий процесс.

Способ 1: Через панель свойств (Inspector)

1. Выделите нужную фигуру на холсте с помощью инструмента «Селектор» (V).
2. Перейдите в правую панель свойств (обычно называется «Design» или «Properties»).
3. Прокрутите вниз до раздела «Constraints» или «Transform».
4. Найдите кнопки с иконками: стрелка влево/вправо (Flip Horizontal) и вверх/вниз (Flip Vertical).
5. Нажмите на нужную кнопку — объект мгновенно отзеркаливается.

Способ 2: Через контекстное меню

1. Щёлкните правой кнопкой мыши по выделенной фигуре.
2. В выпадающем меню найдите раздел «Arrange» (или «Упорядочить»).
3. Выберите один из пунктов: «Flip Horizontal» или «Flip Vertical».
4. Объект немедленно изменит ориентацию.

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

Способ 3: Горячие клавиши (быстрый способ)

1. Выделите объект.
2. Нажмите комбинацию:
   • Ctrl+Shift+H (Windows) или Cmd+Shift+H (Mac) — для горизонтального отзеркаливания.
   • Ctrl+Shift+V (Windows) или Cmd+Shift+V (Mac) — для вертикального.
3. Готово — объект отзеркален.

Продвинутые техники отзеркаливания

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

Отзеркаливание в RTL-интерфейсах

При локализации интерфейсов для языков с правосторонним письмом (например, арабского или иврита) многие элементы должны быть отзеркалены: иконки, расположение кнопок, направление стрелок. Figma позволяет быстро подготовить такие макеты.

• Создайте копию основного фрейма с интерфейсом.
• Выделите все элементы, которые требуют отзеркаливания (например, навигацию, иконки, иллюстрации).
• Примените Flip Horizontal ко всей группе.
• Отрегулируйте текстовые блоки (если нужно) — они могут потребовать отдельной настройки шрифта и направления.

Работа с группами и вложенными объектами

Figma корректно отзеркаливает группы и вложенные фреймы. Однако будьте внимательны: если внутри группы есть текстовые блоки, они также будут отражены. Это может быть нежелательно.

Автоматизация через плагины

Для частого отзеркаливания можно использовать плагины из Figma Community. Например:

• Flip Selection — расширяет стандартные функции, добавляя дополнительные опции отзеркаливания.
• RTL Tools — автоматически отзеркаливает целые экраны, корректируя расположение элементов под правостороннее чтение.
• Batch Flip — позволяет применять отзеркаливание к множеству объектов по фильтрам (по имени, типу, тегам).

Распространённые ошибки и как их избежать

Даже простые операции могут привести к проблемам, если не учитывать особенности системы.

Ошибка 1: Отзеркаливание текста без необходимости

Многие новички случайно отзеркаливают текстовые блоки, забывая, что буквы становятся зеркальными. Это критично при презентации макетов.

• Решение: Перед применением Flip выделите только графические элементы. Используйте слои и именование (например, «icon-arrow», «text-title»), чтобы быстро фильтровать объекты.
• Альтернатива: Создайте отдельную группу без текста для отзеркаливания.

Ошибка 2: Отзеркаливание компонентов без понимания последствий

Если вы отзеркаливаете экземпляр компонента, это не затрагивает оригинал. Но если вы войдёте в редактирование компонента и примените Flip там — изменится весь компонент и все его экземпляры.

• Решение: Проверяйте, находитесь ли вы в режиме редактирования экземпляра или мастера. Смотрите путь в верхней панели навигации.
• Совет: Используйте переименование: называйте компоненты с суффиксами, например, «Button/Arrow/Right» и «Button/Arrow/Left», чтобы избежать путаницы.

Ошибка 3: Ожидание автоматической коррекции макета

Figma отзеркаливает объекты, но не перемещает их автоматически. Если вы отзеркалили стрелку справа, она останется на том же месте, просто развернётся.

• Решение: После отзеркаливания вручную сдвиньте объект, если нужно изменить его позицию. Или используйте Constraints и Auto Layout для создания адаптивных конструкций.

Экспертное мнение

Максим отмечает, что в профессиональной практике отзеркаливание часто используется не ради экономии времени, а для соблюдения принципов консистентности. Например, если в одном модальном окне есть стрелка «назад», а в другом — «вперёд», они должны быть зеркальными по форме, но не дублями. Это создаёт ощущение системности.

Также эксперт рекомендует использовать Flip в сочетании с Variants (вариантами компонентов): создать компонент с двумя состояниями — «стрелка вправо» и «стрелка влево» — и переключаться между ними в зависимости от контекста.

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

Заключение

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

• Отзеркаливание в Figma выполняется по горизонтали или вертикали через панель свойств, контекстное меню или горячие клавиши.
• Операция безопасна и обратима — не меняет структуру объекта.
• Текстовые блоки отзеркаливаются как изображения — читаемость теряется.
• Для RTL-проектов используйте комбинацию Flip + отдельные текстовые слои.
• Плагины и компоненты помогают автоматизировать и стандартизировать процесс.