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