Figma to Oxygen Builder – ready→made WordPress Integration

Turn Figma designs into editable Oxygen Builder sections – copy & paste, just like that.

This plugin is the essential integration for ready→made, a Figma plugin that allows designers and developers to convert their Figma elements into live, editable WordPress layouts using Oxygen Builder.

With a single click, you can transfer design elements from Figma and insert them into the Oxygen Builder’s structure panel – with all layout, classes, and structure preserved.

NEW in v1.3.0: Automatic Class Synchronization

Your Figma design system now syncs directly to Oxygen! Class definitions from Figma are automatically created as Oxygen global classes. Element-specific styles stay with the element, while reusable class styles are instantly available in Oxygen’s selector dropdown. Supports both new clean-separation format and backward-compatible tree-based detection.

Smart Features:

• 🎨 Automatic Class Sync – Figma classes become Oxygen global classes instantly
• ⚙️ Configurable Sync Mode – Choose create-only (safe) or create+update (aggressive)
• 🔤 Smart Font Matching – Automatically fixes font family mismatches (e.g., “BreeSerif” → “Bree Serif”) with 95%+ accuracy
• ♻️ Intelligent Duplicate Detection – Content-based image detection prevents duplicate uploads and saves storage space
• 📁 Smart Filename Resolution – Handles filename conflicts with size-based and incremental suffixes
• 📊 Visual Progress Tracking – Real-time progress indicator shows duplicate detection and upload status
• 🔧 Zero Configuration – Works automatically after activation
• 🎯 Silent Operation – All optimizations happen seamlessly in the background

Who is this for?

• WordPress developers using Oxygen
• Designers who hand off Figma files to WordPress teams
• Agencies looking to speed up design-to-code workflows

Features

• Enables seamless copy-paste from Figma to Oxygen 4
• Paste directly into the Oxygen structure view
• Works automatically after install
• Clean, WordPress-standard code
• Compatible with most caching and optimization plugins

1. Upload the plugin folder to /wp-content/plugins/
2. Activate via the WordPress Plugins screen
3. Install the ready→made Figma plugin
4. Start copying sections from Figma and paste into Oxygen

1. 

   ready→made Figma plugin in action

2. 

   Paste in action – Oxygen Builder

1.3.2

• NEW: Full media query support – Figma responsive breakpoints now sync to Oxygen
• Supports all Oxygen breakpoints: page-width, phone-landscape, phone-portrait, tablet
• Classes preserve responsive styles: base + tablet + mobile variations
• Debug logging shows classes with media queries and breakpoint names

1.3.1

• Performance: Incremental class saving – only sends changed classes instead of entire database (1 class = <1s instead of 7s)
• NEW: Generic showToast() function for class sync notifications with 4 types (success, error, warning, info)

1.3.0

• NEW: Automatic class synchronization – Figma classes sync directly to Oxygen global classes
• NEW: WordPress settings page for configurable sync mode (create-only vs create+update)
• NEW: Storage type option (global classes vs custom selectors)
• NEW: Backward compatible format detection (element+classes vs tree-based)
• NEW: Real-time Angular scope updates for immediate UI refresh
• NEW: Toast notifications for class creation/update feedback
• NEW: AJAX handler with Oxygen autoload compatibility
• Enhanced: Clean separation between element-specific and class-specific styles
• Enhanced: Support for parent and set_name class properties

1.2.3

• NEW: Intelligent duplicate detection – automatically detects and reuses existing images based on content hash
• NEW: Smart filename conflict resolution with size-based and incremental suffixes
• NEW: Support for Figma-generated filenames via suggested_filename field
• Enhanced progress indicator shows duplicate detection status and completion statistics
• Fixed: Progress callback parameter forwarding for duplicate tracking
• Performance: ~80-130ms overhead per image with content-based deduplication

1.2.2

• Fixed: Native paste now works in Oxygen code blocks and contenteditable elements

1.2.1

• Visual progress indicator for image uploads to WP Media Library

1.2.0

• Firefox support added

1.1.1

• Enhanced image processor and paste handler modules
• Improved stability and performance

1.1.0

• Intelligent font matching with 95%+ accuracy
• Automatic font name conversion (e.g., “BreeSerif” → “Bree Serif”)
• IMPROVED: Modular JavaScript architecture for better maintainability
• IMPROVED: Performance optimizations with cache-first approach
• IMPROVED: Enhanced error handling and comprehensive logging

1.0.1

• Added upload image to Media Library functionality

1.0.0

• Initial release – adds Oxygen 4 support for ready→made Figma plugin