Bridging Figma to Oxygen Builder

For developers who work with the Oxygen Builder and design-heavy projects in Figma, the design-to-build handoff is often where efficiency goes to die. We've all been there—opening a Figma file, rebuilding the layout manually in Oxygen, trying to replicate spacing, fonts, positioning, and styles pixel-perfectly. It's tedious, error-prone, and frankly, a waste of our time.

That's where Ready→Made comes in. While still in development, this plugin is designed to automate the boring parts by translating Figma elements directly into Oxygen components via a clever clipboard-copy mechanism.

Let’s dig into how it works and what problems it's trying to solve.

🧠 Under the Hood: How It Works

Ready→Made doesn't rely on complex APIs or over-engineered build pipelines. Instead, it's built around a simple but effective workflow:

1. Copy an element in Figma
2. Paste it into Oxygen Classic Builder
3. Done.

Here's what happens under the hood:

• Clipboard Payload: When you copy a frame or group in Figma, the plugin intercepts the metadata: layers, styles, positioning, type settings, etc.

• Translation Layer: This metadata is translated into an internal object model that mirrors the structure of Oxygen’s builder elements—think Divs, Headings, Texts, Images, etc.

• CSS Mapping: Style properties (color, typography, padding, layout) are mapped directly to either inline styles or CSS classes, depending on how you've configured Oxygen. The plugin supports different CSS frameworks too (like Utility classes or custom class naming schemes).

• Smart Positioning: It uses a heuristic system to interpret absolute positions from Figma and convert them into proper layout structures—grids, flex containers, or nested divs—rather than blindly duplicating pixel offsets.

• SVG Support: Vector shapes from Figma are exported as inline SVGs and placed into Code Blocks inside Oxygen, so they retain sharpness and flexibility.

🤖 Why Developers Might Actually Care

A lot of “design-to-code” tools end up being either:

1. Too abstract (trying to be magic black boxes),

2. Too specific (locked into a single framework), or

3. Just too wrong (hello, div soup and inline styles galore).

Ready→Made is different because it:

• Doesn’t pretend to know better than you: It gives you clean, readable structure—starting points, not final products.

• Works with how you already build in Oxygen: Classic Builder support means it's integrated with existing workflows, not trying to reinvent them.

• Keeps code editable: You can modify the output like any other Oxygen element—no proprietary layers or uneditable wrappers.

🛠 Current Dev Status

The plugin is still in its alpha phase. Here's what's working right now:

• ✅ Copy/paste from Figma into Oxygen

• ✅ Conversion of text, images, vectors, and containers

• ✅ Basic style mapping

• ✅ Layout reconstruction (auto-detecting flex/grid wrappers)

Planned features include:

• 🔜 Responsive breakpoints from Figma constraints

• 🔜 Global style syncing with Oxygen classes

• 🔜 Component recognition for design systems (i.e. auto-mapping repeated symbols like nav bars or footers)

🧪 Try It Before It’s Polished

We’re looking for developers who are comfortable getting their hands dirty and helping shape the tool. If you're used to inspecting plugin logs, tweaking your CSS frameworks, or even curious about contributing feedback to the underlying architecture—we’d love to hear from you.

Check out the site and hop on the waitlist. The goal is to release a public beta around July 2025, and refine it heavily before an official launch.

This isn’t a magic bullet. It’s a wrench for your toolbox—if you’re the kind of dev who likes your tools lightweight, open-ended, and battle-tested.