[WordPress] 外掛分享: Figma to Oxygen Builder – ready→made WordPress Integration

首頁外掛目錄 › Figma to Oxygen Builder – ready→made WordPress Integration
WordPress 外掛 Figma to Oxygen Builder – ready→made WordPress Integration 的封面圖片
100+
安裝啟用
★★★★★
5/5 分(1 則評價)
剛更新
最後更新
問題解決
WordPress 5.0+ PHP 7.2+ v1.6.0 上架:2025-05-04

內容簡介

Figma to Oxygen Builder 是一款專為 WordPress 設計的外掛,能將 Figma 設計轉換為可編輯的 WordPress 頁面,無需手動重建,保留佈局、間距、字體和顏色,簡化設計到程式碼的過程。

【主要功能】
• 一鍵匯入至 Oxygen 6、Oxygen classic、Gutenberg 和 HTML
• 自動檢測貼上內容的目標格式
• 將 Figma 設計系統轉換為 Oxygen 全域類別
• 自動載入 Google Fonts
• 內容基礎的圖片去重功能
• 完全在本地運行,無需外部伺服器

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.6.0) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Figma to Oxygen Builder – ready→made WordPress Integration」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

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.6.0: imported images are saved into your Media Library automatically
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.

Google Fonts used in your design are detected and loaded automatically, so type looks right on the first render.
Why designers and agencies use ready→made

🎨 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

ready→made pairs with the free ready→made 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

延伸相關外掛

文章
Filter
Mastodon