You don’t need edit access to use the Figma libraries, you can copy components from there into your own drafts. If you’re a contributor with the ability to grant edit access, please be mindful, and downgrade to view access once the initial need for edit has waned.
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.
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.
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 UIUIUI 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 GutenbergGutenbergThe 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.
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.
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.
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!
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.
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.
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.
You must be logged in to post a comment.