Get your free personalized podcast brief
We scan new podcasts and send you the top 5 insights daily.
Instead of writing complex descriptive prompts for animations, designers at Notion sketch keyframes in Figma, take screenshots, and feed them to an LLM. The AI's computer vision interprets the visual steps and generates the animation code, streamlining the motion design process.
Related Insights
Contrary to traditional digital design, the modern AI-assisted workflow involves broad, conceptual exploration on canvas-like tools (e.g., Paper) and sweating the final visual details directly in code. Pixel-nudging in design software like Figma is becoming obsolete for last-mile fit and finish.
At Notion, engineers build features to 80-90% completion. Designers then take over, shipping small, focused pull requests for the final visual polish, animation, and craft. This "last mile" is a designer's superpower where LLMs currently fall short.
AI-powered "vibe coding" is reversing the design workflow. Instead of starting in Figma, designers now build functional prototypes directly with code-generating tools. Figma has shifted from being the first step (exploration) to the last step (fine-tuning the final 20% of pixel-perfect details).
Developers can create sophisticated UI elements, like holographic stickers or bouncy page transitions, without writing code. AI assistants like CloudCode are well-trained on animation libraries and can translate descriptive prompts into polished, custom interactions, a capability many developers assume is beyond current AI.
The handoff between AI generation and manual refinement is a major friction point. Tools like Subframe solve this by allowing users to seamlessly switch between an 'Ask AI' mode for generative tasks and a 'Design' mode for manual, Figma-like adjustments on the same canvas.
Hera's core technology treats motion graphics as code. Its AI generates HTML, JavaScript, and CSS to create animations, similar to a web design tool. This code-based approach is powerful but introduces the unique challenge of managing the time dimension required for video.
The key to high-quality, editable vector graphics (SVGs) from AI is to treat them as code. Instead of tracing pixels from a raster image, Quiver AI's models generate the underlying SVG code directly. This leverages LLMs' strength in coding to produce clean, animatable, and easily modifiable assets.
Instead of describing UI changes with text alone, Google's AI Studio allows users to annotate a screenshot—drawing boxes and adding comments—to create a powerful multimodal prompt. The AI understands the combined visual and textual context to execute precise changes.
A designer built an animated modal in a lightweight "playground" environment. To move it to production, they fed the entire code directory to an LLM and asked it to "make this work in production." The LLM flawlessly translated it, shocking the engineering team.
Notion built a `/figma` command that enters a "verification loop." It uses multi-modal tools to open the browser, visually compare its coded implementation to the original Figma file, and automatically iterate on the code until it matches. This moves beyond simple generation to a self-correcting system.
