どんなWebページも
編集可能なFigmaレイヤーに
編集できる本物のテキスト、色、Auto Layout、コンポーネント。スクリーンショットではありません。ログインが必要なページも取り込めて、処理はすべてPCの中で完結。どこにもアップロードされません。
両方必要です。拡張が画面を取り込み、Figmaプラグインが貼り付けます。どちらも無料で1分ほどです。
使い方
見たままをキャプチャ
Figma用にコピー
プラグインを入れて貼り付け
他のツールが届かないページのために
Snaptureはブラウザに表示されているページをそのまま読み取ります。見えているものは何でもキャプチャできます — ログイン後のダッシュボード、社内管理画面、開いたままのドロワーやポップオーバー、Webコンポーネントやiframeも含めて。
ログイン後のページ
キャプチャはログイン済みのタブの中で動くので、社内ツールや有料ダッシュボード、ステージング環境が画面どおりに変換されます。
ズレないAuto Layout PRO
フレックスやグリッドのレイアウトは本物のAuto Layoutに変換されます。ただし、Figmaのエンジンがすべての要素を0.5px以内で再現できる場合のみ。できない場合は正確な絶対座標のまま残します。どちらでもズレることはありません。
アイコンもそのまま
CSSマスクアイコン、SVGスプライト、アイコンフォント — 変換ツールが取りこぼしがちな3方式を、Snaptureはすべて再現します。
チャート、地図、3D
WebGLキャンバスや外部埋め込みは、どのツールでもレイヤーにはできません。Snaptureはグレーの箱の代わりに、その領域だけの鮮明なスクリーンショットをはめ込みます。同一オリジンのiframeはさらに一歩進んで、本物のレイヤーに変換します。
コンポーネント & スタイル PRO
繰り返しのカードはインスタンス付きコンポーネントになります。よく使う書体と色はローカルスタイルに、サイトがCSS変数で定義した色はFigmaの変数として入ってきます — 名前もサイトのまま、#2D7BFFではなくbrand-primaryで。
クリップボード連携
キャプチャして、貼り付けるだけ。ファイルは不要 — データはクリップボード経由でプラグインに渡り、サーバーを一切経由しません。
一括キャプチャ PRO
URLを貼るか、サイトマップから読み込むと、1回で最大30ページを順に開いて取り込みます。
PROの付いた機能は無料キャプチャ5回すべてに含まれます。カード登録も会員登録も不要です。Proは回数の上限をなくします。
ガイド
機能一覧からではなく、実際のキャプチャと実際の崩れから書いた記事です。
Webページを取り込んだあと Auto Layout がずれる理由
Flexbox と Figma の Auto Layout は似ていますが別のシステムです。どこで食い違うのか、それでも変換ツールが適用してしまう理由、そして自分のツールが確かめているかを見分ける方法。
WebページをFigmaに取り込むとアイコンが消える理由
Webのアイコンはインラインの SVG、スプライト、アイコンフォント、CSS マスクの四通りで描かれ、それぞれ違う壊れ方をします。自分がどれかを見分ける方法と、変換ツールがすべきこと。
ログインの先にあるページを Figma に取り込む
URL 方式の変換ツールがログイン画面を返すのは、サーバーが「あなたであること」を要求するページを見られないからです。実際に成立する方法と、すでに複数のツールが提供していること、そして代わりに問うべきこと。
何ひとつ、PCの外へ出ません。
FigmaプラグインのmanifestにはnetworkAccess: "none"と書かれています。Figmaがこれを強制するため、プラグインは望んでもネットワーク要求ができません。守るという約束ではなく、持っていない能力です。
キャプチャ中にDevToolsのネットワークタブを開いてみてください。その要求以外には何もありません。詳細はプライバシーポリシーにあります。
構造としてサーバーがありません
他のツールも設定を変えればキャプチャをローカルに保てます。Snaptureは設定を間違えようがありません。そもそも送る先のサーバーが存在しないからです。
| Snapture | サーバー経路を持つツール | |
|---|---|---|
| 非公開にしたいなら | 常にそうです | ローカル設定を選ぶ |
| 無料で使える範囲 | 全機能・キャプチャ5回 | 月間の上限 |
| ログイン後・操作中の画面 | 常に対応 | ツール次第 |
| アカウント | 不要 | 必要 |
| Pro価格 | 月$5 | 多くは割高 |
使うのは無料。元が取れるならPro。
全機能を5回まで無料で。Proはその上限をなくすだけです。
- Freeの全機能
- ズレないAuto Layout
- 繰り返しカードのコンポーネント化
- テキスト&カラースタイル — トークン名を維持
よくある質問に、率直に答えます
ページのデータは本当に安全ですか?
はい、仕組みの上で安全です。変換はブラウザのタブ内で実行され、結果はディスクかクリップボードにのみ渡ります。送る先のSnaptureサーバー自体が存在しません。Figmaプラグインはマニフェストでネットワークアクセス0を宣言していて、これはFigmaが強制し、誰でも確認できます。拡張機能が行う通信はごくわずかです — ファイルに埋め込むページ画像、Proを使う場合のライセンスキー確認、一括キャプチャを押したときのサイトマップ取得。いずれもページの内容は含まず、すべてプライバシーポリシーに記載しています。
html.to.designなどのツールと何が違いますか?
それらのツールも独自のブラウザ拡張でログイン後のページを取り込めますし、オプションを選べばファイルをローカルに保てます。違いは、Snaptureには選ぶオプションがないことです。サーバーがないので非公開の経路が唯一の経路で、FigmaプラグインはnetworkAccess: "none"で配布され、Figmaが代わりに強制します。ほかには、無料プランが機能を削った版ではなく完全版であること、Figmaのエンジンが0.5px以内で再現できるときだけAuto Layoutを適用することが違います。
無料では何が使えますか?
キャプチャ5回です。しかもその5回はすべて完全版 — ログイン後のページ、アイコン、グラデーション、チャートのスクリーンショット、Auto Layout、コンポーネント、スタイル抽出、クリップボードまで。何も削っていないので、自分のページでお金を払う価値があるか確かめられます。5回を使い切ると、Proが上限をなくします。
Figmaでフォントが違って見えます。
Figmaは、PCにインストールされているフォントしか使えません。Snaptureはフォント指定を正確に記録しているので、足りないフォント(PretendardやInterなど)を入れてFigmaを再起動すれば、表示は完全に一致します。それまでは、いちばん近いフォントで代替表示されます。
1つのライセンスを複数のPCで使えますか?
はい。1つのライセンスで、ご本人のデバイス3台まで有効化できます。買い替えなどで上限に達したときはご連絡ください。すぐにリセットします。
返金ポリシーは?
Snaptureがお使いのページで役に立たなかったら、購入から14日以内にご連絡ください。決済代行会社を通じて全額返金します。面倒な手続きは一切ありません。
すでにあるものを、描き直さない。
拡張機能を入れて、いま見ているページをキャプチャして、Figmaに貼り付ける。動くところを見るまで、1分とかかりません。