Guides
Practical guides for Figma, After Effects, Claude Code and Codex. Build better UI motion on macOS and Windows.
Figma, After Effects, Claude Code & Codex
Refine a Figma screen, import it into After Effects and animate a product demo with Claude Code or Codex on macOS and Windows.
Fix missing MotionUI tools, unavailable compositions, app-opening errors and expired sign-ins in Claude Code or Codex on Mac and Windows.
Send an After Effects composition and animation brief to Claude Code or Codex, review the proposed plan, and apply it through the connected agent.
Animate a row of three UI cards with MotionUI presets, coordinated timing, and easing while keeping your After Effects timeline easy to refine.
Fix stiff starts, floaty finishes, and simultaneous UI entrances with MotionUI easing controls and practical After Effects timing adjustments.
Make three UI cards react to a moving cursor with MotionUI Proximity. Set up the effector, pair layers, and tune Radius and Strength.
Use MotionUI to animate interface text by character, word or line in After Effects, with practical checks for hierarchy, timing and gradients.
Animate a left-anchored UI panel in After Effects with MotionUI rectangle rigs, compare nine origins, and keep labels readable during expansion.
Prepare two UI layer sets in one After Effects composition, build a MotionUI Matchcut transition, and check the handoff for readable motion.
Hand off a MotionUI Figma animation with its After Effects assets, organized compositions, available fonts, and a second-machine check.
Import a Figma frame into After Effects with MotionUI on macOS or Windows, check editable layers, and animate a dashboard card.
Choose editable layers or PNG assets in MotionUI, then import a Figma card with text, a soft shadow, and a complex illustration into After Effects.
Choose Single or Groups as precomps in MotionUI, test a dashboard frame, and organize sidebar, navigation, and card animations in After Effects.
Fix Figma text reflow, font substitutions, and styling differences in After Effects with MotionUI, and choose when to keep text editable or rasterize.
Fix cropped, oversized, or misplaced Figma imports with MotionUI by checking frame size, composition destination, and layer scale.
Diagnose a waiting MotionUI import with a small test shape, linked-file checks, Figma foreground testing, and After Effects panel checks.
Connect Claude Code to After Effects with MotionUI on Mac or Windows, verify access to your composition, and make your first editable animation.
Connect Codex to After Effects with MotionUI on Mac or Windows, verify access to your composition, and make your first editable animation.
Write useful After Effects prompts for Claude Code and Codex, with exact layers, timing, easing and a plan to approve before edits.
Animate a SaaS dashboard with Claude Code or Codex and MotionUI: inspect imported layers, reveal navigation, sequence metric cards, and emphasize a chart.

Choose direct import, manual animation or Claude Code and Codex on macOS and Windows.

A simple way to plan clearer UI animation before you touch the timeline.

Use hierarchy and a clear rhythm to make busy interfaces easier to follow.

Keep the viewer oriented when your product story moves to a new screen.