01 / Chrome
見たままをキャプチャ
修正したいページを開き、ChromeのツールバーでSnaptureをクリックしてキャプチャ範囲を選びます。
Webページを、
編集できるFigmaに。
ログイン後の画面も取り込み、Figmaでテキストやレイアウトを編集できます。
毎月10回まで無料。毎月リセットされます。
機能
今ある画面を、次の修正案の土台に
02 / HTML + CSS
HTMLとCSSからも
コードをプレビューし、幅を調整してキャプチャできます。
03 / Figma
Auto Layout
元の配置を保てる部分にはAuto Layoutを適用し、そのまま編集を続けられます。
コンポーネント & スタイル
構造が一致する繰り返し要素はコンポーネント化できます。対応するテキスト、色、CSSの色変数はローカルスタイルや変数になります。
04 / Viewport
画面幅に合わせて
各画面幅で実際に表示されたレイアウトをキャプチャ。
チャート、地図、3D
グラフ、地図、3Dコンテンツは画像として取り込まれる場合があります。その部分をグラフデータや3Dモデルとして編集することはできません。
一括キャプチャ
URLを貼るか、サイトマップから読み込むと、1回で最大30ページを順に開いて取り込みます。
使い方
- 01
見たままをキャプチャ
修正したいページを開き、ChromeのツールバーでSnaptureをクリックしてキャプチャ範囲を選びます。
- 02
Figma用にコピー
キャプチャ後にFigma用にコピーします。ファイルとして保存し、プラグインにドロップすることもできます。
- 03
Figmaで編集
FigmaファイルでSnapture Importを開き、Cmd/Ctrl+Vで貼り付けます。テキストレイヤーを選んで編集を始めてください。
料金
すでにあるものを、描き直さない。
まずChrome拡張機能を追加します。キャプチャ後、FigmaでSnapture Importを開いて貼り付けてください。