Vip token how to#
Vip token install#
Vip token update#

Vip token how to#

Here’s how to connect the Figma Tokens plugin to the existing design tokens: These design tokens were created directly in Figma using the Figma Tokens plugin. We’ve created a set of design tokens that are ready to be imported into the design system document using Figma Tokens. In the pop-up on the bottom of the page, click the “Open” button: The duplicated design system document can also be found in your Figma drafts. On the right side of the document title, click the down arrow and select “Duplicate to your drafts”:ģ. We’ll make a local copy of this document to use with the Figma Tokens plugin.Ģ. We’ll use a small design system in Figma based on the Material 3 Design Kit template for our example. Once installed, the plugin will be available to use in Figma documents. In the top right corner, click “Try it out” button.

Vip token install#

To install Figma Tokens, log into Figma and visit the Figma Tokens plugin page. We’ll start with the designer workflow by using a design system in Figma and exporting design tokens. Example WordPress theme configured to use the colors and typography provided by the design system.Set of design tokens used to integrate with Figma Tokens.Simple design document system in Figma based on the Material 3 Design Kit template.These resources are also available to help get you started:

Vip token update#

Use the vip-design-system-bridge tool to update the WordPress theme with new design tokens.

Run a local copy of WordPress with VIP’s local environment manager to view the example WordPress theme.

Change a color token in Figma and export new design tokens.

Use the Figma Tokens plugin to add design tokens.

Make a copy of an example design system.

We’ve put together an example design system and theme to demonstrate the process from Figma to WordPress. Design tokens are then updated in our theme’s configuration without making other code or CSS changes.

When changes are made in Figma, they’re synced with Figma Tokens, and we run the vip-design-system-bridge tool. This makes design system changes and re-themes easy to push into code. In code and CSS, we use WordPress’ generated –-wp–custom classes to reference the design tokens.With the vip-design-system-bridge tool, we insert design tokens into WordPress via the theme.json custom section.Using Figma Token’s GitHub storage, we export tokens to a repository.We utilize the Figma Tokens plugin to define design tokens used in Figma.The design system is defined in a Figma document.By utilizing the Figma Tokens plugin, we create this single source of truth, keep all our design tokens in a version control system, and automate updates to the design system in theme code. Our goal is to have a single source of truth for the design system so there’s no disconnect between the design and implementation. We’ve been using it on our own site,, and have found it greatly simplifies this process while ensuring consistency.

To solve this challenge, we’ve created a tool to keep design systems in Figma synced with WordPress themes. If there are any changes to the system during development or large-scale replacements in retheming, the definition and implementation go out of sync. Often the definition of the design system lives in Figma, but is manually implemented in code.

One of the key challenges of running a site or series of sites at scale is ensuring design consistency and compliance with a design system.