Screenshot 2024-05-30 at 9.27.14 PM.png

Motion Design System Showcasing Steps and current status

  1. Motion Branding

we started with a few words that describe our brand and a few visual clues on how motion should feel in Jupiter.

2. Motion Fundamentals

Based on those brand words, I experimented with the same transition but different easing and duration and decided which easing style gonna make sense for us. then I define the easing and duration tokens based on this experiment.

2.1 Easing Style:  Types and Tokens

Defined easing based on motion purposes

2.2 Duration Tokens:

Defined Duration tokens

3. UI Components

After defining Motion fundamentals, I jumped into Component interactions and Motion. It was very fast-paced, so I didn't get into the research part much.This is the current update on components that require Motion.

3. UI Component: