Resources Edit

Figma Figma

The WordPress Design team uses Figma to collaborate and share work. If you’d like to contribute, join the #design channel in Slack and ask the team to set you up with a free Figma account. This will give you access to a helpful library of components used in WordPress. They are stable, fully supported, up to date, and ready for use in designs and prototypes.

How to contribute How to contribute

Top ↑

Resources for learning how to use Figma 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

Top ↑

Learning how to use files and projects Learning how to use files and projects

Getting started with Figma files and projects

What are files?

What are projects?

Video tutorial

FAQ

Top ↑

Learning how to use components Learning how to use components

Getting started with components

What are components?

Video tutorial

Top ↑

Learning how to use WordPress Figma libraries 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 libray 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.