UI Motion Design Specs Template

0 ratings

UI Motion Design Specs for Sketch & Figma is a template to prepare specification of animations, transitions, and microinteractions for the Developers.

The method of the specification is based on timeline charts. Specs describe the type, time and duration of specific animated elements. The template was successfully used in the real collaboration with Front-End Software Developers.

The Sketch & Figma file with Motion Design Specs Template includes:

Detailed information how to efficiently use the template

Properties & Animation Duration Components

Components adjust their size to the animation duration. They also use shared styles and color variables to maintain consistency.

Properties & Animation Duration Components

5 Easing Curve Templates:

  • EaseIn
  • EaseOut
  • EaseInOut
  • Linear
  • Custom

Easing Types

3 Chart Templates

  • Short - 500ms
  • Medium - 1000ms
  • Long - 1500ms

Motion Specs Templates

Sample Motion Specs with Sample Data

Full idea of the Motion Design Specs and the description of the specs template usage is available here:


I want this!
Quick Start Guide

UI Motion Design Specs Template

0 ratings
I want this!