{"id":229827,"date":"2025-05-05T13:52:56","date_gmt":"2025-05-05T13:52:56","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/ready-made-oxygen-integration\/"},"modified":"2025-11-12T13:49:25","modified_gmt":"2025-11-12T13:49:25","slug":"ready-made-oxygen-integration","status":"publish","type":"plugin","link":"https:\/\/azb.wordpress.org\/plugins\/ready-made-oxygen-integration\/","author":23273694,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.3.2","stable_tag":"1.3.2","tested":"6.8.5","requires":"5.0","requires_php":"7.2","requires_plugins":null,"header_name":"Ready-Made Oxygen Integration","header_author":"levels.dev","header_description":"Essential integration for the Ready-Made Figma plugin to enable copy-paste functionality with Oxygen 4.","assets_banners_color":"b2c2e7","last_updated":"2025-11-12 13:49:25","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/levels.dev\/automatic-webdevelopment-from-figma-via-copy-paste","header_author_uri":"https:\/\/levels.dev","rating":5,"author_block_rating":0,"active_installs":80,"downloads":1846,"num_ratings":1,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.1":{"tag":"1.0.1","author":"levelsdev","date":"2025-06-13 10:31:39"},"1.1.0":{"tag":"1.1.0","author":"levelsdev","date":"2025-07-07 07:22:17"},"1.1.1":{"tag":"1.1.1","author":"levelsdev","date":"2025-09-06 05:15:49"},"1.2.0":{"tag":"1.2.0","author":"levelsdev","date":"2025-10-09 11:03:16"},"1.2.1":{"tag":"1.2.1","author":"levelsdev","date":"2025-10-09 11:10:18"},"1.2.2":{"tag":"1.2.2","author":"levelsdev","date":"2025-10-23 07:34:24"},"1.2.3":{"tag":"1.2.3","author":"levelsdev","date":"2025-11-03 09:10:50"},"1.3.0":{"tag":"1.3.0","author":"levelsdev","date":"2025-11-11 15:18:47"},"1.3.1":{"tag":"1.3.1","author":"levelsdev","date":"2025-11-12 10:15:13"},"1.3.2":{"tag":"1.3.2","author":"levelsdev","date":"2025-11-12 13:49:25"}},"upgrade_notice":{"1.0.1":"<p>Improved integration \u2013 adds support for image uploads during copy-paste.<\/p>"},"ratings":{"1":0,"2":0,"3":0,"4":0,"5":1},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3394213,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3394213,"resolution":"256x256","location":"assets","locale":""},"icon.svg":{"filename":"icon.svg","revision":3394213,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":3394232,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":3394232,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.1","1.1.0","1.1.1","1.2.0","1.2.1","1.2.2","1.2.3","1.3.0","1.3.1","1.3.2"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3310993,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3310993,"resolution":"2","location":"assets","locale":""}},"screenshots":{"1":"ready\u2192made Figma plugin in action","2":"Paste in action \u2013 Oxygen Builder"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[249601,225034,250156,174173],"plugin_category":[],"plugin_contributors":[241826],"plugin_business_model":[],"class_list":["post-229827","plugin","type-plugin","status-publish","hentry","plugin_tags-design-to-code","plugin_tags-figma","plugin_tags-import-export-wordpress-integration","plugin_tags-oxygen-builder","plugin_contributors-levelsdev","plugin_committers-levelsdev"],"banners":{"banner":"https:\/\/ps.w.org\/ready-made-oxygen-integration\/assets\/banner-772x250.jpg?rev=3394232","banner_2x":"https:\/\/ps.w.org\/ready-made-oxygen-integration\/assets\/banner-1544x500.jpg?rev=3394232","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/ready-made-oxygen-integration\/assets\/icon.svg?rev=3394213","icon":"https:\/\/ps.w.org\/ready-made-oxygen-integration\/assets\/icon.svg?rev=3394213","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/ready-made-oxygen-integration\/assets\/screenshot-1.png?rev=3310993","caption":"ready\u2192made Figma plugin in action"},{"src":"https:\/\/ps.w.org\/ready-made-oxygen-integration\/assets\/screenshot-2.png?rev=3310993","caption":"Paste in action \u2013 Oxygen Builder"}],"raw_content":"<!--section=description-->\n<p><strong>Turn Figma designs into editable Oxygen Builder sections \u2013 copy &amp; paste, just like that.<\/strong><\/p>\n\n<p>This plugin is the essential integration for ready\u2192made, a Figma plugin that allows designers and developers to convert their Figma elements into live, editable WordPress layouts using Oxygen Builder.<\/p>\n\n<p>With a single click, you can transfer design elements from Figma and insert them into the Oxygen Builder's structure panel \u2013 with all layout, classes, and structure preserved.<\/p>\n\n<p><strong>NEW in v1.3.0: Automatic Class Synchronization<\/strong><\/p>\n\n<p>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.<\/p>\n\n<p><strong>Smart Features:<\/strong><\/p>\n\n<ul>\n<li>\ud83c\udfa8 <strong>Automatic Class Sync<\/strong> - Figma classes become Oxygen global classes instantly<\/li>\n<li>\u2699\ufe0f <strong>Configurable Sync Mode<\/strong> - Choose create-only (safe) or create+update (aggressive)<\/li>\n<li>\ud83d\udd24 <strong>Smart Font Matching<\/strong> - Automatically fixes font family mismatches (e.g., \"BreeSerif\" \u2192 \"Bree Serif\") with 95%+ accuracy<\/li>\n<li>\u267b\ufe0f <strong>Intelligent Duplicate Detection<\/strong> - Content-based image detection prevents duplicate uploads and saves storage space<\/li>\n<li>\ud83d\udcc1 <strong>Smart Filename Resolution<\/strong> - Handles filename conflicts with size-based and incremental suffixes<\/li>\n<li>\ud83d\udcca <strong>Visual Progress Tracking<\/strong> - Real-time progress indicator shows duplicate detection and upload status<\/li>\n<li>\ud83d\udd27 <strong>Zero Configuration<\/strong> - Works automatically after activation<\/li>\n<li>\ud83c\udfaf <strong>Silent Operation<\/strong> - All optimizations happen seamlessly in the background<\/li>\n<\/ul>\n\n<p><strong>Who is this for?<\/strong><\/p>\n\n<ul>\n<li>WordPress developers using Oxygen<\/li>\n<li>Designers who hand off Figma files to WordPress teams<\/li>\n<li>Agencies looking to speed up design-to-code workflows<\/li>\n<\/ul>\n\n<h3>Features<\/h3>\n\n<ul>\n<li>Enables seamless copy-paste from Figma to Oxygen 4<\/li>\n<li>Paste directly into the Oxygen structure view<\/li>\n<li>Works automatically after install<\/li>\n<li>Clean, WordPress-standard code<\/li>\n<li>Compatible with most caching and optimization plugins<\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin folder to <code>\/wp-content\/plugins\/<\/code><\/li>\n<li>Activate via the WordPress Plugins screen<\/li>\n<li>Install the ready\u2192made Figma plugin<\/li>\n<li>Start copying sections from Figma and paste into Oxygen<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id='do%20i%20need%20to%20configure%20anything%20after%20installation%3F'><h3>Do I need to configure anything after installation?<\/h3><\/dt>\n<dd><p>No. Just activate it and you're ready to go.<\/p><\/dd>\n<dt id='what%20is%20ready%E2%86%92made%3F'><h3>What is ready\u2192made?<\/h3><\/dt>\n<dd><p>A Figma plugin that turns designs into editable WordPress layout code, ready for Oxygen Builder.<\/p><\/dd>\n<dt id='will%20this%20slow%20down%20my%20site%3F'><h3>Will this slow down my site?<\/h3><\/dt>\n<dd><p>No. It loads a lightweight script only in the Oxygen editor context.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.3.2<\/h4>\n\n<ul>\n<li>NEW: Full media query support - Figma responsive breakpoints now sync to Oxygen<\/li>\n<li>Supports all Oxygen breakpoints: page-width, phone-landscape, phone-portrait, tablet<\/li>\n<li>Classes preserve responsive styles: base + tablet + mobile variations<\/li>\n<li>Debug logging shows classes with media queries and breakpoint names<\/li>\n<\/ul>\n\n<h4>1.3.1<\/h4>\n\n<ul>\n<li>Performance: Incremental class saving - only sends changed classes instead of entire database (1 class = &lt;1s instead of 7s)<\/li>\n<li>NEW: Generic showToast() function for class sync notifications with 4 types (success, error, warning, info)<\/li>\n<\/ul>\n\n<p><h4>1.3.0<\/h4><\/p>\n\n<ul>\n<li>NEW: Automatic class synchronization - Figma classes sync directly to Oxygen global classes<\/li>\n<li>NEW: WordPress settings page for configurable sync mode (create-only vs create+update)<\/li>\n<li>NEW: Storage type option (global classes vs custom selectors)<\/li>\n<li>NEW: Backward compatible format detection (element+classes vs tree-based)<\/li>\n<li>NEW: Real-time Angular scope updates for immediate UI refresh<\/li>\n<li>NEW: Toast notifications for class creation\/update feedback<\/li>\n<li>NEW: AJAX handler with Oxygen autoload compatibility<\/li>\n<li>Enhanced: Clean separation between element-specific and class-specific styles<\/li>\n<li>Enhanced: Support for parent and set_name class properties<\/li>\n<\/ul>\n\n<h4>1.2.3<\/h4>\n\n<ul>\n<li>NEW: Intelligent duplicate detection - automatically detects and reuses existing images based on content hash<\/li>\n<li>NEW: Smart filename conflict resolution with size-based and incremental suffixes<\/li>\n<li>NEW: Support for Figma-generated filenames via suggested_filename field<\/li>\n<li>Enhanced progress indicator shows duplicate detection status and completion statistics<\/li>\n<li>Fixed: Progress callback parameter forwarding for duplicate tracking<\/li>\n<li>Performance: ~80-130ms overhead per image with content-based deduplication<\/li>\n<\/ul>\n\n<h4>1.2.2<\/h4>\n\n<ul>\n<li>Fixed: Native paste now works in Oxygen code blocks and contenteditable elements<\/li>\n<\/ul>\n\n<h4>1.2.1<\/h4>\n\n<ul>\n<li>Visual progress indicator for image uploads to WP Media Library<\/li>\n<\/ul>\n\n<h4>1.2.0<\/h4>\n\n<ul>\n<li>Firefox support added<\/li>\n<\/ul>\n\n<h4>1.1.1<\/h4>\n\n<ul>\n<li>Enhanced image processor and paste handler modules<\/li>\n<li>Improved stability and performance<\/li>\n<\/ul>\n\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>Intelligent font matching with 95%+ accuracy<\/li>\n<li>Automatic font name conversion (e.g., \"BreeSerif\" \u2192 \"Bree Serif\")<\/li>\n<li>IMPROVED: Modular JavaScript architecture for better maintainability<\/li>\n<li>IMPROVED: Performance optimizations with cache-first approach<\/li>\n<li>IMPROVED: Enhanced error handling and comprehensive logging<\/li>\n<\/ul>\n\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Added upload image to Media Library functionality<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release \u2013 adds Oxygen 4 support for ready\u2192made Figma plugin<\/li>\n<\/ul>","raw_excerpt":"The official WordPress integration for the ready\u2192made Figma plugin. Seamlessly copy-paste sections from your Figma designs into Oxygen Builder.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/229827","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=229827"}],"author":[{"embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/levelsdev"}],"wp:attachment":[{"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=229827"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=229827"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=229827"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=229827"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=229827"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=229827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}