Getting Started with the Figma WordPress Design Library

Created by James Koster, (@jameskoster)

As the name suggests, the WordPress Design Library is a library of WordPress design assets, enabling anyone to quickly create design prototypes for WordPress UI in Figma.

These tools are useful for designers when creating new UI and for anyone looking to contribute ideas, enhancements, or even solutions to bug reports. Sometimes pictures really do speak a thousand words.

In this post, we’ll talk about some key features of Figma before diving into a practical example that demonstrates some of the WordPress Design Library utilities.

What Is Figma?

Figma is a collaborative design tool that members of the WordPress project’s design team have been using for several years to work on and share design concepts. It offers a variety of handy features such as: in-browser access, rich prototyping tools, component libraries, code inspectors, live embeds, inline commenting, plugins, and much much more.

Perhaps best of all, it is totally free to sign up and start playing around. If you join the WordPress.org Figma organization (instructions below), you’ll gain access to the WordPress Design Library enabling you to design WordPress UI in no time.

What Is the WordPress Design Library?

In Figma, you can share components and styles by publishing them, transforming your file into a library so that you can use instances of those components in other files.

Figma.com

It may be easiest to think of the WordPress Design Library as a visual representation of all the javascript components that compose UI in the WordPress codebase. As an end user of the library, you can use those components in a self-contained environment to create new interface designs. It’s kind of like a big LEGO box containing all the UI pieces (buttons, form inputs, etc.) that you can use to create and try out new designs.

Creating designs with these assets enables rapid ideation on new interfaces by removing mundane processes that one would ordinarily have to work through. Nobody wants to repeatedly double-check that the button they made perfectly matches the buttons rendered by the code! And on the flip-side of that coin, anyone sharing a design with others will generally endeavor to make specific elements (like buttons) match what exists in the code as closely as possible. The WordPress Design Library solves both these headaches and more.

An additional benefit to these assets visually matching what exists in the codebase is that any designs you create with them will inherently make use of the latest WordPress design language and consequently feel like WordPress with almost no effort required. Passing such designs on to developers makes them easier to interpret and implement too.

Figma Fundamentals

Before getting into the practical section of this post, let’s quickly cover some of the fundamental features of Figma libraries. This will help prepare us for working with the WordPress Design Library.

Components

As we touched on above, the library consists of “components” that serve as visual counterparts to their code-based equivalents. That is to say, there is a Button component in Figma, and a matching Button component in the WordPress codebase.

But what is a Figma component?

Components are elements you can reuse across your designs. They help to create and manage consistent designs across projects.

help.figma.com

Let’s quickly explore some of the properties of Figma components to understand the ways they help when working on our next design.

Variants

Some Figma components offer variants. One example is Button(s) which all have the following states:

  • Resting
  • Hover
  • Focus
  • Disabled

These can be manipulated via the variants interface in Figma:

Other examples of components with variants are form inputs and menu items. Variants are a new feature in Figma, so we’ll be adding more over time.

Overrides

Although any components you insert are intrinsically linked to the master component in the library, it is possible to override some properties.

While working with an instance of the Button component, you can change things like the label, or even the background color, while maintaining the link to the master component in the library. If you’re familiar with git workflows, this is kind of like creating a local branch. Any changes you make can easily be reset in a couple of clicks.

Overrides made to your local instance will persist even when the master component is updated. So if your design calls for a button with a green background, you can apply that override safely with the knowledge that even if the master component is updated, your button can inherit those updates and remain green.


We’ve only really scratched the surface of components here. So I would recommend the official Figma documentation for more advanced information.

Figma Styles

In addition to components, styles are also published as part of the WordPress Design Library. They have similar properties to components in that a master style exists in the library and can be utilized in your local Figma file. Just like Components, Styles will receive updates when changes to the library are published.

Styles are used to define colors, typographical rules, and effects like drop-shadows present in the WordPress codebase. They enable you to apply things like text or background colors that will match other UI parts.

Using Styles from the library, you ensure that your creations match existing UI elements, making it easier to implement.


To learn more about styles in Figma, I recommend the official documentation.

Views and Stickers

“Stickers” are simply arrangements of Components and Styles that have been combined to represent common UI elements. They are not good candidates for full componentization due to their frequent customization needs. Examples of Stickers include the Inspector sidebar and the block inserter:

Their utility is simple: find the sticker you need, peel (copy) it from the WordPress Design Library, and stick (paste) it into your local file before customizing as needed.

Stickers are not Figma features like Components and Styles, but any stickers you copy to a working file will stay up to date by virtue of their underlying assets.

Views are arrangements of components, styles, and stickers.

Designing a Block Using the WordPress Design Library

Okay, now that we have a handle on the basics of Figma libraries and their features and the utilities of the WordPress Design Library like Stickers and Views, let’s work through a practical example – designing the UI for a brand new block.

Getting Started

All you need to get started is a Figma account added to the WordPress.org Figma organization.

Once you’ve signed up at Figma, simply join the #Design channel on the community Slack and request an invite. Include your Figma username, and a friendly community member will help get you set up in no time.

Now the fun begins!

To create a fresh new design file in Figma, visit the Gutenberg project and click the “+ New” button.

Now let’s include the WordPress Design Library in our working file so that we have access to all the goodies we’ll need:

  1. Open the “Assets” panel and click the little book icon to view the available Team Libraries.
  2. In the modal, toggle the WordPress Design Library on. You can leave the others off for now.

After closing the modal, you’ll notice a number of components become visible in the assets panel. To insert them, they can be dragged on to the canvas:

It’s kind of like inserting a block 🙂

Creating a Pizza Block 🍕

I love to eat pizza, so for fun, I’m going to design a new block that simply allows the user to display a delicious pizza in their posts and pages. I want the block to include options for a total number of slices and different toppings.

Work Out the Flow

I always like to concentrate on individual flows when designing blocks. That is to say, the linear steps a user will take when working with that block. In this case, I want to create visualizations of the following steps/views in our Figma file:

  1. Inserting the block from the Block Inserter
  2. The Pizza Block placeholder state including options in the block, its Toolbar, and the Inspector
  3. The configured Pizza Block settings
  4. The end result – a delicious pizza sitting comfortably on the canvas

Sketch the New States

Thanks to the WordPress Design Library, I’ll be using as many existing UI components as possible, but I still need a rough idea of how they will be composed in the new interfaces that my Pizza block will require. I normally find it helpful to sketch these out on paper.

Here’s the placeholder state which users will see when they first insert the block. This should be all I need:

Prepare the Views and Stickers

Helpfully, there are Views in the WordPress Design Library I can use for each of the steps in the flow outlined above.

I open the library, navigate to the Views page, find the views I need, copy them, and paste into my working file.

It is very important to copy (not cut) Views from the library so that they remain intact and other people can still access them. If you cut them, they’ll be gone forever, so please don’t do that 🙂

I’m also going to need a block placeholder sticker, so I navigate to the Stickers page, copy the one that most closely resembles my sketch from before, and paste it into my working file.

As with views, please only copy stickers; do not cut them.

Gather the Components

Referring back to the placeholder state I sketched out on paper (it can be helpful to import this into your Figma file), I can see that I’m going to need some form elements to realize the design.

I navigate to the Assets panel, locate the components I need, and drag them into my file:

Helpful tip: Once a component has been inserted, you can transform it into another component via its settings panel. Sometimes it is easier to copy/paste a component you already inserted and transform it this way, rather than opening the assets panel over and over.

Arrange the Views, Stickers, and Components to Create a Coherent Design

Now that we’ve gathered all the individual pieces we need, it’s simply a case of arranging them so that they resemble each of the steps of the flow we outlined before. This is done with simple drag and drop.

If you’re familiar with software like Photoshop, Sketch, and others, this should feel very familiar.

Once everything is in place, our flow is complete:

I still find it incredible that we’re able to do this in just a few short moments.

Hook up the Prototype

With each step of our flow created, the last piece of the puzzle is to connect them and form a clickable prototype.

I switch to the Prototype panel and create click behaviors by selecting a layer, then dragging the white dot to the corresponding frame.

There are a variety of behaviors that the Figma prototyping tools support, such as a hover, drag, and click. It is even possible to create smart animations. Perhaps that’s something we can explore in another tutorial, but for now, I will refer you to the Figma documentation for more advanced prototyping.

Now that I’ve connected all the appropriate elements, I am able to take my prototype for a test drive by clicking the Play â–¶ icon:

You can try it too; just click here.

That’s All, Folks!

I tried to keep this tutorial fairly simple and concise; even though we only really got to grips with the basics here, you can see the power of Figma and the WordPress Design Library when it comes to trying out new designs.

Become an Early Adopter With the Gutenberg Plugin

Copy by Anne McCarthy (@annezazu) and Design by Mel Choyce-Dwan (@melchoyce)

In WordPress circles (whether it’s your local meetup, a trusted publication, or your networking group), you may have heard terms like Core Editor, Gutenberg, and the Block Editor used interchangeably over the last four years. And if you’re following contributor work on the project itself, you may also have heard some additional nuances—Gutenberg plugin, Gutenberg, or Block Editor. 

It can get a little confusing, so let’s take a look at four terms that will help you find your way: 

  • WordPress – WordPress refers to the open source software but also to the community that surrounds it. 
  • Gutenberg – Gutenberg is the code name for a multi-year project to update editing areas for the WordPress software.
  • Editor – The editor refers to a section of the software that allows you to update content on your site’s posts and pages. 
  • Gutenberg Plugin – The Gutenberg plugin is where early work to update the editor is shared.

The Gutenberg Plugin

Now that we’ve cleared up the definitions, let’s talk about the plugin. When might you use it? What would you use it for? You can think of it as an early access program or a “WordPress lab.” The plugin is updated every two weeks, which means that bugs that have been reported are often fixed and that what you see changes rapidly. 

The Gutenberg plugin also contains features that aren’t yet ready for their WordPress debut but are ready for curious users to test and provide feedback. This is a common practice that allows stable features to make it to your site in WordPress releases while allowing experimental features to be tested and refined. To get a sense of whether using the Gutenberg Plugin might be something you want to explore to get access to earlier features, check out the “What’s New” release posts and the Core Editor Improvement post series. 

Do I Need the Plugin to Use Gutenberg?

It depends on your comfort level! Generally speaking, it is not recommended to use the plugin on a site that has launched and is actively in use unless you’re very comfortable with the code side of WordPress. Fortunately, each WordPress release comes ready to go with multiple versions of the Gutenberg plugin

But if you are a keen beta tester who loves reporting feedback, or you feel comfortable navigating how to opt-in/out of the experimental aspects of the plugin, here are a few reasons you might want to dig into what the Gutenberg Plugin has to offer:

  • Test new features and give helpful feedback. For example, you can use the plugin to help test Full Site Editing
  • Get early access to the latest & greatest while navigating when to opt-in or out of experimental features. 
  • Prepare for the future whether you’re a theme author, plugin developer, agency owner, etc. 

Do you use the Gutenberg plugin and share feedback on GitHub? Thank you! This kind of feedback is what helps ensure stability in what’s shipped in WordPress releases. 


Pop-Up Livestream on February 22

As mentioned in this post, Matt will host a livestream on February 22 during Bangkok daylight hours. He opened an invitation to any speaker who was affected by the cancellation, and the livestream will include the following fine people: Imran Sayed, Md Saif Hassan, Muhammad Muhsin, Nirav Mehta, Piccia Neri, Umar Draz, and Francesca Marano as well as a Fireside Chat and Q&A with Matt Mullenweg & Monisha Varadan.

This should be a great way to get to hear from some speakers who have yet to share their knowledge on a global stage. WordPress is enriched by a multitude of experiences and perspectives, and I hope you are as excited as I am to hear new voices from a part of the world that is frequently underrepresented in the WordPress open source project. 

Also exciting, the WordCamp Asia team has announced that they’re aiming for January 2021, so please mark your calendars now! This small but mighty team of trailblazing organizers has shown great resilience over the years they’ve spent, building toward this event. I am personally grateful for the hard work they’ve done and have yet to do, and can’t wait to thank them in Bangkok next year.

WordPress 5.3 RC2

The second release candidate for WordPress 5.3 is now available!

WordPress 5.3 is currently scheduled to be released on November 12 2019, but we need your help to get there—if you haven’t tried 5.3 yet, now is the time!

There are two ways to test the WordPress 5.3 release candidate:

For details about what to expect in WordPress 5.3, please see the first release candidate post.

Release Candidate 2 contains improvements to the new About page, and 10 fixes for the following bugs and regressions:

  • Three bugs contained in RC1 within the block editor have been fixed (see #48381).
  • A bug has been fixed where links within comments did not get the correct rel attribute (see #48022).
  • The scaled- string has been added to file names when images are downsized if determined “BIG” (see #48304).
  • The buttons group layout has been fixed in IE11 (see #48087).
  • A bug with boolean false meta values in the REST API has been fixed (see #48363).
  • The error code encountered when the native PHP JSON extension is missing has been adjusted to be unique (see #47699).
  • When uploading files, HTTP error code support has been expanded to include all 5xx errors (see #48379).

Plugin and Theme Developers

Please test your plugins and themes against WordPress 5.3 and update the Tested up to version in the readme to 5.3. If you find compatibility problems, please be sure to post to the support forums so we can figure those out before the final release.

The WordPress 5.3 Field Guide has also been published, which details the major changes.

How to Help

Do you speak a language other than English? Help us translate WordPress into more than 100 languages!

If you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. We’d love to hear from you! If you’re comfortable writing a reproducible bug report, file one on WordPress Trac, where you can also find a list of known bugs.

Save the Date: May 27

What’s on May 27, you ask?

May 27, 2013 is the 10th anniversary of the first WordPress release!

We think this is worth celebrating, and we want WordPress fans all over the world to celebrate with us by throwing their own parties. We’re using Meetup Everywhere to coordinate, and will be putting up a website just for the 10th Anniversary so that we can collect photos, videos, tweets, and posts from all the parties.

The rules are very simple:

  1. Pick a place to go where a bunch of people can be merry — a park, a bar, a backyard, whatever
  2. Spread the word to local meetups, tech groups, press, etc and get people to say they’ll come to your party
  3. If 50 or more people RSVP to your party, we’ll try to send you some WordPress stickers and buttons
  4. Have party attendees post photos, videos, and the like with the #wp10 hashtag

We’ll be using Meetup Everywhere to coordinate parties all over the world, so get your city on the map and register your party now !

We’ll follow up with registered organizers  over the next few weeks with some tips for how to publicize your party and to get addresses for swag packages. To that end, make sure you check the option that lets WordPress 10th Anniversary know your email, or we won’t be able to get in touch with you for these things or to give you access to the WP10 blog.

Whose party will be the biggest? The most fun? The most inventive? Will it be yours?

Note: If you already run a group on meetup.com, making your party an event in your group is great, but you still need to post it and have people RSVP at the special party page, because regular groups and Meetup Everywhere groups aren’t connected yet. 

WordPress 3.6 Beta 1

WordPress 3.6 Beta 1 is now available!

This is software still in development and we really don’t recommend that you run it on a production site — set up a test site just to play with the new version. To test WordPress 3.6, try the WordPress Beta Tester plugin (you’ll want “bleeding edge nightlies”). Or you can download the beta here (zip).

We’ve been working for nearly three months and have completed all the features that are slated for this release. This is a bit of a change from the betas of previous release cycles. I felt very strongly that we shouldn’t release a beta if we were still working on completing the main features. This beta is actually a beta, not an alpha that we’re calling a beta. If you are a WordPress plugin or theme developer, or a WordPress hosting provider, you should absolutely start testing your code against this new version now. More bugs will be fixed, and some of the features will get polished, but we’re not going to shove in some big new feature. We’re ready for you to test it, so jump in there! The more you test the beta, the more stable our release candidates and our final release will be.

As always, if you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. Or, if you’re comfortable writing a reproducible bug report, file one on the WordPress Trac. There, you can also find a list of known bugs and everything we’ve fixed so far.

Here’s what’s new in 3.6:

  • Post Formats:  Post Formats now have their own UI, and theme authors have access to templating functions to access the structured data.
  • Twenty Thirteen: We’re shipping this year’s default theme in our first release of the year. Twenty Thirteen is an opinionated, color-rich, blog-centric theme that makes full use of the new Post Formats support.
  • Audio/Video: You can embed audio and video files into your posts without relying on a plugin or a third party media hosting service.
  • Autosave:  Posts are now autosaved locally. If your browser crashes, your computer dies, or the server goes offline as you’re saving, you won’t lose the your post.
  • Post Locking:  See when someone is currently editing a post, and kick them out of it if they fall asleep at the keyboard.
  • Nav Menus:  Nav menus have been simplified with an accordion-based UI, and a separate tab for bulk-assigning menus to locations.
  • Revisions: The all-new revisions UI features avatars, a slider that “scrubs” through history, and two-slider range comparisons.

Developers:  You make WordPress awesome(er). One of the things we strive to do with every release is be compatible with existing plugins and themes. But we need your help. Please test your plugins and themes against 3.6. If something isn’t quite right, please let us know. (Chances are, it wasn’t intentional.) If you’re a forward-thinking theme developer, you should be looking at implementing the new Post Format support in some of your themes (look to Twenty Thirteen for inspiration).

We’re looking forward to your feedback. If you break it (i.e. find a bug), please report it, and if you’re a developer, try to help us fix it. We’ve already had more than 150 contributors to version 3.6 — it’s not too late to join the party!

2012: A Look Back

Another year is coming to a close, and it’s time to look back and reflect on what we’ve accomplished in the past twelve months. The WordPress community is stronger than ever, and some of the accomplishments of the past year are definitely worth remembering.

Software Releases

We had two major releases of the WordPress web application with versions 3.4 and 3.5, as well as 5 security releases during 2012. 3.4 included the theme customizer, while 3.5 became the long awaited “media release” featuring a new uploader and gallery management tool. 3.5 contained code contributions from more people than ever, and we hope to continue growing the contributor ranks in the year ahead. We currently have native apps on 6 mobile platforms — iOS, Android, Blackberry, Windows Phone, Nokia, and WebOS — and saw several updates there as well.

Plugin Directory

A number of improvements were made to the Plugin Directory in 2012. More cosmetic  updates, like the introduction of branded plugin page headers, make it a nicer browsing experience, while functional changes like better-integrated support forums, plugin reviews, and a favorites system made the plugin directory even more useful as a resource.

The “Make” Network and Team Reps

2012 was the year that saw the creation of Make.wordpress.org, a network of sites for the teams of contributors responsible for the different areas of the WordPress project. Now anyone can follow along and get involved with the teams that work on core, theme review, forum support, documentation, and more. In 2013 we’ll work to improve these sites to make it easier to become a contributor. Each team also now has elected Team Reps, a new role that has already led to more cross-team communication. Team reps post each week to the Updates blog so that the other reps can keep up with what’s going on in other teams.

WordPress Community Summit

At the end of October, about 100 of the most influential and respected members of the WordPress community attended an inaugural summit to discuss where we all stand, and to figure out where we go next with WordPress. A “conference of conversations,” this unconference made everyone an active participant, and while not every issue brought to the table was solved by the end of the event, the right questions were being asked.

Meetup.com

The WordPress Foundation now has a central account with Meetup.com. We’ve brought in a couple dozen existing meetup groups as a pilot to test the system, and are in the process of working with more existing meetups (as well as new ones) to join us so that local organizers won’t have to pay organizer dues and can get more support from the WordPress project.

Internet Blackout Day

We participated in the protest against SOPA/PIPA, Internet Blackout Day, on January 18. Though we usually stay out of politics, this campaign was important, and we not only participated in the blackout on WordPress.org, we encouraged our users to do so as well, and recommended plugins to provide blackout functionality. It was deemed the largest online protest in history.

WordCamps

And finally, it wouldn’t be a recap without counting up the WordCamps! There were 67 WordCamps around the world in 2012, bringing together WordPress users, developers, and fans. If you didn’t make it to a WordCamp this year, maybe it can be one of your new year resolutions: check the schedule to find one near you!