Design System Team/Projects/Design and define design tokens
Design and define design tokens
Design tokens are the smallest pieces of our design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for user-interface development.
|
Project Overview & Background edit
Design tokens represent systematic design decisions upon which the style and behavior of components and patterns are exclusively based. In the words of the W3C Design tokens community group: “Design tokens are a methodology that allows sharing stylistic pieces of a design system at scale”.
Over the course of a few years, architectural decisions on the use of centralized style(sheet) variable definitions (starting as WikimediaUI Base variables, now referred to as design tokens) have accumulated in a number of tasks and places in MediaWiki and Wikimedia resources.
Goals of design tokens edit
- Consistent values in development
- Set of predefined, centralized, limited and traceable design decisions
- Single source of truth for design to development handover
A nice write-up on design tokens can be found at CSS-Tricks, featuring this summary from term creator Jina Anne:
With design tokens, you can capture low-level values and then use them to create the styles for your product or app. You can maintain a scalable and consistent visual system for UI development.
Timeline edit
Project phases come from Wikimedia Foundation's Inclusive Product Development playbook.
Phase | What? | How?
(Epics) |
Target Start | Target Completion | Status |
---|---|---|---|---|---|
Strategize | Articulate “why” and “for whom?”
Assess team's capabilities to deliver. Surface dependencies and risks. Establish community engagement strategy. |
Decide on design tokens architecture for Wikimedia Design System and its shared component library | July 2021 | March 2022 | Done |
Discover | Better understand the needs and goals of target audience | ||||
Define | Turn research, insights, etc. into an addressable and achievable scope of work with a concise problem statement. | Resolve key questions for design of shared component library T287532
Resolve key questions for development of shared component library T286946 |
July 2021 | March 2022 | Done |
Develop | Design and development of solutions and experiments from the DEFINE phase, in preparation for the DELIVER phase. | Publish design tokens to Figma T295991 | November 2021 | November 2022 | Done |
Deliver | Deliver and test final code and/or interface. This could be either for delivering a smaller scaled test or final scaled experience to production. | Publish the design-tokens package in NPM T322274 | November 2022 | November 2022 | Done |
Enable and document use of Codex design tokens within MediaWiki T325237 | December 2022 | February 2023 | Done | ||
Replace mediawiki.ui variables with mediawiki.skin.variables | March 2023 | TBD | In progress | ||
Provide Codex tokens a single source of truth including WikimediaUI Base T318016 | TBD | TBD | Not done | ||
Own | Monitor and refine based on positive and negative impacts resulting from the product/code delivered. | Documentation for designing tokens T295605 | November 2021 | January 2023 | Done |
Updates edit
edit
- Codex design tokens* in MediaWiki core are enabled as of v1.41.0 via
mediawiki.skin.variables.less
edit
- Codex design tokens are now available for use in MediaWiki as Less variables - Codex#Using Codex design tokens
edit
edit
- Codex design-tokens patch released on NPM with version 0.4.0 and internally in MediaWiki's foreign resources registry (the latter only includes the Less variables for now)
- Project page created
How to Engage edit
We welcome and encourage your participation in this initiative. Here are some ways to engage:
- Add this page to your watchlist
- Add your questions, concerns, and ideas to the talk page
- Subscribe to relevant Phabricator tasks, linked above
- For Wikimedia Foundation staff: join the #talk-to-design-system-team Slack channel