تفصیل

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

This plugin is the essential integration for readymade, 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

اسکرین شاٹس

readymade Figma plugin in action
Paste in action – Oxygen Builder

انسٹالیشن

Upload the plugin folder to /wp-content/plugins/
Activate via the WordPress Plugins screen
Install the readymade Figma plugin
Start copying sections from Figma and paste into Oxygen

عمومی سوالات

Do I need to configure anything after installation?: No. Just activate it and you’re ready to go.
What is readymade?: A Figma plugin that turns designs into editable WordPress layout code, ready for Oxygen Builder.
Will this slow down my site?: No. It loads a lightweight script only in the Oxygen editor context.

جائزے

pager25 مئی 8, 2025

As a web developer deeply involved in Figma and Oxygen Builder projects, I’m always on the lookout for tools that enhance speed, consistency, and maintainability. The Ready-made Oxygen plugin is one of those rare gems that actually delivers. The Ready-Made oxygen plugin brings Figma designs directly into WordPress Oxygen Builder — including layouts, styles, and components. Just copy and paste. Some Advantages speeds up workflow Oxygen-native integration: Ready-made Oxygen works within the Oxygen ecosystem, maintaining performance and avoiding conflicts. layouts, styles, and components are also transferred to oxygen almost zero learning curve. Verdict: Ready-made Oxygen is a solid addition to the toolkit of any Oxygen Builder user. It is a huge time saver especially for teams or freelancers juggling multiple projects. If you’re an Oxygen user looking to speed up development without compromising on design quality, this plugin is absolutely worth checking out.

تمام 1 جائزے پڑھیں

شراکت دار اور ڈیویلپرز

“Figma to Oxygen Builder – readymade WordPress Integration” اوپن سورس سافٹ ویئر ہے۔ مندرجہ ذیل لوگوں نے اس پلگ ان میں حصہ لیا:

Levels Branding and Webdevelopment

“Figma to Oxygen Builder – readymade WordPress Integration” کا اپنی زبان میں ترجمہ کریں۔

ڈویلپمینٹ میں دلچسپی ہے؟

کوڈ براؤز کریں، ایس این وی ریپوزیٹری کو چیک کریں یا ڈویلپمینٹ لاگ کو سبسکرائب کریں بذریعہ آر ایس ایس۔

چینج لاگ

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 readymade Figma plugin