Motion Foundation
Build an AI-ready Motion Foundation without starting from scratch
Turn inconsistent animations into usable motion logic your team can customize, document, and hand off to development
Trusted by designers from
Motion gets messy when animations lack shared purpose. Most teams lack shared rules for timing, feedback, and reduced motion
_
Most motion systems stop before they become usable infrastructure
Having animations is not the same as having duration tokens, easing rules, reduced-motion behavior, and handoff logic
of teams connect tokens across design tools, code, and documentation
Source: zeroheight, 2026
+
of developers and designers say handoff between design and code could be improved
Source: Figma, 2025
1
Local animations
Motion decisions made locally without shared motion rules
2
Shared values
Reusable animations grouped by visual effect or interaction pattern
3
Primitive tokens
Durations and easing curves organized into a structured token model
4
Semantic roles
Motion tokens mapped to feedback, transitions, and system behavior
5
Documented rules
Rules explain purpose, duration, easing, reduced motion, and edge cases
6
System layer
AI context, handoff, accessibility, and teams share one motion model
Bring structure to your motion system, wherever you're starting from
Start from scratch, clean up existing animations, prepare handoff, or customize your motion logic with AI
Start with purpose, not just animation
Turn duration, easing, and transitions into reusable rules for feedback and speed
Turn animation values into a system
Audit motion patterns, fix inconsistent timing, and define shared motion behavior
Use AI without breaking motion logic
Adapt motion tokens with AI while preserving accessibility and implementation meaning
Bridge between design and code
Connect motion roles to tokens, reduced motion, and implementation guidance
From inconsistent animations to usable motion logic
Turn disconnected animation values into a structured system for timing, easing, feedback, reduced motion, and dev handoff
Inconsistent animation timing
Defined duration tokens with clear usage logic
Random easing choices
Easing rules tied to motion purpose
Developers guess animation values
Developer-readable motion handoff
Motion used as decoration
Motion tied to feedback, orientation, and usability
Reduced-motion behavior missing
Reduced-motion guidance built in
Transitions handled differently across product flows
Motion tokens mapped to implementation rules
Turn visual animation choices into reusable motion roles
Replace disconnected animations with semantic roles for feedback, transitions, loading, reduced motion, and handoff
Before
Local animations, mixed timing, unclear purpose, and repeated decisions
After
Duration tokens, easing rules, reduced-motion behavior, and developer handoff
Customize, document, and hand off your motion foundation
Adapt motion roles, document timing rules, and give devs logic for duration, easing, transitions, and reduced-motion behavior
Figma file
fig
Build from a structured motion foundation with duration tokens, easing tokens, semantic motion roles, and documentation in one file
Setup guide
Customize your timing scale, easing rules, feedback patterns, and reduced-motion behavior step by step without breaking the system structure
AI prompts
Audit motion usage, adapt timing roles, review accessibility risks, and prepare handoff with repeatable prompts
AI context
MD
Give an LLM the motion rules and constraints for safer customization
Gemini Notebook
MD
Explore the system and generate briefings from one source
Accessibility
MD
Review reduced motion, distracting movement, flash risk, and animation risks
Dev handoff
MD
Explain motion roles, token mapping, reduced-motion behavior, and implementation
Make motion decisions easier for devs to implement consistently
The dev handoff file explains duration, easing, transition rules, and reduced-motion behavior before implementation
Token meaning
Explain what motion tokens represent and how to use them in design and code
Timing logic
Clarify duration, easing, feedback, transition, loading, and attention relationships
Usage rules
Show where motion roles should and should not be used to avoid local exceptions
Implementation notes
Give developers the logic behind motion and implementation
Use AI with motion system context, not generic prompts
Give Claude or another LLM the rules, constraints, and motion logic it needs to help without inventing a new system
OpenAI frames context optimization as a core lever for improving LLM accuracy
Source: OpenAI, LLM Accuracy Guide
Role-safe changes
Adapt duration, easing, feedback, transitions, and naming without breaking the model
System-aware audit
Find inconsistent timing, unclear purpose, duplicate animations, and weak transitions
Accessibility review
Check reduced-motion behavior, distracting movement, flash risk, and long-running motion
Handoff-ready notes
Turn motion logic into clearer implementation explanations for developers
Design Systems Surf has been really helpful in expanding my knowledge of design systems and best practices. The content is practical, well-structured, and easy to apply directly to my work
Piotr Wojtasiewicz
Developer
Use Motion Foundation when animation decisions get inconsistent
Whether you are starting from scratch, cleaning up existing motion values, defining feedback rules, or preparing developer handoff
Start from scratch with a motion system
When you are building a new product or design system, motion decisions can turn into disconnected animation values quickly. Motion Foundation gives you a structured model from day one: duration tokens, easing tokens, semantic motion roles, documentation, AI context, accessibility notes, and developer handoff
Outcome
You start with a motion foundation that is ready to customize instead of inventing every timing, easing, and transition rule from zero
Adapt existing animations into product roles
Audit messy timing and easing
Prepare handoff without guesswork
Deliver client-ready motion foundations
Built for teams and designers working on motion systems
Use Motion Foundation when timing, easing, feedback, transitions, and reduced-motion need structure, documentation, and handoff
01
Product designers
Turn product interactions into reusable motion roles for feedback, transitions, and flows
02
UI designers
Turn visual animation choices into rules for timing, easing, feedback, and usability
03
Freelancers and agencies
Deliver motion systems with documentation, accessibility, handoff, and AI context
04
Design system leads
Turn existing motion decisions into rules for timing, easing, feedback, and usability
Based on analysis of 100+ design systems. Patterns translated into a reusable motion foundation
Since 2023, Design Systems Surf has cataloged mature design systems across foundations, components, documentation, and implementation patterns.
Motion Foundation turns that research into reusable timing roles, easing rules, motion principles, AI context, accessibility guidance, and handoff.
Save 16–24 hours on motion system work and documentation
Motion Foundation removes repetitive setup, documentation, AI context, accessibility, and handoff work
Trusted by designers working on design systems
Feedback from people building, auditing, documenting, and maintaining design systems
10k+
Designers across 175+ countries follow Design Systems Surf for design system examples, patterns, and practical resources
What to know before you start
Clear answers about what Motion Foundation includes, how it can be customized, and how it fits into real design system work
Is this just a Figma template?
No. The Figma file is one part of the package. Motion Foundation also includes AI context .md, NotebookLM source .md, setup guidance, AI prompts, accessibility .md, and dev handoff .md.
The Figma file gives you the working motion system. The Markdown files support different AI workflows: customization, knowledge exploration, accessibility review, and developer handoff.
What is included?
Motion Foundation includes a Figma file, AI context .md, NotebookLM source .md, setup guide, AI prompts, accessibility .md, and dev handoff .md.
The Figma file gives you motion tokens, duration rules, easing rules, semantic motion roles, reduced-motion guidance, examples, and documentation. The Markdown files give AI tools the system context needed to help you customize, explore, review, document, and hand off your motion foundation with less guesswork.
Can I customize it?
Yes. You can adapt duration tokens, easing tokens, transition rules, feedback patterns, reduced-motion behavior, and naming.
The goal is to customize the motion system without breaking usability logic, accessibility review, or implementation meaning.
Will this fit my brand?
Motion Foundation is not tied to one fixed animation style. You bring your product or brand direction and map it into product-ready motion roles.
If your current motion language has gaps, for example inconsistent timings, random easing curves, distracting transitions, or missing reduced-motion behavior, the setup workflow and AI-ready Markdown files help you identify what needs review before implementation.
Can I use it with an existing design system?
Yes. You can use Motion Foundation as a reference model to audit or repair an existing motion system.
It can help you find inconsistent duration values, duplicate transition patterns, unclear motion purpose, missing reduced-motion logic, and gaps in developer handoff. You do not need to replace your whole design system to use it.
Do I need to use AI?
No. You can use the Figma file and setup workflow manually.
AI is optional, but several supporting files are designed primarily for AI-assisted workflows. The AI context .md helps with safe customization. The NotebookLM source .md helps with knowledge exploration, Q&A, and briefings. The accessibility .md helps AI review foundation-level motion risks. The dev handoff .md helps AI generate developer-facing implementation notes.
Are the Markdown files standalone guides?
They are Markdown files, but they are not all traditional standalone guides.
You can read them manually, but their main purpose is to support AI-assisted workflows. Each .md file has a different role: customization context, NotebookLM knowledge source, accessibility review context, or developer handoff context.
What does the NotebookLM source do?
The NotebookLM source .md is a structured knowledge file for exploring the motion foundation.
You can upload it to NotebookLM and ask questions about duration tokens, easing rules, motion purpose, reduced-motion behavior, accessibility concerns, and implementation logic. It helps turn the foundation into a searchable knowledge source for you, your team, or your client.
What does the accessibility file do?
The accessibility .md is designed mainly for AI-assisted review.
It gives AI the review logic for foundation-level motion risks such as reduced-motion behavior, flash risk, long-running animation, distracting movement, and interaction-triggered motion. It does not guarantee accessibility by itself. You still need to review the actual values and product usage after customization.
What does the dev handoff file do?
The dev handoff .md is designed mainly for AI-assisted handoff generation.
It gives AI the structure to generate developer-facing notes from your customized foundation, including duration token meaning, easing usage, transition rules, reduced-motion implementation, implementation risks, and CSS-oriented token mapping. Developers still need to adapt the output to their codebase, naming conventions, and token pipeline.
Does this include components?
No. Motion Foundation covers the motion foundation layer: duration tokens, easing tokens, semantic motion roles, transition rules, reduced-motion behavior, accessibility review logic, and developer handoff context.
It may include examples that show how motion roles work, but it is not a production component library.
Does this include animation presets?
No. Motion Foundation is not an animation preset pack, microinteraction library, or motion inspiration product.
It may include examples that show timing, easing, and transition behavior, but the product is focused on reusable motion logic, not ready-made animation effects.
Does this support reduced motion?
Yes. Motion Foundation includes structure for reduced-motion behavior, motion purpose, transition review, and implementation guidance.
You still need to review your actual motion values, product flows, and code implementation after customization, especially for continuous motion, attention patterns, and interaction-triggered animation.
Who is this for?
Motion Foundation is for product designers, UI designers, freelancers, agencies, design system leads, design system engineers, consultants, and teams that need to build, repair, document, review, or hand off a structured motion system.
Is this for beginners or advanced teams?
Both, but for different reasons.
For newer teams, it gives a structured starting point instead of a blank canvas. For mature teams, it works as an audit, repair, documentation, and handoff reference for weak or inconsistent motion foundations.
How is this different from building it myself?
You can build this yourself. The difference is that you would need to create the token architecture, duration scale, easing logic, semantic motion roles, reduced-motion rules, setup workflow, AI context, NotebookLM source, prompts, accessibility review logic, and handoff structure from scratch.
Motion Foundation gives you that structure so you can focus on adapting it to your product, brand, team, or client.
Will developers be able to use it?
Yes, but not as a drop-in code package.
The dev handoff .md helps generate developer-facing notes from the foundation. It explains duration token meaning, easing usage, transition rules, reduced-motion behavior, implementation risks, and CSS variable mapping. Developers still need to adapt the output to their codebase and implementation workflow.
Can I use this for client work?
Yes. You can use Motion Foundation as part of paid client work and deliver a customized foundation to your client.
You cannot resell, redistribute, or repackage the original product as a standalone product or template unless the license explicitly allows it.
What is not included?
Motion Foundation is not a UI kit, component library, animation preset pack, microinteraction library, motion inspiration guide, or automatic accessibility guarantee.
It gives you the foundation structure, workflow, AI-ready Markdown files, review logic, and handoff structure. You still need to customize values, review the result, and adapt implementation to your product or client environment.
Still have questions?
Reach out at hey@designsystems.surf
