/
/
В Figma появились 3D-трансформации: слои можно вращать по трём осям и забирать CSS в Dev Mode
13.11.2026
В Figma появились 3D-трансформации: слои можно вращать по трём осям и забирать CSS в Dev Mode
Figma добавила в Figma Design эффект 3D transform. Векторы, картинки, фреймы, компоненты и текст теперь можно вращать по осям X, Y и Z и отодвигать в глубину, а готовые значения копировать в виде CSS.
Функция вышла 12 ноября. Она доступна на всех тарифах пользователям с полным местом (Full seat) и правом редактировать файл. В блоге Figma эффект назван открытой бета-версией, на панели настроек тоже стоит пометка Beta.
Эффект недеструктивный: исходный слой остаётся редактируемым. Поворот задаётся ручками прямо на холсте или числами в панели. Если добавить родительскому фрейму эффект Perspective, вложенные слои окажутся в общей 3D-сцене — так можно собрать, например, ряд карточек, повёрнутых под разными углами.
В режиме Figma Motion поворот, глубину и перспективу можно анимировать по ключевым кадрам. В Dev Mode эффект переводится в CSS: глубина соответствует свойству translateZ, перспектива — perspective, общая 3D-сцена — transform-style: preserve-3d.
У эффекта есть ограничения. Если у фрейма включена общая 3D-сцена для вложенных слоёв, у него отключаются прозрачность, режимы наложения, шейдеры, другие эффекты и обрезка содержимого, а заливки и обводки скрываются.
Зачем об этом знать
Объёмные повороты карточек, обложек и элементов интерфейса раньше приходилось имитировать картинками или собирать в других программах. Теперь их можно сделать прямо в макете и сразу получить значения CSS для вёрстки.
Что делать:
- Попробовать 3D transform на карточках товаров или услуг в макете сайта.
- Добавить Perspective родительскому фрейму, если нужен общий объём для нескольких слоёв.
- Скопировать значения CSS в Dev Mode и проверить, как эффект выглядит в браузере.
- Учитывать, что во фрейме с общей 3D-сценой не работают прозрачность, режимы наложения и обрезка содержимого.
Другие новости
Источники
