OpenClaw LaunchOpenClaw Launch
🎬

Motion Design Guide

Verified

by Community

Defines motion design principles and specifications including timing, easing curves, transition types, and animation patterns. Creates a cohesive motion language that enhances usability and brand personality.

motionanimationtransitionsmicro-interactions

Motion Design Guide

Create consistent motion design that enhances usability and brand personality.

Usage

Describe your product to get motion design guidelines.

Examples

  • "Define a motion design system for our web application"
  • "Create transition specifications for page navigation"
  • "Design micro-interactions for form validation feedback"

Guidelines

  • Use motion to communicate state changes and relationships
  • Define consistent duration scales (fast: 150ms, medium: 300ms, slow: 500ms)
  • Choose easing curves that feel natural and responsive
  • Respect prefers-reduced-motion for accessibility
  • Keep functional animations under 300ms for responsiveness

More Design Tools Skills

🎨
Figma Auto Layout

Master Figma auto layout for responsive designs.

💎
Sketch Symbol Organizer

Organize Sketch symbols and shared styles efficiently.

🎯
Design Token Manager

Create and manage design tokens for consistency.

🔣
Icon Set Generator

Create consistent icon sets for your product.