Tools: Figma

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/

Top ↑

Getting Started

Top ↑

How to get Figma 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.

Screenshot showing the WordPress Design Library in Figma, with a dropdown of options for duplicating the file.
To duplicate the library, click the chevron next to the title and select “Duplicate”.

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.

Top ↑

Learning Figma

Once you’re signed in, you can check out the Figma Help Center for getting started tutorials and more.

Top ↑

Structure

Top ↑

Projects

You can use Projects to group Files in one place. Noted that It’s not possible to create subfolders within the Projects.

Top ↑

Project Naming

Make sure you follow the general component guidelines and naming conventions.

  • Use the sentence case with spaces.

Top ↑

Files

Top ↑

Set a Custom Thumbnail (Cover)

How to add a cover to your Figma file:

  1. Create a new page in your document and call it “Cover”. Make sure it’s the first page in your document.
  2. From the Assets panel, search for figma-cover. You may need to enable the Utilities library for it to show up.
  3. Select the cover that’s appropriate for the status of your project and drag it anywhere in your Cover page.
  4. Frame the selection to create a frame around the cover. For consistency, you may want to rename this “Cover”.
  5. Click anywhere outside the frame to deselect. Change the background of your screen to match the cover.

Cover color codes:

StatusColor code
Archived (do not use)#D94F4F
In design#F0B849
In development#4AB866
Shipped#00669B
Design resource/library#23282D

Top ↑

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’.

Top ↑

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:

  1. Cover: always at the top, to use it as a thumbnail preview.
  2. Iterations: keep the latest at the top organized in descending order.
  3. 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.
  4. Explorations: for testing different approaches/design patterns including discarded design

Top ↑

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.

Top ↑

WordPress Design Library

The previous 3 libraries are now combined into one single file. This contains components, styles and icons.

Top ↑

Contribution Workflows

Top ↑

Component Contribution

https://make.wordpress.org/design/handbook/get-involved/wordpress-components/

Top ↑

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/

Last updated: