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

To join the WordPress.org Figma team, 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 on chat.wordpress.org and let us know whether you need view-only or edit access. A Figma admin will contact you for your email address to set up your account.

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 Foundation WordPress Foundation

→ The coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. elements that make up visual design across the project. These are design tokens (like variables, but for design!) and core styles that don’t change often once established.

Colours, type styles, icons, spacers, etc.

Top ↑

WordPress Components WordPress Components

This library contains available Figma components that mirror the base UI components found in the @wordpress/components npm package. They are stable, fully supported, and ready for use in projects. @wordpress/components is an npm package that is published via the Gutenberg repo.

Component documentation: https://developer.wordpress.org/block-editor/

Top ↑

WordPress Patterns WordPress Patterns

→ Larger patterns made up of individual UI components combined.

Blocks, navigation bars, 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/’s sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme., etc.

Top ↑

Utilities Utilities

Stores things like covers, sticky notes, and diagram and wireframing components

Top ↑

Contribution Workflows Contribution Workflows

Top ↑

Component Contribution Component Contribution

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: