Des2WF — How to Use
Summary
Des2WF turns a design frame into a wireframe, built by the same plugin that builds a design
from a wireframe.
It does not redesign the screen: it keeps every element where the design put it, keeps the text
verbatim, simplifies surfaces and nonessential graphics, preserves meaningful symbols, and builds
the result in your file.
Prerequisites
Everything happens inside the Figma plugin. Before generating anything:
1. Sign in
Sign in with your Plabs account on the Account tab and select a project. A wireframe is always generated into a project — its kit and its runs live there.
2. Open the file that holds the design
The design is read from the file that is open. For the Wireframe kit style, the kit's components must be reachable from that same file: the wireframe is built by instancing the masters the kit was registered from.
3. Know what you are selecting
| What you select | What it is used for |
|---|---|
| A design frame | The screen to convert. A frame, component, instance, section or group is accepted |
| The kit's component boards | Read once, at registration, to build the wireframe kit. Only needed for the Wireframe kit style |
One-time setup
Only the Wireframe kit style needs setup. De-styled needs no kit and is the default, so you can generate a wireframe the first time you open the tab.
Register the wireframe kit
Open the Design → WF tab and expand Wireframe kit. Select the kit's component boards on the canvas, then press Register selected boards.
The run reports four steps: Resolve → Sweep → Register → Capture. It reads every component set on the selected boards and records its variants, text slots and sizes, keyed on each set's publish key rather than its node id — so the same kit duplicated onto a second board still registers as one component instead of two.
Note
The fourth step, Capture, walks every node on the selected boards to record what each variant itself contains, so on a large kit it legitimately takes minutes — the panel shows a live count while it works.
Check it worked: the line above the style buttons reads N components · N usable · N with
variants. usable is the count that can actually be placed: a component set cannot be instanced,
so the unit the wireframe picks is always one variant of it.
Wireframe style and layout
Choose a Wireframe style on the Design → WF tab:
| Style | What it draws |
|---|---|
De-styled (primitives, default) |
Neutral surfaces and verbatim text, with context-aware treatment of graphics. No kit registration is needed |
Wireframe kit (kit) |
The same graphic policy, plus accepted registered kit variants. Anything the kit cannot safely express stays primitive |
Both styles can use an image model to classify graphics. Repeated runs are not guaranteed to make identical classification decisions.
The plugin currently requests auto layout automatically; there is no layout selector. It keeps
the source container hierarchy, spacing, padding, alignment and sizing, including one-child wrappers
and absolute overlays. The API still supports absolute (its default when omitted), but that is not
the current plugin's generation setting.
Which graphics stay?
| Graphic | Expected treatment |
|---|---|
| Arrows, navigation/actions, state markers, SNS/identity symbols | Preserve the source shape and the source instance's overrides |
| Uncertain graphics, or graphics without usable source-image evidence | Preserve |
| Nonessential content imagery or redundant artwork beside an existing label | A placeholder only after a high-confidence, non-information-bearing classification |
| Confirmed decoration, such as a button flourish or footer backdrop | Remove the decorative paint; retain transparent layout space where necessary |
A standalone hamburger/menu action carries meaning and stays. A redundant menu illustration may be simplified when its containing control already has the corresponding label. There is no universal “replace menu icons” rule, and names or vector/bitmap format alone do not decide.
This is deliberately conservative: missing image evidence, model failures and timeouts leave more original artwork in place. Preserved identity graphics can retain color. Operator-only scoped overrides are available in the technical guide; the plugin does not expose an icon-rule editor.
Generating a wireframe
Open the Design → WF tab.
- Select exactly one design frame on the canvas. The panel shows the frame's name, id and size once it accepts the selection, and says why if it does not — a multi-selection and a node that is not frame-like are both refused.
- Choose the Wireframe style; auto layout is applied automatically.
- Press Make wireframe.
The run reports four steps: Trigger → Parse → Assemble → Build. Parse and assemble happen on the server; build happens in your file. You can press Stop watching (run continues) at any point — the run continues server-side.
When it finishes you get score / flags / Total.
Reading the result
The output is one frame named des2wf · {design frame name}, placed on the current page and selected.
Nothing keys on that name, so rename it freely.
| What you see | What it means |
|---|---|
| score | Gated verbatim content preservation. A value of 1.00 is not proof that icons, alignment or backgrounds are visually correct |
| A score of 0.00 | The gate failed: something a wireframe may not do happened — an element it could not state at all, an invented or displaced string, a cross drawn over text, two boundaries drawn on top of each other, or nesting past flat under Fixed positions |
| flags | How many elements need a look — flagged plus unmatched. Not errors: places where the conversion had to make a call |
| Different text wrapping | Check fonts and available width. Source typography is preserved where possible, but font fallback or necessary reflow can change wrapping; do not automatically treat a change as correct |
| A dashed orange box | A text layer the design left empty — a content slot with nothing in it. Kept visible rather than emitted as an empty string that would look like preserved content |
| A box with a diagonal cross | A graphic approved for simplification, not every photo, logo or icon. Small placeholders may be filled slots; dividers are not crossed |
| Plain boxes where you expected kit components | Nothing in the kit fitted those elements, or no kit is registered. The de-styled tier stands in, and the run still completes |
After building, the plugin can post the original-design and generated-wireframe PNG pair for a separate render review. This is bound to the original source frame and project, not whichever node is selected after generation. Review failure does not undo a completed wireframe. A skipped review is not a clean review.
The wireframe is built as a single undo step — press undo once to remove it entirely. Re-generating the same design replaces its previous output rather than stacking a copy beside it.
If something goes wrong
"select a design frame" / "select exactly one frame"
Des2WF converts one screen per run. Select a single node, not several.
"selected node is not a frame"
A frame, component, instance, section or group is accepted. Anything else is refused, and the panel
names the type it got.
"Attached to a run already in progress…"
A run for this same design is still open. The plugin attaches to it rather than starting a second
one — wait for it to finish.
The Wireframe kit style comes out as plain boxes
Check the line above the style buttons. no kit registered means this project has no kit yet —
register one, or use De-styled. If a kit is registered and the wireframe is still plain, nothing
in it fitted these elements.
"session expired — please sign in again"
Sign in again on the Account tab, then generate again.
The plugin shows a stale state after an update
Close and reopen the plugin — the UI is bundled, so a reload picks up the current build.
What it does not do
Stated plainly, so the output is read correctly:
- It does not redesign the screen. Position, order and copy come from the design — if the design is wrong, the wireframe is faithfully wrong.
- It does not write copy. Text is carried verbatim, and a text layer the design left empty stays visible as a gap rather than being filled with something plausible.
- It does not guarantee identical model decisions on repeated runs or perfect font availability.
- It does not replace design review. The score and the flags mark what to check, not what is correct.