The Figma WordPress Design Library

BIG linden > Insight & Innovation Articles > this article: The Figma WordPress Design Library

The Figma WordPress Design Library

Today we’re talking about the WordPress Design Library and how you can use this to more quickly design and develop Figma designs that match existing UI elements.

We’re going to talk about what exactly the WordPress Design Library is and we’re going to get into some basics of working with components and styles, which are two key types of assets available in the library for use in designing a website or application with Figma, and dig into the impact these innovative tools can have on the development timelines of Figma to WordPress website projects.

Illustration shows the process for creating, publishing, and sharing components and styles in Figma.
Illustration of the process for creating, publishing, and sharing components and styles.

Components enable designers to quickly build out similar parts of their design as they exist within the design system while styles ensure accuracy when applying text or background colors by making sure they will match other UI elements already established through the library. This all makes it easier to implement effective designs faster, as well as keep them up-to-date when changes occur.

What Is the WordPress Design Library?

The WordPress Design Library is a collection of design assets for WordPress UI that allow users to quickly create design prototypes in Figma. The Library includes components, symbols, and templates for developers and designers to use, as well as bug reports and ideas for contributors. 

“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 (source)

The Figma WordPress Design Library makes use of the latest WordPress design language. Designs created with it will inherently feel like they belong.

Faster design, faster development

The WordPress Design Library for Figma makes sharing ideas easier and faster while ensuring they look like native WordPress UI elements.

Your collection of assets will empower your designer (or design team) to design, iterate, and improve faster. More quickly design (and develop) UI for WordPress. It includes components, symbols, and templates for developers and designers to use as well as bug reports and ideas for contributors in order to create faster designs with native look-and-feel elements built using the latest WordPress design language.

Designers who wish to export their design into a website should explore options and plugins (like this Figma plugin, called Fignel), that will enable you to export your Figma to a WordPress website with only a few clicks, and services that can turn your Figma into a WordPress website. Tools like these are becoming increasingly powerful and more useful with each update.

What can you do with the Design Library?

Create a Gutenberg Block

  1. Create a new Figma file by opening the Gutenberg project and clicking the “+ New” button.
  2. Open the “Assets” panel and click the little book icon to view the available Team Libraries, then toggle the WordPress Design Library on.
  3. Sketch out your flow, gather UI components from library, arrange them in a coherent design pattern and connect them via prototypes for testing purposes.
  4. Generate a clickable prototype directly within Figma for further testing purposes or link up any external tools you need to test functionality further (such as adding links).

Figma Components and Styles

Figma’s components and styles are powerful features that allow designers and design teams to quickly update UI objects and attributes across multiple projects. These features can be used in the free, Professional or Organization tiers of Figma depending on individual needs.

Figma components

Components are reusable objects that can be used in a design to simplify and streamline the process. Common examples of components include UI elements, company logos, icons, device mockups, platform OS components (e.g., Android or iOS), cursors for redlining/annotation purposes and other diagramming “helpers” like flow arrows and shapes.

Figma components

Components help improve efficiency by allowing designers to quickly create multiple iterations without having to start from scratch each time.

Component instances

Component Instances are duplicates of components that can be used in various projects. When changes to the original component’s design, such as color, size or styling is made and published, any instance using those original changes will receive a notification allowing them to update their own instances with the new updates if desired.

Component instances can really help streamline development processes by eliminating having to manually change each individual copy of a component when adjustments need to be made–especially when working on large-scale projects.

Figma Styles

Using Styles from the WordPress Design Library ensures that your designs match existing UI elements, making it easier to implement. You’re all but guaranteed accuracy and this method allows for easy updating when changes are made.

By using Figma styles you can apply colors, typographical rules and effects like drop-shadows present in the WordPress codebase which will help create a cohesive look across all of your creations.

Impact on development

Managed design systems, like The Design Library for Figma and WordPress, improves design and development. Benefits are more apparent for design teams, product teams, and marketing teams, but developers enjoy faster and smoother Figma to WordPress development timelines. Our team is grateful for advancements in design process like this and are always excited to share them as we are always looking for innovative ways of improving our processes.

The Design Library for Figma and WordPress allows teams to have easy access to sophisticated UI components, typography settings, color palettes with named swatches, powerful animation libraries. It enables developers the ability to quickly construct webpages using code-friendly elements based on familiar user interface design principles.

Having this library available also speeds up development process of creating websites without having need to worry about extensive back end work or complicated coding tasks. WordPress website developers and development teams save time as they are able to create more advanced functional sites while keeping their foundational designs consistent between different platforms (web / mobile). Thanks to the shared understanding that is created by relying on commonly used standards throughout a project, people at all levels will find it easier collaborate.

Read Next:

Table of Contents

About the Author

Katrina Pfitzner

Katrina Pfitzner

Katrina is a developer, designer, author, and thought leader on topics including Figma and WordPress. For more from Katrina, find her on twitter and follow her on medium.

All Posts
Katrina Pfitzner

Katrina Pfitzner

Katrina is a developer, designer, author, and thought leader.

More Figma and WordPress Insight

Figma and WordPress support docs

WordPress Logo in white letters on black background - used here to symbolize the topic (WordPress) and graphically represent the WordPress topic

Capabilities related to this Figma / WordPress article

Make the switch to a cost-effective platform for your organization.

REQUEST A 1:1 CONSULTATION

Get a 30 minute 1:1 consult with a BIG consultant and get a 7 page report on making digital work in your organization with key insight into paths for success and playbooks just for your unique needs.

Please understand not all requests can be met. Please contact us with any questions.