Title: Figma to Oxygen Builder – ready→made WordPress Integration Author: Levels Branding and Webdevelopment Published: 5. Mai 2025 Last modified: 20. Juli 2026 --- Search plugins ![](https://ps.w.org/ready-made-oxygen-integration/assets/banner-772x250.jpg?rev =3394232) ![](https://ps.w.org/ready-made-oxygen-integration/assets/icon.svg?rev=3394213) # Figma to Oxygen Builder – ready→made WordPress Integration By [Levels Branding and Webdevelopment](https://profiles.wordpress.org/levelsdev/) [Download](https://downloads.wordpress.org/plugin/ready-made-oxygen-integration.1.7.1.zip) * [Details](https://de-ch.wordpress.org/plugins/ready-made-oxygen-integration/#description) * [Reviews](https://de-ch.wordpress.org/plugins/ready-made-oxygen-integration/#reviews) * [Installation](https://de-ch.wordpress.org/plugins/ready-made-oxygen-integration/#installation) * [Development](https://de-ch.wordpress.org/plugins/ready-made-oxygen-integration/#developers) [Support](https://wordpress.org/support/plugin/ready-made-oxygen-integration/) ## Description **Turn Figma designs into editable WordPress pages – copy, paste, publish.** readymade is the official WordPress companion for the **readymade Figma plugin**( powered by the design-to-code engine). It turns your Figma frames into clean, editable layouts inside WordPress — with layout, spacing, typography, colors, and reusable classes preserved — so there is no manual rebuild and no drift from the source file. Design in Figma. Copy. Paste into WordPress. Ship. **New in 1.6.0: imported images are saved into your Media Library automatically** A new **readymade Import** screen (Settings readymade Import) takes the output from the Figma plugin and builds a real WordPress page for you — locally, with no external server involved. It auto-detects the format and routes it to the right target: * 🟣 **Oxygen 6** – writes the page tree and merges your design’s classes into Oxygen’s global selectors (non-destructively), then regenerates the CSS. The page opens fully styled in the Oxygen 6 builder. * 🔵 **Oxygen (classic)** – paste straight into the Oxygen 4 structure view, layout and classes intact. * ⬛ **Gutenberg** – creates a page from the block markup, ready for the block editor. * 🌐 **HTML** – drops semantic, hand-editable markup into a page. Google Fonts used in your design are detected and loaded automatically, so type looks right on the first render. **Why designers and agencies use readymade** * 🎨 **Pixel-accurate** – exact spacing, type, and color from the source file, not eyeballed. * 📱 **Responsive by default** – Figma breakpoints sync to real Oxygen breakpoints( base, tablet, phone). * 🧱 **Clean, maintainable output** – semantic structure and reusable global classes your team can extend, not a tangle of absolute positioning. * ♻️ **Smart image handling** – content-based duplicate detection reuses existing media and saves storage space. * 🔤 **Automatic font matching** – fixes family-name mismatches (e.g. «BreeSerif»« Bree Serif») with 95%+ accuracy. * 🔒 **No external backend** – everything runs on your own WordPress. Your designs and content never leave your site. **Who is this for?** * WordPress developers and agencies building with Oxygen (4 and 6) * Designers who hand off Figma files to WordPress teams * Anyone who wants to skip the design-to-code rebuild readymade pairs with the free readymade Figma plugin. Design once, paste anywhere. ### Features * One-click import for Oxygen 6, Oxygen classic, Gutenberg, and plain HTML * Auto-detects the target from the pasted content * Oxygen 6: writes the page tree, merges global selectors non-destructively, and regenerates the CSS * Oxygen 4: paste directly into the structure view * Turns your Figma design system into Oxygen global classes, with responsive breakpoints * Automatic Google Fonts loading * Content-based image de-duplication with a visual progress indicator * 95%+ accurate font-name matching * Runs entirely on your site — no external server or account required * Clean, WordPress-standard code; compatible with most caching and optimization plugins ## Screenshots [⌊The ready-made Figma plugin - select a frame in Figma and copy production-ready code for WordPress.⌉⌊The ready-made Figma plugin - select a frame in Figma and copy production-ready code for WordPress.⌉[ The ready-made Figma plugin – select a frame in Figma and copy production-ready code for WordPress. [⌊ready-made Import settings page - paste the output and create Oxygen 6, Oxygen classic, Gutenberg, or HTML pages.⌉⌊ready-made Import settings page - paste the output and create Oxygen 6, Oxygen classic, Gutenberg, or HTML pages.⌉[ ready-made Import settings page – paste the output and create Oxygen 6, Oxygen classic, Gutenberg, or HTML pages. [⌊The result - your Figma design live and pixel-accurate in WordPress, built with Oxygen.⌉⌊The result - your Figma design live and pixel-accurate in WordPress, built with Oxygen.⌉[ The result – your Figma design live and pixel-accurate in WordPress, built with Oxygen. ## Installation 1. Upload the plugin folder to `/wp-content/plugins/`, or install it from the WordPress Plugins screen. 2. Activate it via the Plugins screen. 3. Install the free **readymade** plugin in Figma. 4. In Figma, select a frame or group and click **Copy**. 5. Either paste into the Oxygen structure view, or go to **Settings readymade Import**, paste, and create a page. ## FAQ ### Do I need to configure anything after installation? No. Activate it and you’re ready to go. To import a full page, open **Settings readymade Import**, paste the Figma plugin’s output, and click **Import & create page**. ### What is readymade? readymade is a Figma plugin that turns your designs into editable WordPress layouts, powered by the design-to-code engine. This plugin is its official WordPress companion. ### Which page builders and formats are supported? Oxygen 6 and Oxygen classic (4), plus Gutenberg blocks and plain HTML. The importer auto-detects the format from whatever you paste, or you can pick the target manually. ### What’s the difference between pasting into Oxygen and using the Import screen? Pasting into the Oxygen structure view drops a section into the page you’re editing. The **readymade Import** screen creates a brand-new WordPress page from your pasted output — ideal for Oxygen 6, Gutenberg, and HTML. ### How does Oxygen 6 support work? On import, the plugin writes the page tree to Oxygen 6, merges your design’s classes into Oxygen’s global selectors without overwriting existing ones, and regenerates the CSS. The page then opens fully styled in the Oxygen 6 builder. ### Does my design or content leave my site? No. Everything runs on your own WordPress install. There is no external server, cloud service, or account required — your data stays with you. ### Will my responsive breakpoints be preserved? Yes. Figma’s responsive breakpoints map to Oxygen’s native breakpoints (base, tablet, phone), so your layout reflows the way you designed it. ### What happens to images and fonts from my design? Images are uploaded to your Media Library with content-based de-duplication, so the same asset is never uploaded twice. Google Fonts used in the design are detected and loaded automatically. ### Do I need an Oxygen license? Oxygen 6 or Oxygen 4 must be installed and active on your site to import to those targets. Gutenberg and HTML imports work on any WordPress site. ### Will this slow down my site? No. Editor scripts load only in the builder context, and the importer runs only when you use it. Nothing extra is added to your front end. ## Reviews ![](https://secure.gravatar.com/avatar/45e68b3f29b037dec658dd36f3a23c7ab954363abcffdc765a7c972adab9d90a? s=60&d=retro&r=g) ### 󠀁[Nope](https://wordpress.org/support/topic/nope-98/)󠁿 [millertraci](https://profiles.wordpress.org/millertraci/) 2. Oktober 2026 I am a longtime Figma user and builder of multiple design systems. I imported 5 different designs and components, interactive and non-interactive. I am using oxygen classic so I am importing the JSON. It was terrible. Images did NOT import, and background images were just ignored. It broke icons. It did not import global styles of any kind; colors, text, spacing, etc. My H3 was converted to a P with inline styling to make it appear correctly, no style classes saved. It created more work than it saved. I removed the plugin and went to cancel my subscription, and that failed. I now own this thing and am will have to contact my bank to cancel the transaction to get out of it. This plugin has a long way to go to fulfil it's claims. ![](https://secure.gravatar.com/avatar/3d606b64805e79c68e9b7038c66f2a4cab729a88fde35c8065b202e0d96b184c? s=60&d=retro&r=g) ### 󠀁[78](https://wordpress.org/support/topic/78-5/)󠁿 [pager25](https://profiles.wordpress.org/pager25/) 8. Mai 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. [ Read all 2 reviews ](https://wordpress.org/support/plugin/ready-made-oxygen-integration/reviews/) ## Contributors & Developers “Figma to Oxygen Builder – readymade WordPress Integration” is open source software. The following people have contributed to this plugin. Contributors * [ Levels Branding and Webdevelopment ](https://profiles.wordpress.org/levelsdev/) [Translate “Figma to Oxygen Builder – readymade WordPress Integration” into your language.](https://translate.wordpress.org/projects/wp-plugins/ready-made-oxygen-integration) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/ready-made-oxygen-integration/), check out the [SVN repository](https://plugins.svn.wordpress.org/ready-made-oxygen-integration/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/ready-made-oxygen-integration/) by [RSS](https://plugins.trac.wordpress.org/log/ready-made-oxygen-integration/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.7.1 * NEW: «Open converter» on the Tools -> Oxygen 4 -> 6 Export page now carries your global colors straight into the converter – its Global colors box is pre-filled automatically, no copy/paste. #### 1.7.0 * NEW: Tools -> «Oxygen 4 -> 6 Export» page. One click copies this site’s Oxygen 4 global color palette as JSON – paste it into the «Global colors» box of the free Oxygen 4 -> Oxygen 6 converter at wpconverters.com so color(N) references resolve to real colors (no wp-cli or hand-typing hex values needed). * Fix: importing an element-shaped Oxygen 6 bundle no longer triggers «IO-TS decoding failed» in the builder. The document tree status is now emitted as «exported»( the value Oxygen 6 requires) instead of «converted». #### 1.6.2 * Import images: the Oxygen 4->6 paste now offers an «Import images into the Media Library» toggle (default on). When enabled, images that still point at the source site are downloaded into this site’s Media Library on import and the page is rewritten to the local URLs, so nothing hotlinks or 404s. Failed downloads are left untouched so an import never fails on one bad image. #### 1.6.0 * NEW: Imported images are sideloaded into your Media Library. Large images from the ready-made Figma plugin arrive as temporary CDN links that expire after about two hours; the importer (and the in-builder paste) now downloads each one into your own Media Library at import time and rewrites the page to the permanent local URL. A link that cannot be fetched is left as-is – the import itself never fails on a missing image. #### 1.5.0 * NEW: Etch target in the importer. Paste the design-to-code Figma plugin’s Etch output to create a WordPress page. Native Etch output merges its styles into Etch’s own style store (etch_styles), so they render on the front end and stay editable inside Etch (two-way sync); default Etch output carries its own block and needs no merge. * Importer target dropdown adds «Etch»; auto-detect recognises the Etch bundle ( markup + styles). * NEW: Oxygen 6 in-builder paste. A «Paste from readymade» button inside the Oxygen 6 builder appends the pasted design to the current page (server-side import, node ids renumbered, selectors merged non-destructively, CSS cache regenerated) and reloads the builder. * NEW: Direct media upload. REST endpoint (ready-made/v1) lets the readymade Figma plugin push images straight into your Media Library via an application password— pasted markup references your own site URLs, nothing is hosted elsewhere. * The Oxygen 6 importer and in-builder paste also accept the output of the free Oxygen 4 Oxygen 6 converter at wpconverters.com — your CSS classes are registered as global selectors instead of appearing as «(deleted)». #### 1.4.0 * NEW: Target-agnostic importer — Settings «readymade Import». Paste the design- to-code Figma plugin’s output and create a WordPress page locally, no external server. * Supports Oxygen 6 (merges global selectors non-destructively + writes the page tree + regenerates CSS), Oxygen classic, Gutenberg blocks, and raw HTML. * Auto-detects the target from the pasted content; Google Fonts URLs from the design are loaded automatically. * The existing Oxygen 4 clipboard paste flow is unchanged. #### 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 ## Meta * Version **1.7.1** * Last updated **3 Monaten ago** * Active installations **100+** * WordPress version ** 5.0 or higher ** * Tested up to **7.0.7** * PHP version ** 7.2 or higher ** * Language * [English (US)](https://wordpress.org/plugins/ready-made-oxygen-integration/) * Tags * [figma](https://de-ch.wordpress.org/plugins/tags/figma/)[gutenberg](https://de-ch.wordpress.org/plugins/tags/gutenberg/) [oxygen builder](https://de-ch.wordpress.org/plugins/tags/oxygen-builder/)[page builder](https://de-ch.wordpress.org/plugins/tags/page-builder/) * [Advanced View](https://de-ch.wordpress.org/plugins/ready-made-oxygen-integration/advanced/) ## Ratings 3 von 5 Sternen. * [ 1 5-Sterne-Rezension ](https://wordpress.org/support/plugin/ready-made-oxygen-integration/reviews/?filter=5) * [ 0 4-Sterne-Rezensionen ](https://wordpress.org/support/plugin/ready-made-oxygen-integration/reviews/?filter=4) * [ 0 3-Sterne-Rezensionen ](https://wordpress.org/support/plugin/ready-made-oxygen-integration/reviews/?filter=3) * [ 0 2-Sterne-Rezensionen ](https://wordpress.org/support/plugin/ready-made-oxygen-integration/reviews/?filter=2) * [ 1 1-Sterne-Rezension ](https://wordpress.org/support/plugin/ready-made-oxygen-integration/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/ready-made-oxygen-integration/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/ready-made-oxygen-integration/reviews/) ## Contributors * [ Levels Branding and Webdevelopment ](https://profiles.wordpress.org/levelsdev/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/ready-made-oxygen-integration/)