Editorial illustration for Figma adds animation, transition and 3D transform support in latest update
Figma adds animation, transition and 3D transform...
Figma adds animation, transition and 3D transform support in latest update
Figma rolled out a substantial update on Wednesday, adding a code layer to its collaborative canvas alongside native support for animations, transitions and 3D transforms. The new code layer lets teams clone repositories and pull flows from existing code directly into design layers for testing, a move that builds on last year’s AI‑driven prototyping tool, Figma Make, and recent integrations with Claude Code and Codex.
Yuhki Yamashita, Figma’s chief product officer, explained that the feature is meant to shift focus from polishing production‑ready code to rapid, spatial exploration. “We think the multiplayer canvas is really powerful because this is an environment where you don’t really care about the quality of the code. If you’re rapidly exploring or need to kind of explore a bunch of new directions, you can do that in this spatial way,” he said on a call.
Beyond code, designers can now embed motion and shader effects without hopping to external tools, streamlining the workflow from concept to interactive prototype. The update also opens the door for custom plug‑ins built with AI, promising a more integrated design‑to‑development pipeline.
Figma now also supports animations, transitions, and 3D transforms. Previously, designers had to create animations in other software and convert it to code that the app could understand. Now designers can integrate animations and transitions directly into Figma.
You can now use AI to create some of these assets, and the update is adding support for adding shader effects and fills using AI, too. Figma acquired node-based tool Weavy, which helped designers run workflows through different models to compare outputs, last year, and is now working to integrate the two apps better.
Why this matters
We see Figma moving deeper into code. Can this truly narrow the gap between design and development? The new code layer promises tighter hand‑off, yet it remains unclear how seamless the transition will be for developers accustomed to separate IDEs.
By embedding animations, transitions and 3D transforms, designers no longer need to export assets to another tool, which could shave steps from the prototyping pipeline. Our team notes that the AI‑driven plug‑in creation feature may speed repetitive tasks, but the reliability of AI‑generated code has yet to be proven in production environments. The earlier Figma Make prompt system and integrations with Claude Code and Codex suggest a roadmap toward more integrated design‑to‑code workflows; however, the practical impact on version control and collaboration workflows is still uncertain.
For founders, the update could lower the barrier to building interactive mock‑ups, yet the cost‑benefit balance will depend on how well the new features mesh with existing development stacks. Researchers may find a richer testbed for studying human‑AI interaction in design, though empirical data on usability is not yet available.
Further Reading
- Product Hunt - AI Tools - Product Hunt
- There's An AI For That - TAAFT
Related Reading
AI Tools & Apps Demystifying AI Workflows: 7 Tools That Boost Transparency and Efficiency
AI Tools & Apps Google expands AI notification summaries to Android, limited to chat apps
AI Tools & Apps Jimdo Companion AI Dashboard Offers Solopreneurs a Real-Time Business Advisor
From Archives Agentic observability unites telemetry to cut incident investigation time
From Archives