How to use PixelForge

Install the PixelForge plugin in Figma and open it on any page of your file. Select the frame or node you want to turn into code, and the plugin shows its size and layer count right in the panel.

Click “Generate code”. The plugin collects a JSON description of the selected node (styles, Auto Layout, typography, real images and icons) and opens the PixelForge web app in your browser with the design already loaded. You don't need to close your Figma session.

In the web app a short quiz asks you to pick a stack and how styles should be wired up. Then generation starts, and the finished code can be copied or downloaded as an archive.

The main thing to know about PixelForge: geometry is computed by code, not by a model. The model receives one or two short requests, and none of them are for markup.

• Layout inference. The Figma node tree becomes a layout tree: what turns into a flex container and what is positioned absolutely, axis direction, spacing, nesting. This step is deterministic: the same design always produces the same result.
• Semantics. The model receives a “skeleton” of the tree and returns a map of meaning: where the header is, where a button is, where a reusable component begins. If the model fails or times out, generation doesn't break: the code ships with default tags.
• Class names. When styles ship as real CSS (HTML/CSS, CSS Modules, Vue scoped styles), a second, independent request comes up with readable BEM names for the classes. A failure here breaks nothing either: layer names are used instead.
• Repeat folding. Neighboring nodes with the same subtree shape collapse into one template and a data array. Also without a model and without a single token. If the engine doesn't understand even one difference inside a group, it refuses to fold the whole group: not folding is safer than folding wrong.
• Emission. One generator per stack, all reading the same layout tree. This is also where duplicate CSS rules are merged and components are moved into separate files.

HTML/CSS: index.html next to styles.css or styles.scss (flat rules, no nesting), or a single file with styles inside a <style> tag.

React: Tailwind CSS or CSS Modules. Next.js: the same components laid out for App Router (app/page) or Pages Router (pages/index, global styles in pages/_app); images go into public/assets.

Vue 3: Single File Components with <script setup>, Tailwind CSS or scoped styles.

TypeScript for React, Next.js and Vue is on by default and can be turned off in the quiz. No formatter runs over the output: the generator handles indentation itself.

Background images and vector icons are exported from the Figma design itself, not pulled from external sources. Large photos are compressed with a width cap, which fits within request size limits without visible quality loss; small icons stay PNG where transparency matters.

Spacing and size values are carried over without rounding to the nearest standard class, Auto Layout becomes flex properties (only uniform galleries of identical tiles turn into Grid), coordinates aren't invented for nodes without Auto Layout, and font size and line-height always travel together. Layer order in the design is preserved as element order in the DOM.

An honest boundary: matching Figma glyph for glyph is impossible in principle. The browser shapes text differently from the editor, and that's a property of the platform, not of the generator's quality. The achievable and verifiable bar is matching boxes, spacing and sizes, with no line breaks that aren't in the design. Engine changes are verified by test benches: one compares every layer's rectangle with the rendered result, others compare the whole page as an image, repeat folding and narrow screens.

The output isn't a pixel snapshot: fixed heights are released to fit content where it's safe, type is fluid, and rows that stop fitting wrap into a column via a media query.

Narrow screens are checked separately: at widths of 320–767px the page doesn't scroll sideways or clip content. At the design's own width, the output doesn't change by a single pixel. That's an invariant the benches enforce.

Free gives you 5 generations per month with no card required, plus the HTML/CSS and React stacks. Pro includes 50 generations per month, all four stacks and project download; Team includes 5 seats with 100 generations each, and every extra seat is $9/mo. The counter resets on the 1st of the month; a generation that doesn't produce a result is refunded. Details are on the pricing page.

Short answers to common questions are on the home page, in the “Frequently asked” section.