The Design Team provides experience, interface, and visual design expertise for the WordPress project.
Want to get involved? See our handbook and drop into #design once signed up for volunteer opportunities. Our vision is to be the go-to resource for design for other teams across the open sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project.
Familiarizing oneself with the Figma files in the 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/ account can be difficult. This document will provide a high-level overview of the Figma structure and help anyone become familiar with the files therein.
Figma allows you to design and prototype your WordPress experiences, together, in real-time and in one place.
Figma is built for the browser, so you can use it across any platform (Windows, Mac, Linux, and Chromebook). No downloads or updates required.
For those that prefer the app experience, you can download the Figma Desktop App for Windows and Mac. Or use the Figma Mirror app to take your live presentations to the next level. Learn more and download the apps at https://www.figma.com/downloads/
The WordPress Figma library is read-only but publicly accessible for all to view. The best way to leverage the library is to duplicate the file to your own drafts, that gives you edit access. Otherwise you can copy components into your Figma file.
Direct edit access can be granted if you are an active contributor that has contributed to the library before, perhaps through submission of components in a separate Figma file. If you would like to apply for edit access, you may ask in the #design channel on the Making WordPress Slack.
Please note that every user with edit access costs a monthly sum for the WordPress project, so if you are not using your access, please let us know so we can revoke it. Generally if you haven’t used it in a while, we’ll most likely lower your permissions back down to view. If that happens in error, it should be easy to reinstate it.
Iterate on different versions of a concept or idea
Break up designs by platform or device
Arrange Components and Styles into categories
Track each stage of the design process
Create different Prototyping flows for the same designs
Organize your pages:
Cover: always at the top, to use it as a thumbnail preview.
Iterations: keep the latest at the top organized in descending order.
Current UIUIUI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.: take some screenshots to document how the UI was before working on it. This is extremely valuable to keep track of the evolution of the product, to tell the story in design reviews.
Explorations: for testing different approaches/design patterns including discarded design
You can use the Team Library to access these resources across WordPress.org Team Files and Projects. This allows you to maintain a consistent brand and style, at scale.
This is a shared Figma library, which means its components are used by others. Please don’t make changes unless you are contributing components (see “Contributing components”). For questions, see the feedback section at the bottom of this page.
The 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 Handbook https://developer.wordpress.org/block-editor/