Posted on Mar 26 • Originally published at 0nmcp.com

I Built the First-Ever Figma to WordPress Plugin Converter

#figma #wordpress #webdev #opensource

The Problem

Designers use Figma. Developers use WordPress. The handoff between them wastes weeks.

Every time a designer finishes a Figma file, a developer has to:

Manually extract colors, fonts, spacing
Rebuild everything in CSS
Create WordPress templates from scratch
Build custom blocks that match the design

What if you could skip all of that?

OnPress — Figma to WordPress in Seconds

I built OnPress — a tool that extracts your entire design system from Figma and generates a production-ready WordPress theme or plugin.

What it extracts:

Every color → CSS variables + Customizer controls
Every font → Google Fonts imports + typography rules
Spacing values → spacing scale variables
Border radii → radius variables
Drop shadows → CSS shadow classes
Components → WordPress blocks + shortcodes
Auto-layout → CSS flexbox

What it generates:

WordPress Theme:

style.css with design tokens as CSS variables
functions.php with Customizer controls, nav menus, widget areas
Complete template set (header, footer, index, single, page, 404, search, archive)
Google Fonts auto-imported
Editor color palette from your Figma colors
Responsive breakpoints

WordPress Plugin (first ever):

Custom Gutenberg blocks from your Figma components
Shortcodes for every component
Admin settings page with color pickers for every design token
REST API endpoints
Works with any existing theme

Two Ways to Use It

1. Figma Plugin

Install OnPress inside Figma → select your frames → click "Generate" → download a WordPress-ready ZIP.

2. WordPress Plugin

Install OnPress on your WordPress site → paste any Figma share link → extract and generate directly from your dashboard. No Figma account needed.

How It Works Under the Hood

The Figma plugin uses the Figma Plugin API to walk the entire document tree:

// Extract every design token
const colors = figma.getLocalPaintStyles();
const typography = figma.getLocalTextStyles();
const effects = figma.getLocalEffectStyles();

// Walk every node recursively
function walkTree(node, callback) {
  callback(node);
  if ("children" in node) {
    for (const child of node.children) {
      walkTree(child, callback);
    }
  }
}

The WordPress plugin hits the Figma REST API with a personal access token:

$response = wp_remote_get("https://api.figma.com/v1/files/{$file_key}", [
    "headers" => ["X-Figma-Token" => $token],
]);
$design_system = OnPress_Extractor::extract($file_data);
$generator = new OnPress_Theme_Generator($design_system, $slug, $name);
$result = $generator->install(); // Writes directly to wp-content/themes/

The generated theme includes real Customizer integration — every Figma color becomes an adjustable color control:

add_theme_support("editor-color-palette", [
    ["name" => "Brand Primary", "slug" => "brand-primary", "color" => "#7ed957"],
    ["name" => "Background", "slug" => "background", "color" => "#0A0E17"],
]);