Figma、Webサイトを直接編集可能なレイヤーに変換するChrome拡張を公開

Web サイトのデザインを参考にしたいとき、画面をスクリーンショットし、Figma に貼り付けてガイドを引き、手作業で文字や余白を再現していく作業に時間を取られた経験は誰にでもあるはずです。

Figma はそうした単調な再構築作業を終わらせる公式の Chrome 拡張機能を公開しました。ブラウザで実際に動作している Web ページを取り込み、編集可能なデザインレイヤーとして直接 Figma に変換できるツールです。

スクショからの描き直しを不要にする

これまで既存の Web サイトをデザインファイルに取り込むには、画像をトレースするか、精度のばらつきが大きいサードパーティ製プラグインに頼るしかありませんでした。そうしたツールでは、テキストがバラバラのパスになってしまったり、階層構造が崩れたりすることも珍しくありませんでした。

今回の Figma 公式拡張機能は、ブラウザとデザインキャンバスを直接つなぎます。拡張機能をインストールし、Figma アカウントでログインするだけで利用を開始できます。

単なるフラットな画像キャプチャではなく、Web ページの構造を解析して Figma のネイティブなレイヤーに変換します。テキストやボタン、レイアウトの枠組みをそのまま保持した状態で取り込めるため、手作業でゼロから作り直す必要がなくなります。

競合サイトの分析やリニューアルの検討、あるいは実在する UI をベースにしたプロトタイプ作成など、外部の Web 資産をすぐさま自分の作業環境へ持ち込めるようになります。

ベータ提供で有料プランが対象

ただし、今すぐ誰でも自由に使えるわけではありません。

Figma によると、この拡張機能は現在ベータ版として提供されており、有料プランのユーザーのみがアクセスできるようになっています。無料プランのユーザーが利用できるようになる時期はまだ明らかにされていません。

また、現代の複雑な Web ページ、たとえば高度なレスポンシブ設定や動的な CSS アニメーションをどこまで破綻なく Figma のレイヤー構造に落とし込めるかは、今後の実務での検証が必要です。

なぜ重要か

日常的に UI デザインを手がける現場にとって、既存画面のトレース作業ほど付加価値の低い時間はありませんでした。わずか数クリックで編集可能なレイヤーとして取り込めるなら、工数の大幅な削減につながります。有償プランを契約しているチームにとっては、試す価値が十分にある機能だと考えられます。

業界的な視点で見れば、Figma の囲い込み戦略の巧みさが際立ちます。これまで「HTML を Figma に変換する」単機能の外部ツールや拡張機能が数多く存在していましたが、公式が標準機能として提供することで、それらを一掃する構図になります。

これまでのデザインツールは「Figma からコードを出力する」方向に注力してきましたが、今回は「Web の実画面を Figma に逆輸入する」アプローチです。Web とデザインの境界線をさらに曖昧にする、非常にスマートな一手と言えます。