Des2WF — 使い方

Summary

Des2WF は、デザインフレームをワイヤーフレームに変換します。生成には、ワイヤーフレームからデザインを組み立てるのと同じプラグインを使います。
画面をデザインし直すツールではありません。各要素をデザインが置いた位置のまま保ち、テキストは原文のまま、面と不要な図形を簡略化し、意味のある記号を保持して、開いているファイル上に組み立てます。

事前準備

操作はすべて Figma プラグイン内で完結します。生成の前に以下を用意してください。

1. サインイン

Account タブで Plabs アカウントにサインインし、プロジェクトを選択します。ワイヤーフレームは常にプロジェクト単位で生成されます — キットも実行履歴も、そのプロジェクトに属します。

2. デザインを含むファイルを開く

デザインは開いているファイルから読み取られます。Wireframe kit スタイルを使う場合は、キットのコンポーネントも同じファイルから参照できる必要があります。ワイヤーフレームは、キット登録時のマスターをインスタンス化して構築されるためです。

3. 何を選択するかを把握する

選択するもの	用途
デザインフレーム	変換する画面。フレーム、コンポーネント、インスタンス、セクション、グループを受け付けます
キットのコンポーネントボード	ワイヤーフレームキットを作るために、登録時に一度だけ読み取ります。Wireframe kit スタイルの場合のみ必要です

初回セットアップ

セットアップが必要なのは Wireframe kit スタイルだけです。De-styled はキット不要で、こちらが既定のため、タブを開いてすぐにワイヤーフレームを生成できます。

ワイヤーフレームキットを登録する

Design → WF タブを開き、Wireframe kit を展開します。キャンバスでキットのコンポーネントボードを選択し、Register selected boards を押します。

進行は Resolve → Sweep → Register → Capture の 4 ステップで表示されます。選択したボード上のコンポーネントセットをすべて読み取り、バリアント、テキストスロット、サイズを記録します。キーにはノード ID ではなく各セットの publish key を使うため、同じキットを別のボードに複製しても、2 件ではなく 1 件のコンポーネントとして登録されます。

Note

4 番目の Capture では、各バリアント自身の内容を記録するために、選択したボードの全ノードを走査します。大きなキットでは数分かかるのが正常です（処理中は件数が表示されます）。

確認方法: スタイル選択の上に N components · N usable · N with variants と表示されます。 usable は実際に配置できる件数です。コンポーネントセット自体はインスタンス化できないため、ワイヤーフレームが選ぶ単位は常に、そのバリアントの 1 つです。

Wireframe style とレイアウト

Design → WF タブで Wireframe style を選びます。

スタイル	描かれるもの
De-styled（`primitives`、既定）	中立化した面と原文のテキストに、文脈に応じたグラフィック処理を適用。キット登録は不要
Wireframe kit（`kit`）	同じグラフィック方針に加え、採用された登録済みキットバリアントを使用。安全に表現できない要素はプリミティブのまま

どちらもグラフィック分類に画像モデルを使う場合があります。再実行で同じ分類結果になる保証はありません。

現在のプラグインは auto layout を自動で要求し、レイアウト選択 UI はありません。子が 1 つのラッパーや絶対配置オーバーレイを含め、元の所有階層・間隔・padding・alignment・sizing を保持します。 API は引き続き absolute をサポートし、省略時の既定値も absolute ですが、これは現在のプラグインが送る生成設定とは異なります。

どのグラフィックを残すか

グラフィック	想定される扱い
矢印、ナビゲーション／操作、状態表示、SNS／識別用の記号	元の形と元インスタンスの override を保持
不確かな図形、または利用できる元画像の根拠がない図形	保持
不要なコンテンツ画像、または既存ラベルの横にある重複した絵	高信頼かつ情報を持たないという分類を通過した場合だけプレースホルダー化
ボタンの飾りやフッター背景など、装飾と確認された要素	装飾の描画を抑止。必要なら透明なレイアウト領域は保持

単独のハンバーガー／メニュー操作は意味を持つため残します。所属コントロールに対応するラベルが既にある場合、重複するメニューのイラストは簡略化できます。「メニューアイコンはすべて置換」という規則はなく、名前やベクター／ビットマップという形式だけでも決めません。

元画像の欠落、モデル障害、タイムアウトでは、保守的に元の図形を残します。保持した識別用グラフィックには元の色が残る場合があります。運用者向けのスコープ付き override は技術ガイドを参照してください。プラグインにアイコンルール編集 UI はありません。

ワイヤーフレームを生成する

Design → WF タブを開きます。

変換したいデザインフレームを 1 つだけ選択します。選択が受け付けられるとフレーム名、ID、サイズが表示され、受け付けられない場合は理由が表示されます — 複数選択と、フレーム系以外のノードはどちらも拒否されます。
Wireframe style を選びます。auto layout は自動で適用されます。
Make wireframe を押します。

進行は Trigger → Parse → Assemble → Build の 4 ステップです。parse と assemble はサーバー側、 build は開いているファイル内で実行されます。Stop watching (run continues) はいつでも押せます — 実行はサーバー側で継続します。

完了すると score / flags / Total が表示されます。

結果の読み方

出力は des2wf · {デザインフレーム名} という名前のフレーム 1 つで、現在のページに配置され、選択された状態になります。この名前をキーにしている処理はないため、自由にリネームできます。

表示	意味
score	ゲート付きの文言保持率です。1.00 でも、アイコン・整列・背景の視覚的な正しさを保証しません
score が 0.00	ゲートに失敗しています。ワイヤーフレームとして許されない事象が起きた場合です — まったく表現できなかった要素、文字列の捏造や位置ずれ、テキスト上に描かれたクロス、二重に描かれた境界線、または Fixed positions でのフラットを超える入れ子
flags	確認が必要な要素数（flagged と unmatched の合計）です。エラーではなく、変換側が判断を下した箇所を示します
改行の違い	フォントと利用可能な幅を確認してください。元の組版を可能な限り保ちますが、フォント代替や必要な再フローで改行が変わるため、無条件に正常とは判断しません
破線のオレンジ枠	デザインで中身が空だったテキストレイヤー（何も入っていないコンテンツスロット）です。空文字として出力すると内容が保たれたように見えてしまうため、あえて可視化しています
対角線のクロスが入ったボックス	簡略化が許可された図形です。すべての写真・ロゴ・アイコンではありません。小さいプレースホルダーは塗りのスロットになる場合があり、区切り線にはクロスを付けません
キットのコンポーネントを期待した箇所が単純なボックス	それらの要素に合致するものがキットになかったか、キットが未登録です。デスタイル層が代わりに使われ、実行自体は完了します

構築後、プラグインは元デザインと生成したワイヤーフレームの PNG ペアを別のレンダーレビューへ送れます。生成開始時の元フレームとプロジェクトに紐づくため、完了後に選択されたノードを元デザインとは扱いません。レビューの失敗で完了済みワイヤーフレームが取り消されることはありません。skipped は問題なしという意味ではありません。

ワイヤーフレームは単一の undo ステップとして構築されます（undo 1 回で丸ごと取り消せます）。同じデザインを再生成すると、横に増えるのではなく前回の出力を置き換えます。

うまくいかないとき

「select a design frame」/「select exactly one frame」
Des2WF は 1 回の実行につき 1 画面を変換します。複数ではなく、単一のノードを選択してください。

「selected node is not a frame」
フレーム、コンポーネント、インスタンス、セクション、グループを受け付けます。それ以外は拒否され、受け取ったノード種別が表示されます。

「Attached to a run already in progress…」
同じデザインに対する実行がまだ開いています。プラグインは 2 件目を開始せずその実行に接続するため、完了を待ってください。

Wireframe kit スタイルなのに単純なボックスになる
スタイル選択の上の行を確認してください。no kit registered は、このプロジェクトにキットがまだない状態です — 登録するか、De-styled を使ってください。キットが登録済みでも単純なままの場合は、その要素に合致するものがキットになかったということです。

「session expired — please sign in again」
Account タブで再度サインインしてから、生成し直してください。

更新後もプラグインの表示が古いまま
プラグインを一度閉じて開き直してください。UI はバンドルされているため、再読み込みで最新ビルドが反映されます。

このツールがしないこと

出力を正しく読むために、明示しておきます。

画面をデザインし直しません。位置・順序・文言はデザインに由来します — デザインが誤っていれば、ワイヤーフレームもそのとおり誤って再現されます。
文言を書きません。テキストは原文のまま持ち込まれ、デザインで空だったテキストレイヤーは、もっともらしい文言で埋められることなく空白のまま可視化されます。
再実行時にモデルの判断が一致することや、必要なフォントがすべて利用できることは保証しません。
デザインレビューの代わりにはなりません。score と flags は「確認すべき箇所」を示すものであり、「正しさ」を保証するものではありません。