---
title: 3D transforms ve Figmě: agent počítá hloubku a staví plugin
date: 2026-11-13
edition: 2026-11-13
rubric: AI-driven design
perex: Figma Brand Studio ukázala, jak s 3D transforms, Figma agentem, shadery a Figma Motion vytvořila launch video celé na canvasu. Funkce je v open beta pro všechny Full seaty.
topics: [figma, motion, ai-agenti]
---

Figma 12. 11. 2026 zveřejnila rozbor toho, jak její Brand Studio postavila video k funkci 3D transforms. Zajímavé není video, ale pracovní postup: prostorové skládání, které by ručně trvalo hodiny, svěřili agentovi.

## Co je nového / Jak to funguje

3D transforms umožňují naklonit, otočit a rozmístit v prostoru text, obrázky, vektory i snímky. Perspektivu zapneš na rodičovském snímku a děti pak sdílejí společnou prostorovou kompozici. Efekty jsou nedestruktivní: originál zůstává upravitelný a vektory zůstávají editovatelné i s hloubkou.

Tým popisuje čtyři postupy:

- **Typografie:** agent rozmístil kopie slova podél osy Z a pak s ním tým vytvořil komponentu trubice s textem na povrchu; duplikáty sloužily k porovnání počtu, rozestupů a rotace.
- **Expresivní layouty:** agent vygeneroval plugin, který rozmístí prvky do mřížky, helixu, kruhu nebo náhodného rozptylu, s ovladači orientace a rozestupu.
- **Dimenzní ilustrace:** vektorová květina ve 3D, barvená shaderem gradient map, jehož posun se animuje.
- **Spolupráce:** barvy se měnily přes komponenty i po animaci a změna se přenesla do pohybu.

## Proč je to důležité

Ukazuje se opakující trend: agent nejen kreslí, ale vyrábí si nástroje (pluginy) a počítá geometrii. Brand a motion designéři podle Figmy pracovali v jednom souboru bez předávání assetů. Pro vývoj: v Dev Mode zkopíruješ CSS transform 3D vrstvy včetně hloubky a rotace na každé ose a kódovací agenti umí 3D návrhy číst i vytvářet přes Figma MCP server. Post neuvádí žádná měřitelná čísla; jde o popis výrobce.

## Jak začít

1. Na rodičovský snímek s několika prvky zapni 3D perspektivu (open beta pro Full seat).
2. Požádej agenta o rozestupy po ose Z nebo o plugin na rozmístění.
3. Přidej shader a v Figma Motion si prohlédni pohyb přes klíčové snímky.
4. V Dev Mode zkopíruj CSS transform pro vývoj.
5. Vyzkoušej komunitní playground soubor s příklady od Figmy.

## Zdroje

- [Figma blog: How 3D transforms and Figma's agent brought a launch video to life](https://www.figma.com/blog/how-3d-transforms-and-figmas-agent-brought-a-launch-video-to-life/)