Announcing the new WordPress Design System Figma library

Today I’m excited to announce the launch of the new WordPress Design System library for Figma! The intention of this resource is to streamline the design process for folks working in the WordPress ecosystem.

Streamline Figma Workflows with a Consistent, Customizable Component Library

Efficiency and consistency are key. The library is built to:

  • Streamline Your Workflow: With a vast array of components, you’ll spend less time on routine tasks and more on assembling mockups and prototypes.
  • Reflect shipping code: Styles and components match the codebase as closely as possible. If it exists in this file, it can be used in code.
  • Customize with Ease: All components make use of Figma features like properties and variants to make working with them quick and intuitive.

Please note that this library replaces the old version, which is now deprecated. Please update your bookmarks! 🙂

Key features

  • Extensive component range: Buttons, forms, icons, menus, and much more—everything you need in one place.
  • Style tokens: For visual details like radius, elevation, color, and typography.
  • Handy stickers: For individual components and more comprehensive 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.’s like the full screen editor and site editor.
  • Regular updates: The intention is to publish a new version of the library in line with each 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/ release, and from 6.8 each major WordPress release too.
  • Easy integration: Simple to incorporate into your existing Figma projects without any hassle. 

Get Started Today!

Members of the WordPress Design team will find the new library enabled automatically on all new design files in the WordPress.org community Figma organisation.

Designers working in different Figma organisations can use the library too. Simply duplicate the file from the community page to your organisation and publish as a library. 

Feedback

If you have any feedback on specific components or styles please leave a comment in the source file. As always, feedback relating to the design principles, components, and behaviors are best shared on the Gutenberg repository on GitHub which remains the source of truth for the wordpress/components package.

Getting started with Figma

Figma is a tool the design team use to create mockups and prototypes for WordPress. If Figma is new to you, and you’d like to give it a spin, I recommend checking out their comprehensive “Learn” platform which has an excellent “Get started” section.

Feedback: Design System Component Pages

We’re refining the Design System reference site, and we’d love your input. We’ve recently published two pages—Radius and Elevation—to gather feedback. Your insights will help us improve these initial sections and guide our approach for rolling out future components.

Context:

Storybook will serve as the single source of truth for component and pattern guidelines. Designers and Engineers alike should refer to these pages for consistent usage rules.

Topics of feedback:

  • Does the information clearly convey how and when to use the components?
  • Is the structure easy to follow? Any suggestions for improving readability or flow?
  • Are the guidelines clear and actionable?
  • Is there anything missing or unclear that would make the information more useful to you?

Thank you for helping us make this resource the best it can be!

Design Share #65 (Sep 23-Oct 4)

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

If you have updates you’d like to include in the next Design Share, drop a note in the #design channel. If you have questions, you can also ask them there, or as a comment on this post.


Continue reading

#design, #design-share

Design Share #64 (Sep 9-Sep 20)

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

If you have updates you’d like to include in the next Design Share, drop a note in the #design channel. If you have questions, you can also ask them there, or as a comment on this post.


Continue reading

#design, #design-share

Data Views Update #2

This is the second update on Data Views, a series to provide more frequent information about the latest and greatest, so folks can follow along, provide feedback, and explore using this component. It builds on the initial update shared in June and will share biweekly updates going forward as it remains helpful.

To get started in learning more:

  • Documentation on it in the Storybook space.
  • On the Developer blog, Using Data Views to Display and Interact with Data in Plugins, explains how to add a ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. app to a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party page and use the Data Views component to display a data list.
  • On GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, you can chime in or post on issues regarding Data Views development.
Continue reading

#dataviews

Design Share #63 (Aug 26-Sep 6)

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

If you have updates you’d like to include in the next Design Share, drop a note in the #design channel. If you have questions, you can also ask them there, or as a comment on this post.


Continue reading

#design, #design-share

Design Share #61 (Jul 15-Aug 9)

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

If you have updates you’d like to include in the next Design Share, drop a note in the #design channel. If you have questions, you can also ask them there, or as a comment on this post.


Continue reading

#design, #design-share

Design Share #60 (Jul 1 – Jul 12)

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

If you have updates you’d like to include in the next Design Share, drop a note in the #design channel. If you have questions, you can also ask them there, or as a comment on this post.


Continue reading

#design, #design-share

Design Share #58 (Jun 3-Jun 14)

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

If you have updates you’d like to include in the next Design Share, drop a note in the #design channel. If you have questions, you can also ask them there, or as a comment on this post.


Continue reading

#design, #design-share

Design Share #56 (May 6-May 17)

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

If you have updates you’d like to include in the next Design Share, drop a note in the #design channel. If you have questions, you can also ask them there, or as a comment on this post.


Continue reading

#design, #design-share