Coming Soon — 近日公開予定

Chrome Extension × Figma Plugin

Webページを
Figmaに、一瞬で
取り込む。

Chrome拡張機能でページをキャプチャし、JSONをクリップボードにコピー。
Figmaプラグインに貼り付けるだけで、テキスト・レイアウト・色・画像をノードとして再現。

  • getBoundingClientRect() による精密な位置・サイズ取得
  • デザインモード / ワイヤーフレームモードの切り替え
  • フォント・背景・ボーダー・グラデーション・影に対応
  • JSONをクリップボードにコピー → Figmaプラグインに貼り付けて取り込む
Chrome拡張機能 — 近日公開 Figmaプラグイン — 近日公開
Chrome拡張機能でキャプチャ
対象ページでアイコンをクリックするだけ
↓
DOM解析 → DesignTree変換
テキスト・レイアウト・色情報を構造化JSON化
↓
Figmaプラグインに貼り付けて取り込む
Ctrl+V → 「取り込む」でフレームを生成
Design Mode Wireframe Mode
Features
主な機能
精密なレイアウト再現
getBoundingClientRect() でピクセル精度の位置・サイズを取得。フレックスボックスのオートレイアウトもFigmaノードに変換します。
クリップボード経由で簡単転送
キャプチャと同時にJSONをクリップボードにコピー。Figmaプラグインにペーストして「取り込む」を押すだけ。
豊富な視覚要素に対応
背景色・グラデーション・背景画像・ボーダー・影・SVG・インライン画像をすべて取り込み。フォントファミリーとウェイトも維持。
2つのレンダリングモード
デザインモードでフル再現、ワイヤーフレームモードで画像をカラープレースホルダーに置換。用途に合わせて即切り替え。
ベーシック認証ページも対応
認証が必要な社内システムのページも取り込み可能。画像取得が401エラーになった場合はプレースホルダーで代替します。
遅延読み込み画像に対応
loading="lazy" 属性の画像も、キャプチャ前に自動スクロールして事前読み込み。ファーストビュー外の画像も取りこぼしません。
How to Use
使い方
01
拡張機能をインストール
GitHubからソースを取得し、Chromeの拡張機能管理画面（chrome://extensions）でパッケージを読み込みます。
02
目的のページでキャプチャ
取り込みたいWebページを開き、ツールバーのHTMLtoFigmaアイコンをクリック。数秒でDOM解析が完了します。
03
Figmaプラグインで取り込む
FigmaプラグインパネルにCtrl+VでJSONを貼り付け、「取り込む」ボタンを押すとフレームが即座にキャンバスに展開されます。
Render Modes
レンダリングモード
Design Mode
デザインモード
ページのデザインをそのままFigmaに再現します。色・フォント・画像・ボーダー・影まで忠実に取り込み、デザインレビューやハンドオフの素材作成に最適です。
フル配色 実画像 グラデーション ボーダー・影
Wireframe Mode
ワイヤーフレームモード
画像・背景画像・SVGをカラープレースホルダー（薄黄色・薄青）に置換し、レイアウト構造に集中したワイヤーフレームを生成します。情報設計の確認やプレゼン資料に活用できます。
img → 薄黄色ボックス bg-image → 薄青ボックス
Updates
アップデート履歴

近日公開予定

Chrome拡張機能 + Figmaプラグインのセットを準備中。
公開時にいち早くお知らせします。

Coming Soon