Webサイトをキャプチャしてfigmaに取り込む方法

Chromeウェブストアにアクセスし、「Chromeに追加」をクリックしてください。PixelSyncは軽量な拡張機能で、キャプチャを開始した時のみページを読み取ります。

1. キャプチャしたいWebページに移動します。
2. ツールバーのPixelSyncアイコンをクリックします。
3. 「フルページキャプチャ」をクリックします。PixelSyncがライブDOMを読み取り、Figma互換レイヤーに変換します。
4. 結果は自動的にクリップボードにコピーされます。

ページ全体は必要ない？「要素選択」モードを使用：

1. PixelSyncアイコンをクリックします。
2. 「要素選択」をクリックします。ページ上でホバーすると青いオーバーレイが表示されます。
3. 必要な要素をクリックします。その部分だけがキャプチャされクリップボードにコピーされます。

Figmaを開き、⌘Vを押します（WindowsではCtrl+V）。編集可能なレイヤーが表示されます。

Figmaプラグイン不要。PixelSyncはFigmaのネイティブ形式でクリップボードに直接書き込みます。

キャプチャ前にポップアップで「スマートクリーンアップ」をオンにしてください。不可視要素、空のラッパーdiv、レイアウトノイズを自動的に除去します。

PixelSyncはブラウザで見えるものすべてをキャプチャします — 認証が必要なページも含みます。

すべての処理がブラウザ内で行われるため、ログイン情報やセッションデータがデバイスから離れることはありません。

PixelSyncは現在表示中のビューポートをキャプチャします。モバイルやタブレットレイアウトをキャプチャするには：

1. Chrome DevTools（F12）を開いてデバイスモードを切り替えるか、ブラウザウィンドウのサイズを変更します。
2. 必要なビューポート幅を設定します（例：iPhone用375px）。
3. CSSメディアクエリを有効にするためにページをリロードします。
4. 通常通りPixelSyncでキャプチャします。

PixelSyncは現在のprefers-color-schemeをそのままキャプチャします。両方のテーマをキャプチャするには：

1. 現在のテーマでページをキャプチャします。
2. OSの外観を切り替えます（macOS：システム環境設定 → 外観、Windows：設定 → 個人用設定 → 色）。
3. ページをリロードして再度キャプチャします。

• •まずページをスクロールして遅延読み込みコンテンツを読み込みます。
• •複雑なページには「要素選択」を使用 — 小さいキャプチャはより速くクリーンです。
• •スマートクリーンアップを有効にしてFigmaレイヤーを整理します。
• •カスタムWebフォントはFigmaでfont-family名として表示されます。完全な忠実度のためにローカルにインストールしてください。
• •複雑なCSS機能は変換中に簡略化される場合があります。
• •クロスオリジン画像は空のボックスとして表示される場合があります。
• •出力は編集可能な出発点であり、ピクセルパーフェクトな複製ではありません。
• •PixelSyncは表示されているものをキャプチャします — 自動スクロールや遅延コンテンツの自動トリガーは行いません。