これまで、WebサイトのデザインをFigmaに取り込むにはサードパーティ製のプラグインが必要でした。

しかし、Figma公式のChrome拡張機能のアップデートにより、ブラウザで表示中のHTMLをそのまま編集可能なベクターデータとしてFigmaにインポートできるようになりました。

デザインの参考資料集めや、既存サイトのリニューアル、開発中の画面のレビューがこれまで以上にスムーズになりそうです。

何ができるのか

この拡張機能を使うと、ブラウザで見ているWebページのレイアウト、テキスト、画像、ボタンなどの要素をそのまま、Figmaの「レイヤー」としてコピーできます。

画像としてキャプチャするのではなく、フォントサイズやカラーコード、余白（マージン）が保持された「編集可能なオブジェクト」としてFigmaに配置されます。

以下の画像は、実際にオウンドメディアのFigma Make解説記事をFigmaに取り込んでみた様子です。
しっかりと要素がレイヤーで分かれた状態でインポートできました。

使い方

​
使い方はシンプルな3ステップです。
​

Step 1: 拡張機能のインストールとログイン

​
1. Chromeウェブストアから拡張機能 「Figma」をインストールします。
2. 拡張機能のアイコンをクリックし、自分のFigmaアカウントにログインして連携を許可します。
​

Step 2: 取り込みたいページで拡張機能を実行

​
1. デザインを取り込みたいWebページを開きます。
2. ブラウザ右上にあるFigmaの拡張機能アイコンをクリックし、ツールバーを開きます。
3. 「Select element」または「Capture page」を選択します。これでページのデータがクリップボードに保存されます。ボタンの名称通り、要素単位あるいはページ全体をキャプチャできます。
​

Step 3: Figma にペースト

​
1. Figma のデザインファイルを開きます。
2. Ctrl + V（Mac は Cmd + V）でペーストします。
3. キャプチャしたデザインがFigma上にペーストされます。

この機能を使うメリット

公式Chrome拡張機能を使うメリットは以下の4つです。

1. AIクレジットを消費しない（現時点）

昨今のAIデザイン生成ツールや高度な変換ツールとは異なり、現時点ではAIクレジットの消費や追加料金なしで何回でも利用できます。
コストを気にせず、日常的にどんどん使えます。

2. MCPやSkillsが不要で直感的

MCPやSkillsの設定やプロンプトはいっさい必要ありません。
ひとまずデザインファイルとして書き起こしたいだけであれば、「拡張機能を押して、Figmaに貼るだけ」の直感的な操作で実現できます。

3. 認証が必要なページ（マイページなど）もキャプチャ可能

URLを入力して読み込むタイプの外部プラグインでは、ログイン壁に阻まれて「会員限定ページ」や「ダッシュボード画面」を取り込めないという弱点がありました。
この拡張機能は、「いまブラウザに表示されている画面」のHTMLを直接コピーするため、ログイン後のページでも問題なくデザイン化できます。

4. ローカルホストで立ち上げたページも対応

ローカル環境のような、一般には非公開のWebページもキャプチャできます。
これにより開発中のCode to Designが容易になります。

まとめ

Figma公式のChrome拡張機能によるHTMLインポートは、デザインのリサーチから開発中まで、チーム全員の生産性を高めてくれそうです。

導入も簡単なので、ぜひChromeウェブストアからインストールして実際に使ってみてください。

参考文献