Skip to main content

The WordPress Design Team has unveiled a cutting-edge WordPress Design System library for Figma, the go-to design tool for creating mockups and prototypes. James Koster, an Automattician and contributor to WordPress, shared the motivation behind this new resource: “The intention of this resource is to streamline the design process for those working in the WordPress ecosystem.”

What’s in the New Library?
The Figma library is packed with features to simplify and enhance the design workflow:

Comprehensive Components: Includes essentials like buttons, forms, icons, and menus.
Style Tokens: Simplify visual customization with controls for elements such as radius, elevation, color, and typography.
Pre-Built UI Elements: Provides ready-to-use components, from stickers for individual parts to extensive UI elements like the full-screen and site editors.

Regular Updates to Stay Current
The design library is set to evolve alongside WordPress itself. Koster confirmed plans to release a new version with each Gutenberg update and, starting from version 6.8, with every major WordPress release.

Easy Access for Designers
For members of the WordPress Design Team, the library is automatically enabled in new design files within the WordPress.org community Figma organization. External designers can also benefit by duplicating the library file from the Figma community page and publishing it within their own organizations.

New to Figma? No Problem!
If Figma is uncharted territory for you, the WordPress Design Team recommends starting with the Figma Learn platform, which offers a beginner-friendly “Get Started” section to help new users get up to speed.

Community Enthusiasm
The design community has warmly embraced the new resource. WordPress committer Tammie Lister praised it, calling it “a step towards the true design system needed.” Lister emphasized Figma’s pivotal role in keeping the system efficient and up-to-date.

Courtney Robertson, Open Source Developer Advocate at GoDaddy, added her excitement on Twitter:

“#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!”

How to Share Feedback
If you’ve explored the library and have suggestions, the WordPress Design Team welcomes your input. Feedback can be submitted directly in the source file or on the Gutenberg repository on GitHub.

This new Figma library represents a significant leap forward for WordPress designers, combining ease of use, robust functionality, and a commitment to continuous improvement. It’s an essential tool for anyone looking to streamline their WordPress design process.

Aaron Fernandes

Aaron Fernandes is a web developer, designer, and WordPress expert with over 11 years of experience.