Resources

Figma

The WordPress Design team uses Figma to collaborate and share work. If you’d like to contribute, you can use the WordPress Figma design library to make mockups. You can also join the #design channel in Slack and if you’d like to ask for advice or otherwise. Figma accounts are free, and with one you can use components from the shared libraries, or duplicate files to your draft if you need to make edits. Full edit access to the WordPress libraries is paid and reserved for the design team.

How to contribute

Resources for learning how to use Figma

Getting started with Figma

Top Online Tutorials to Learn Figma for UI/UX Design

Take a Tour Around Figma

Learning how to use files and projects

Getting started with Figma files and projects

What are files?

What are projects?

Video tutorial

FAQ

Learning how to use components

Getting started with components

What are components?

Video tutorial

Learning how to use WordPress Figma libraries

How to turn on the WordPress Components library in Figma

How to turn on Figma libraries gif

  1. Click the Team Library icon in the Assets Panel:

Hovering over the team library icon

  1. The Library modal will open and allow you to view a list of available libraries. Toggle to Enable or Disable a specific library:

Switching on the WordPress components library in Figma

How to refine or contribute to the WordPress components React library (Coming soon)

WordPress components in Figma mirror the live React components. Documentation for how to refine or contribute to WordPress components in React is coming soon.

If you have questions, please don’t hesitate to ask in the #design channel on the WordPress community Slack.