Tutorials

Getting started

ready→made turns your Figma designs into clean, structured code using a real spatial layout engine — not an AI guessing from a screenshot. Here's the whole workflow, end to end.

🎁 Free example website — duplicate the ready→made Example Website in Figma (a complete, design-system-driven multi-page site) and follow this guide with a real design.

The workflow in four steps

  1. Select in Figma. Open the ready→made plugin and select any frame, section, or component you want to convert.
  2. Pick your target. Choose Oxygen Classic, Oxygen 6, Gutenberg, or HTML. The engine reads the real geometry and reconstructs proper flex/grid structure.
  3. Convert & export. Copy the result (for Oxygen, paste straight into the builder) or download the code. Vectors come through as inline SVG; images are exported and embedded.
  4. Ship — or finish with AI. Use it as-is, or hand the clean HTML to Cursor / Claude to add content, interactions, and the last 10%.

A Figma card-grid design next to the same section converted by ready→made and running live in an Oxygen WordPress site

Same design in, real code out — running live in Oxygen.

Pasting into Oxygen

Oxygen Classic needs no plugin — convert, Copy, then press Ctrl/Cmd+Shift+I in the builder to open the Import Element JSON dialogue and paste. Oxygen 6 uses the free Ready-Made Oxygen Integration plugin — install it, then paste onto the canvas. Either way, your design lands as native, editable elements:

The converted card grid open in the Oxygen builder with a div selected, showing native flex layout, gap and width controls

For Gutenberg and HTML you don't need any extra plugin — see Convert to Gutenberg and Convert to HTML.

Install & the free plan

Install ready→made from the Figma community and start on the free plan — 10 conversions a month, all four targets, full clean output with no watermark. When it's saving you real hours, upgrade on the pricing page.

Open ready→made in Figma →

Next

New to it? Read Choosing a target to decide which output fits your stack, then Preparing your Figma file for the cleanest possible result.

menu