brand.json, your brand, to-go. A Figma to json to style guide converter.

rocket_launch

Getting Started

brand.json helps you create beautiful, shareable brand style guides from your Figma files. Our Figma plugin automatically extracts design tokens and assets, generating a WordPress-compatible brand.json file with extended brand assets.

Quick Start

Install the brand.json Figma plugin from the Figma Community
Open your Figma file with brand assets (colors, fonts, logos, icons)
Run the plugin and click "Start Export"
Copy or download your generated brand.json file
Upload to brand.json hosting or self-host your brand guide

Tip: Check out our sample Figma file to see the recommended structure for your brand assets.

extension

Figma Plugin

The brand.json Figma plugin automatically scrapes your Figma file for design tokens and brand assets. It extracts everything needed to generate a complete brand style guide.

What Gets Extracted

Design Tokens (WordPress theme.json compatible)

Color Variables — All local color variables from your Figma file
Typography — Text styles including font sizes, families, colors, line heights, letter spacing, and text transforms

Extended Brand Assets

Logos — SVG components named starting with logo- or logo_
Icons — SVG components named starting with icon-, icon_, icons-, or icons_
Important Links — Links from a page named "Important Links" with a "Links" object

imageScreenshot coming soon

Plugin Interface

The plugin shows a preview of all extracted assets before you export. Review your colors, fonts, logos, icons, and links before generating your brand.json file.

label

Naming Conventions

Follow these naming conventions in your Figma file so the plugin can correctly identify and export your brand assets.

Logos

Single logos: logo-brand, logo-icon, logo-wordmark
Logo variants: Create a component set named logo-brand with variants like "Full Color", "Black", "White"
Output: logo-brand-full-color.svg, logo-brand-black.svg, etc.

text

Figma Component Names → Exported Filenames
─────────────────────────────────────────────
logo-brand              → logo-brand.svg
logo-brand/Full Color   → logo-brand-full-color.svg
logo-brand/White        → logo-brand-white.svg
logo-icon               → logo-icon.svg

Icons

Single icons: icon-home, icon-arrow, icon-menu
Icon sets: icons-navigation, icons-social (each becomes a separate set)
Icon variants: Create component sets with different states or sizes

text

Figma Component Names → Exported Filenames
─────────────────────────────────────────────
icon-home               → icon-home.svg
icon-arrow/Right        → icon-arrow-right.svg
icons-social/Twitter    → icons-social-twitter.svg
icons-social/LinkedIn   → icons-social-linkedin.svg

Important Links

Create a page named "Important Links"
Add a frame or object named "Links"
Inside, create multiple objects named "Link"
Each Link should contain a text element named "Label" and one named "URL"

Note: Links are useful for providing quick access to resources like your website, design system documentation, Figma files, GitHub repos, and more.

code

brand.json Format

brand.json extends the WordPress theme.json v2 format with additional brand assets. This means your file works directly with WordPress themes while also supporting logos, icons, and links.

Structure Overview

json

{
  "version": 2,
  "name": "Your Brand Name",
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#2563eb",
          "name": "Primary Blue",
          "collection": "Brand Colors"
        }
      ]
    },
    "typography": {
      "fontSizes": [...],
      "fontFamilies": [...]
    }
  },
  "assets": {
    "logos": {
      "logo-brand.svg": "<svg>...</svg>"
    },
    "icons": {
      "icon-home.svg": "<svg>...</svg>"
    },
    "links": {
      "website": {
        "label": "Company Website",
        "url": "https://example.com"
      }
    }
  }
}

WordPress Compatibility

The settings.color and settings.typography sections are fully WordPress theme.json v2 compatible. You can use your brand.json file directly in your WordPress theme, and the color palette and typography settings will be available in the block editor.

Tip: The assets section is a brand.json extension and will be ignored by WordPress, but your colors and fonts work out of the box.

cloud

Web Platform

brand.json provides hosted brand style guides at easy-to-share URLs. Your team can access brand colors, fonts, logos, icons, and important links from anywhere.

How Hosting Works

Your brand is hosted at brandjson.com/your-brand-name
Share the URL with your team, clients, or developers
Assets can be downloaded directly from the brand guide
Click any color to copy its hex code to clipboard

Brand Guide Interface

Your brand guide displays colors, fonts, logos, icons, and important links in a clean, easy-to-navigate interface. Team members can download assets and copy values with a single click.