MetaMask / MetaMask/metamask-design-system
Tokenize motion principles in the design tokens
- 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
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