MetaMask / MetaMask/metamask-design-system

Tokenize motion principles in the design tokens

Open
#301 0 comments 0 reactions 0 assignees View on GitHub
team-design-system
Dominant language
TypeScript
Stars
37
Forks
14
Avg merge
1d 9h
Merged PRs (30d)
60

Description

### **Description**

Create a framework to tokenize MetaMask's motion design principles, encapsulating transition types, easing, and duration. This task aims to standardize motion design across the product for consistency and alignment with MetaMask's design guidelines.

### **Technical Details**

- **Transition Types**:
1. **Context Change**: Tokenize parameters to represent transitions for changes in context. Reference: [[Context Change](https://www.notion.so/Transition-0dcfd0a6f89343eb8ffd79b726931c06?pvs=21)](https://www.notion.so/Transition-0dcfd0a6f89343eb8ffd79b726931c06?pvs=21).
2. **Drill In & Out**: Define tokens for motions that handle hierarchical navigation. Reference: [[Drill In & Out](https://www.notion.so/Transition-0dcfd0a6f89343eb8ffd79b726931c06?pvs=21)](https://www.notion.so/Transition-0dcfd0a6f89343eb8ffd79b726931c06?pvs=21).
3. **[Slide Forward & Back](https://www.notion.so/Transition-0dcfd0a6f89343eb8ffd79b726931c06?pvs=21)**: Include tokenized values for lateral navigation. Reference: [Slide Forward & Back](https://www.notion.so/Transition-0dcfd0a6f89343eb8ffd79b726931c06?pvs=21).
4. **[Enter & Exit](https://www.notion.so/Transition-0dcfd0a6f89343eb8ffd79b726931c06?pvs=21)**: Add tokens for elements entering or exiting the viewport. Reference: [Enter & Exit](https://www.notion.so/Transition-0dcfd0a6f89343eb8ffd79b726931c06?pvs=21).
5. **[Continuity](https://www.notion.so/Transition-0dcfd0a6f89343eb8ffd79b726931c06?pvs=21)**: Tokenize continuous transitions for maintaining flow. Reference: [Continuity](https://www.notion.so/Transition-0dcfd0a6f89343eb8ffd79b726931c06?pvs=21).

- **Easing**:
- Tokenize predefined easing functions (e.g., ease-in, ease-out, ease-in-out) and ensure alignment with motion principles.

- **Duration**:
- Define duration tokens for common motion timings to ensure consistency across the product.

- Deliver these tokens in a format compatible with MetaMask's design system and codebase.

### **Acceptance Criteria**

- All five transition types are tokenized and documented with their use cases.
- Easing functions and duration values are tokenized and included in the documentation.
- The tokens are integrated into the MetaMask design system with examples for implementation.
- Guidelines for developers on when and how to use each motion token.
- Validation through a prototype demonstrating the tokenized transitions in action.

### **References**

- [[MetaMask Motion Design Principles](https://metamask-consensys.notion.site/Motion-13ff86d67d6880bfafd0ec499bb87489?pvs=73)](https://metamask-consensys.notion.site/Motion-13ff86d67d6880bfafd0ec499bb87489?pvs=73).
- Transition-specific references as listed.
- Relevant Slack threads or GitHub discussions, if applicable.

Contributor guide

Open the contributing guide

Research direction

No files, tests, or code entry points are named. Start by reading the linked MetaMask Motion Design Principles and transition references, then identify the design-system token format and integration point; done means all five transition types, easing, and duration tokens are documented, integrated with examples, and demonstrated in a prototype.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.