ready→made User Guide
ready→made turns your Figma designs into clean, structured code — Oxygen Classic, Oxygen 6, Gutenberg, or plain HTML — using a real spatial layout engine, not an AI guessing from a screenshot. This guide walks the workflow end to end.
The workflow in four steps
- Select in Figma. Open the ready→made plugin and select any frame, section, or component you want to convert.
- Pick your target. Choose Oxygen Classic, Oxygen 6, Gutenberg, or HTML. The engine reads the real geometry and reconstructs proper flex/grid structure.
- Convert & export. Copy the result (Oxygen: paste straight into the builder) or download the code. Vectors come through as inline SVG; images are exported and embedded.
- 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%.
Choosing a target
- Oxygen Classic — copy in Figma, paste directly into the Oxygen Builder canvas.
- Oxygen 6 — output structured for the rebuilt engine (new builds and migrations).
- Gutenberg — native WordPress blocks, editable in the block editor, no page-builder lock-in.
- HTML — semantic markup + deduplicated, class-based CSS. The universal, AI-ready output.
Preparing your Figma file for the best result
- Name and group intentionally. Clear frames and groups convert to cleaner structure — the engine respects your grouping.
- Use Auto Layout where it reflects intent. It maps to real flex/grid; ready→made also reconstructs layout from geometry when Auto Layout isn't used.
- Keep icons and logos as vectors. They export as inline SVG and stay crisp.
- Convert section by section. Converting a whole page at once usually yields worse structure than doing it a section at a time.
Getting started
Install ready→made from the Figma community, and start on the free plan — 10 conversions a month, all four targets, full clean output (no watermark). When it's saving you real hours, upgrade on the pricing page.