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 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 Getting Started

How to get Figma access How to get Figma access

The WordPress Figma library is publicly open and available for all to view. If you require edit access to contribute design work to a new or existing project, please pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” in #design channel on the Making WordPress Slack.

Top ↑

Learning Figma Learning Figma

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

Top ↑

Structure Structure

Top ↑

Projects 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 Project Naming

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

  • Use the sentence case with spaces.

Top ↑

Files Files

Top ↑

Set a Custom Thumbnail (Cover) 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 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 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 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 WordPress Design Library

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

Top ↑

Contribution Workflows Contribution Workflows

Top ↑

Component Contribution Component Contribution

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

Top ↑

References 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: