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.
WordCamp Asia 2025 Contributor Day took place on 20 February 2025 at the Philippine International Convention Center (PICC). The Design Table was led by Ahmed Kabir Chaion ( @chaion07 ). We had a total of 35 people joining both in-person and also remotely using SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. Contributors collaborated on different focuses including the Design plans for WordPress 6.8. A few Tickets in CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.TracTracTrac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. as well as a few Issues were discussed including a review of the Design Handbook.
Additionally, we discussed more in Core, BlockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Editor on Checkout Issue. We also emphasized on what we can’t customize, what we used to be and not flexible enough.
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.
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.
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.
On the Developer blog, Using Data Views to Display and Interact with Data in Plugins, explains how to add a ReactReactReact 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 pluginPluginA 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 GitHubGitHubGitHub 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.
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.