По документации Figma, эффект поддерживает векторы, изображения, фреймы, компоненты и текст. С его помощью можно наклонить экран в макете, расставить карточки на разном расстоянии или собрать куб из плоских слоёв. Преобразование можно скрыть или удалить, сохранив исходное содержимое.
Как управлять вращением и глубиной
Чтобы добавить эффект, нужно выделить слой, нажать плюс в разделе Effects на правой панели и выбрать 3D transform. Поворот задаётся ручками на холсте или точными значениями в настройках. Изменения сразу видны в макете.
- Ось X отвечает за наклон вперёд и назад.
- Ось Y — за наклон влево и вправо.
- Ось Z — за вращение в плоскости холста.
- Параметр Depth перемещает слой по оси Z, ближе к зрителю или дальше от него.
Точку вращения тоже можно менять: например, расположить её у края карточки вместо центра. Настройка Backface управляет видимостью обратной стороны. Если она включена, сзади отображается зеркальная лицевая сторона. Для разных изображений с двух сторон Figma предлагает использовать отдельные слои и скрыть их обратные стороны.
Зачем нужны перспектива и общее 3D-пространство
Эффект Perspective на родительском фрейме задаёт общую перспективу: ближние объекты выглядят крупнее, дальние — мельче. Меньшее значение усиливает перспективу, большее делает её слабее. Без 3D-преобразований вложенных слоёв видимого изменения может не быть.
Переключатель Keep nested layers 3D сохраняет повороты и глубину вложенных слоёв в общем пространстве. Объекты могут пересекаться и перекрывать друг друга в зависимости от положения. Чтобы изменение Depth было заметно, Figma рекомендует включить этот режим на родительском фрейме, а затем добавить ему перспективу или 3D-поворот.
У режима есть ограничения. На родительском фрейме отключается управление непрозрачностью, становятся недоступны режимы наложения, шейдеры, другие эффекты и обрезка содержимого. Существующие заливки и обводки скрываются. Вернуть эти свойства можно через Turn into flat plane, но тогда вложенная композиция отображается на плоскости фрейма и общее 3D-пространство на этом уровне заканчивается.
Анимация и передача в код
В режиме motion можно добавить ключевые кадры для вращения по X и Y, глубины и перспективы. Это позволяет анимировать переворот карточки, наклон экрана или изменение расстояния между объектами.
В Dev Mode разработчики могут просмотреть и скопировать значения CSS transform. Параметру Depth соответствует translateZ, режиму вложенных слоёв — transform-style, а эффекту Perspective — perspective. Документация также описывает реализацию дизайна с 3D-эффектами через агента для работы с кодом, подключённого к Figma MCP server.
Кому доступна функция
Figma указывает поддержку всех тарифных планов, но для применения эффекта требуется место типа Full seat и доступ к редактированию файла. Поддержка тарифа сама по себе не означает доступность функции для любого типа места.
