Figmaでワイヤーフレームを作るとき、毎回一からパーツを置いていくのが正直しんどかった。特に既存サイトをベースにレイアウトを検討したいとき、「このページの構成をそのままFigmaに持ってきたい」と何度も思っていた。
そこで、実際のWebページをキャプチャしてFigmaにワイヤーフレームとして展開できるツールを自作した。Chrome拡張とFigmaプラグインをセットで使う構成で、ある程度使えるレベルになったので今回公開することにした。
どんなツールか
2つのセットで動く。
- Chrome拡張「WireSnap Capture」：開いているWebページのDOM構造・スタイルをキャプチャしてクリップボードにJSON形式でコピーする
- Figmaプラグイン「WireSnap」：コピーしたJSONをFigmaに貼り付けると、ページ構成をワイヤーフレームとして再現する
出力はグレースケールのワイヤーフレーム。テキスト・ボタン・画像エリア・コンテナの構造がFigmaのフレームとして展開されるので、そのまま構成を確認したり、改修案のベースとして使える。
仕組みの概要
Chrome拡張（WireSnap Capture）がやること：
- 指定幅でブラウザをリサイズ（375px / 1280px / 2000px などを選択可）
- ページを上から下まで自動スクロールしてlazyロードを発火
- 各DOM要素の位置・サイズ・背景色・テキスト・枠線などを
getBoundingClientRect()で取得 - 取得したツリー構造をJSON化してクリップボードにコピー
Figmaプラグイン（WireSnap）がやること：
- 貼り付けられたJSONを読み込み、DOMツリー構造をそのままFigmaのフレーム階層に変換
- 背景色・枠線・テキストをグレースケールで再現
- 画像はダークグレーの矩形に置き換え
- ラベルモード（「テキスト」「見出し」等）とActualモード（実テキスト）を切り替え可能
使い方
① WireSnap Captureのインストール（Chrome拡張）
- 下記からzipをダウンロードして解凍する
- Chromeのアドレスバーに
chrome://extensions/と入力して開く - 右上の「デベロッパーモード」をONにする
- 「パッケージ化されていない拡張機能を読み込む」をクリックして解凍したフォルダを選択
⬇ WireSnap Captureをダウンロード（wiresnap-capture-v0.7.0.zip）
② WireSnapのインストール（Figmaプラグイン）
- 下記からzipをダウンロードして解凍する
- Figmaを開き、メニュー → Plugins → Development → 「Import plugin from manifest…」
- 解凍したフォルダ内の
manifest.jsonを選択
⬇ WireSnapをダウンロード（wiresnap-plugin-v0.6.0.zip）
③ キャプチャ → Figmaに貼り付け
- キャプチャしたいページをChromeで開く
- WireSnap Captureアイコンをクリックし、幅を選んで「キャプチャ」ボタンを押す
- FigmaでWireSnapを起動し、テキストエリアに Cmd+V でペースト
- 「生成」ボタンを押すとワイヤーフレームが展開される
現状の制限と今後について
世の中には本当に多様なHTML/CSSの書き方があって、全サイトに完璧に対応するのはかなり難しい。現時点でも、複雑なアニメーション・CSSグリッドの入れ子・Webフォント依存のレイアウトなどでは崩れることがある。
また、375pxなどモバイル幅でのキャプチャはChromeのウィンドウ最小幅の制限があり、CSSで強制的にレイアウトさせる方式で対応しているが、メディアクエリが正確に効かないケースもある。
とはいえ、構成確認・叩き台作りの用途では十分使えるレベルにはなっている。引き続きいろいろなサイトで試しながら精度を上げていくつもりなので、気になった点や要望があればコメントで教えてもらえると嬉しい。
もともと学習目的で作り始めたツールだが、気づいたら自分の業務でも使うようになっていた。ワイヤーフレーム作りがちょっとラクになった人が増えれば嬉しい。