Ayoub Kada's seven-step AI design workflow from Figma to App Store experiments
A product designer ships playable experiments: Figma as source of truth, Claude Code with Figma MCP, Kling or Higgsfield for motion, then App Store or live URL.
Motion & Video covers how designers bring work to life: product explainers, show graphics, editable motion templates, lightweight web animation and procedural 2D tools. It is for designers adding motion to their skills, and for motion designers comparing how others plan, build and hand over animation that clients or editors need to change later.
Entries describe what someone made, how it went and what is worth knowing, in 4TC's words and with a link to the source. Each is labelled as a firsthand report, a tutorial or a vendor's story, so you can weigh it accordingly. Start with a 60-second explainer animated from a client's Figma storyboard, building editable motion templates in After Effects, or Cavalry for procedural 2D animation.
A product designer ships playable experiments: Figma as source of truth, Claude Code with Figma MCP, Kling or Higgsfield for motion, then App Store or live URL.
A product designer iterates an avatar through Figma Weave and canvas agents, animates it in Hailuo, then has Claude package an installable PWA on Cloudflare.
A product designer rigs a Mac icon in Rive herself, then has Claude add the animation and cursor-reactive rules through a Rive connection.
An animator times and benchmarks one interactive pack-opening animation built four ways in Rive, and finds the CLI versions cost over 3x more per frame.
Harvey's in-house team describes agents building a launch film, hundreds of tailored demo films and a brand library in Figma via MCP.
A Rive educator messaged Claude Code to build an interactive 3D solar system with the Rive CLI, then moved the sun into his course game.
Adobe’s 2026 story says Trek’s visualization team builds 1:1 bike twins and swaps meshes to reuse approved paint designs.
A freelance motion designer took GWI’s storyboard into Rive and delivered a looping 438 KB web animation in under two weeks.
Rive’s 2025 story says an agency replaced heavy video with nested, scroll-triggered animations built from Illustrator artwork.
Blender Studio’s art director walks through paper doodles, a watercolor mascot, scanned notes and a modeled desk scene.
A 2024 guide explains making After Effects templates with controls so editors can change approved elements without breaking the design.
Rive’s 2024 story says Intercom’s motion designer moved from After Effects and Lottie to Rive and halved file sizes.
An animation studio says it designed a UPI app’s logo and icons and animated onboarding, loading and success or failure states in two weeks.
Blender Studio describes dropping a tree-ring logo because it implied cutting a tree down, and moving to procedurally grown succulents.
A 2020 Frame.io article describes a new agency making a title sequence, logo and broadcast graphics in two months without meeting.
A 2017 Frame.io article walks through a Nickelodeon pilot’s show open, lower thirds, maps and overlays, and the revision deal behind them.
A 2017 Frame.io article shows how a post house kept an explainer on brand when the product had no guidelines of its own.
Adobe presents it as motion graphics and visual effects software.
Adobe presents it as apps for creating, texturing and rendering 3D models and materials.
Blender presents itself as free and open-source 3D creation software.
Cavalry presents itself as free-to-download 2D animation and motion design software for Mac and Windows.
Blackmagic presents DaVinci Resolve as editing, color, effects and audio in one application, in free and paid versions.
Frame.io positions itself as media review, commenting and asset delivery for creative work.
Runway says the agency spent a year testing tools with 26 people before opening a 30-person AI studio in four cities.
Leonardo.Ai presents itself as a generative platform for images and video, with editing and upscaling.
Runway says this 2025 studio uses generative AI on every project, with storyboards drawn by hand and AI used for iteration.
Rive presents itself as an interactive experience engine to design, animate and code in one place and ship to many platforms.
Runway now describes itself as building “real-world intelligence”, with products built on top.
Runway says a Paris studio storyboarded 30 shots with AI, cast a model resembling the generated character, and shot two days on green screen.
Spline presents itself as a 3D design tool in the browser with real-time collaboration for interactive web experiences, with a free plan and paid plans.
Runway says a creative studio animated reference images to fill missing archive footage for Maison Margiela and B-roll for a Madonna film.
Runway says a three-person graphics team made a season of textbook-style animal graphics, keeping producer approval before animating.
Runway says production company Tool made an Anthony Joshua spot in four weeks without the athlete present.
Runway says a production team portrayed eleven displaced-background footballers as children without a shoot, then finished the film on 16mm.
Adobe’s Frame.io story says YETI keeps every cut, version and asset in one cloud library and reuses surplus documentary footage.
Zapier’s brand team describes building an event identity with Midjourney imagery, automated session assets and personalized badges.