Design Team Unveils New WordPress Design System Figma Library

Automattician James Koster has announced the launch of a new WordPress Design System library for Figma, the popular tool the design team uses to create mockups and prototypes for WordPress. “The intention of this resource is to streamline the design process for folks working in the WordPress ecosystem,” he explained.

The design library offers a comprehensive range of components, including buttons, forms, icons, and menus, bringing everything you need into one place. It also includes style tokens that allow you to easily manage visual details like radius, elevation, color, and typography. For added convenience, the library provides handy stickers for individual components, and more extensive UI elements like the full-screen editor and site editor.

James also revealed that the “intention is to publish a new version of the library in line with each Gutenberg release, and from 6.8 each major WordPress release too.”

For WordPress Design Team members, the library will be automatically enabled in all new design files within the WordPress.org community Figma organization. Designers working in other Figma organizations can access it by duplicating the file from the community page and publishing it in their own organization.

For those new to Figma, the WordPress Design Team recommends checking out Figma’s “Learn” platform, which offers a comprehensive “Get Started” section to help users become familiar with the tool.

You can leave your feedback in the source file or on the Gutenberg repository on GitHub.

The community has responded positively to the new library. WordPress committer Tammie Lister shared, “It also is a step towards the true design system needed. Figma is a part of the system, but an important piece when updated regularly.”

Courtney Robertson, Open Source Developer Advocate at GoDaddy, tweeted, “#WordPress just stepped up its design game with a brand-new Figma Library as part of its Design System. Designers, it’s time to explore a more seamless workflow!”.