Familiarizing oneself with the Figma files in the WordPress.orgWordPress.org The 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.
Overview
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/
Getting Started
How to get Figma access
While Figma accounts have a free tier, the WordPress.org Figma organiazation is a paid plan which means any seat with edit access costs a monthly sum for the WordPress project. So if you have edit access and are no longer using it, 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.
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.
View access is free, but in some cases has to be manually granted. So if there’s a Figma file or folder you would like to view, or duplicate, please get in touch with us and we’ll give you access. Join the WordPress core Slack, and drop into the #design channel and ask there.
Duplicating gives free edit access. 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.
Learning Figma
Once you’re signed in, you can check out the Figma Help Center for getting started tutorials and more.
Structure
Projects
You can use Projects to group Files in one place. Noted that It’s not possible to create subfolders within the Projects.
Project Naming
Make sure you follow the general component guidelines and naming conventions.
- Use the sentence case with spaces.
Files
Set a Custom Thumbnail (Cover)
How to add a cover to your Figma file:
- Create a new page in your document and call it “Cover”. Make sure it’s the first page in your document.
- From the Assets panel, search for figma-cover. You may need to enable the Utilities library for it to show up.
- Select the cover that’s appropriate for the status of your project and drag it anywhere in your Cover page.
- Frame the selection to create a frame around the cover. For consistency, you may want to rename this “Cover”.
- Click anywhere outside the frame to deselect. Change the background of your screen to match the cover.
Cover color codes:
| Status | Color code |
|---|---|
| Archived (do not use) | #D94F4F |
| In design | #F0B849 |
| In development | #4AB866 |
| Shipped | #00669B |
| Design resource/library | #23282D |
Versioning
- Keep titles to 25 characters or less.
- Keep your description to 140 characters or less.
- Use the imperative mood for the title.
- Use the description to explain ‘what’ and ‘why’ versus ‘how’.
Pages
You can use Pages to:
- 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 UIUI UI 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
Team Library
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.
WordPress Design Library
The previous 3 libraries are now combined into one single file. This contains components, styles and icons.
Contribution Workflows
Component Contribution
https://make.wordpress.org/design/handbook/get-involved/wordpress-components/
Useful Figma files
- Gutenberg Post Graphics
If you need to create visuals to go with a GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ update post. - WordPress Design Library
The main file mostly referenced on this page. - WordPress.org Design Library
Design library for the WordPress.org website. - System
Work in progress new design library. - Gutenberg Project Folder (requires view)
References
The BlockBlock Block 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/
Block Support Documentation https://wordpress.org/support/category/block-editor/
You must be logged in to post a comment.