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.
To collaborate with content and product teams, Notion designers build prototypes in a "playground" codebase. This allows stakeholders to directly edit text and layouts within curated rails, providing contextual feedback without needing Figma access or coding skills.
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.
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.
As designers code more, the definitive version of the product lives in production, not Figma. This leads to messier, more ephemeral design files, often composed of screenshots with new elements overlaid, a major shift from maintaining pixel-perfect Figma libraries.
Notion A/B tested three modal designs: two innovative, animated versions and one "safe" traditional layout. The safe version converted best, a humbling reminder that basic usability principles, like a large call-to-action button, can often trump creative novelty.
The traditional design exercise of copying UIs pixel-for-pixel is evolving. To build modern craft, designers should instead recreate complex interaction patterns from best-in-class products. This teaches the logic behind easing curves, breakpoints, and responsive behavior.
For designers contributing code, especially for front-end polish, pull requests should be small and manageable (e.g., under 100 lines). This ensures they can thoroughly review their own work and makes it easy for engineers to approve, preventing awkward conversations about large, unvetted code dumps.
Instead of throwing away a designer's "good-looking but poorly-architected" prototype, use an AI agent as a translation layer. Give it the designer's styled code and the engineer's performant code, and instruct it to apply the styling to the functional version.
As tools make adding animations easy, designers risk creating "overcooked" interfaces where every element moves. A mark of a mature designer is restraint—knowing where to intentionally use instant transitions to maintain focus and avoid overwhelming the user with unnecessary motion.
To avoid wasting time on code with flawed architecture, designers should first create a written plan (e.g., an MD file) outlining their intended approach. Getting engineering sign-off on this plan ensures the fundamental logic is sound before using an LLM to generate the front-end code.