Figma to Oxygen Builder – ready→made WordPress Integration
| 开发者 |
levelsdev
levels-branding |
|---|---|
| 更新时间 | 2026年7月11日 15:10 |
| PHP版本: | 7.2 及以上 |
| WordPress版本: | 7.0 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
Turn Figma designs into editable WordPress pages – copy, paste, publish.
ready→made is the official WordPress companion for the ready→made 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.5.0: in-builder paste for Oxygen 6, direct Media Library upload from Figma, Etch import
A new ready→made Import screen (Settings → ready→made 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.
- 🎨 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.
- 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
安装:
- Upload the plugin folder to
/wp-content/plugins/, or install it from the WordPress Plugins screen. - Activate it via the Plugins screen.
- Install the free ready→made plugin in Figma.
- In Figma, select a frame or group and click Copy.
- Either paste into the Oxygen structure view, or go to Settings → ready→made Import, paste, and create a page.
屏幕截图:
常见问题:
Do I need to configure anything after installation?
No. Activate it and you're ready to go. To import a full page, open Settings → ready→made Import, paste the Figma plugin's output, and click Import & create page.
What is ready→made?
ready→made 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 ready→made 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.
更新日志:
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 ready→made" 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 ready→made 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)".
- NEW: Target-agnostic importer — Settings → "ready→made 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.
- 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
- 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)
- 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
- 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
- Fixed: Native paste now works in Oxygen code blocks and contenteditable elements
- Visual progress indicator for image uploads to WP Media Library
- Firefox support added
- Enhanced image processor and paste handler modules
- Improved stability and performance
- 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
- Added upload image to Media Library functionality
- Initial release – adds Oxygen 4 support for ready→made Figma plugin