You don’t need edit access to use the Figma libraries, you can copy components from there into your own drafts. If you’re a contributor with the ability to grant edit access, please be mindful, and downgrade to view access once the initial need for edit has waned.
We’re excited to introduce a long requested initiative focused on consolidating and enhancing design system efforts across WordPress.orgWordPress.orgThe community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/. The goal, specifically, is to bring together existing tools like @wordpress/components, the new Figma library, and Storybook into a unified design system reference site that anyone can use to contribute back to WordPress or extend WordPress in line with a shared design language. This means that anyone contributing to WordPress can be confident they are building consistent, accessible, and coherent experiences. This is especially important considering Phase 3 and the Admin Design effort that seeks to make it straightforward for pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party authors to offer great, intuitive user experiences.
Why are we doing this work?
We have had pieces of a design systems in place for years now, but many parts of them need greater support, organization, and strategy, and many patterns still need to be defined. The Figma library requires updating and better organization. For coded components, we need to take inventory and conduct an audit of the components we have and identify what is still needed. Existing components require greater extensibility, additional features, and improved modularity.
Building out a set of sticker sheets for basic elements would be highly useful as starting points for mockups. Some tokenization has been implemented, but continued progress is necessary to fully implement tokens. Similarly, to design and code libraries, there are currently multiple sources of truth for design and developer guidance. We need a single, centralized source of truth that serves as a shared language for how we design, develop, and create the WordPress experience.
Wait, there’s a design system?
Yes, there is! While many of you might be familiar with the Storybook, Figma, and existing component libraries, these resources have largely been focused on specific areas, such as the WordPress blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor. By consolidating these tools and expanding them to include foundational elements like typography, color, and best practices, the aim is to provide a comprehensive system that meets the needs of designers, developers, and users alike.
The benefit of consolidating componentry towards a design system is that all the refinements, best practices, and baked-in accessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) that is already being applied, across teams, will be better documented, elevated, and applied more consistently. This collaboration across design, dev, accessibility can hopefully be elevated further as a result.
The existing Storybook site presents a great opportunity to organize the system, provide more in-depth guidelines and best practices, and connect all the resources together that we all use to continue evolving and improving the WordPress experience.
Why Storybook?
Storybook has been an invaluable tool for cataloging the README.md files that exist for every wordpress component. By expanding its use to include best practices, documentation, and other essential guidelines for how to use a component, color typography, Storybook can become an even stronger tool than it is today.
Automattic is sponsoring a cross functional project team to ensure there’s a dedicated group to drive this forward. We are open to contributions and feedback from the community, see the Next Steps section on how you can help.
In the coming weeks, the project team will be focusing on specific updates to our Figma libraries and Storybook site, as well as setting clear, actionable goals for the design system. It’s important to note that these tools and files already exist and are actively being used. Our mission is to elevate them, connect them, and consolidate them into a more unified system that provides better clarity that allows for flexibility and input from the community.
We realize it’s not been easy to keep up to date with system changes and know how to contribute. We are working on improving this. For now, here’s how to stay updated as we make progress:
Bi-weekly Updates: Join our bi-weekly updates and follow along as we make progress.
Figma: Share your thoughts through drafts and comments in the file. We encourage feedback but please note that editing access is limited to design team members.
GitHubGitHubGitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/: Follow our labels on GitHub to stay updated on where we need help, which Figma files to comment on, and how to contribute effectively.
To help us do that, please share any questions you have around how best to contribute so we can follow up with better guidance.
You must be logged in to post a comment.