Wikimedia Apps/Components Library Project
Introduction
[edit]This page talks about the Wikipedia Mobile Apps team’s work to create component libraries for iOS and Android. Inspired by the work of the Design System Team, the Android and iOS teams are working towards creating a modern components library, which will help to improve design and handoff processes with a focus on consistency, clarity and time efficiency.
Some current pain points:
- Inconsistencies across the apps due to implementation drift
- Older UI components that require updates and modernization in order to match platform expectations
- Legacy designs exist in a mix of Sketch and Figma files, making it hard to quickly update older features, design new screens or share work across designers on the apps teams
Potential benefits of a components library:
- Increase speed of design work by up to 30%
- Simplification of future updates to the component library (eg. updates for OS changes / new features)
- Improve consistency across the app and with the Design System Team
- Improve consistency with native platform style guides (HIG and Material 3)
- Onboard new designers, volunteer contributors and engineers with more ease
- Reduce complexity and simplify handoff and collaboration across engineering and design
To participate in and follow this project's development, we recommend adding this page to your watchlist.
We will use this page to:
- Share and invite feedback on designs
- Announce updates in design, testing and development
Additionally you can follow along with the design and development of the component libraries on Phabricator:
Areas of work
[edit]Foundations
[edit]Foundational components are building blocks that will be used to build other components and are blockers for more complex components. These foundational components will be completed first before moving onto the rest of the system.
Foundation components include: Colors, Typography, Icons, Spacing and Margins, Offline Support and Accessibility.
Core components
[edit]Core components are made up of foundational components and represent the basic views and interactive elements in the apps. Some Core components are blockers for more complex components and therefore will need to be developed first.
Core components that are blockers for other components include but are not limited to: Buttons, List views, Cards and card styles, Forms, Search and type ahead, Selection, Toolbars, Navigation bars.
Core components that are not blockers for other components but are essential to build the apps include but are not limited to: Alert styles, User education, Empty states, Dividers, Progress indicators, Menus, Chips.
Growth of the system
[edit]Future work which may or may not be addressed in this project, but which would help to make the component libraries robust and fully featured.
Future work opportunities include but are not limited to: Animation, Illustrations, Charts and graphs, Voice and tone, Keyboard shortcuts, Images and imagery.