WebページをそのままFigmaに取り込める！
無料のChrome拡張「Copy to Figma」が便利すぎる
目次
デザインの参考サイトや既存のWebページをFigmaで触れたら便利なのに、と思ったことはないでしょうか。「html.to.design」のように既存のサービスもありますが、無料版は機能制限があって、使いたい場面でつまずいてしまうことも多いと思います。そこで今回紹介したいのが、完全無料で使える Chrome拡張「Copy to Figma」です。
コピペの操作だけで、表示中のWebページを編集可能なFigmaのレイヤーに変換できます。使ってみたら予想以上にシンプルで実用的だったので、使い方とあわせてご紹介します。
「Copy to Figma」とは
Copy to Figmaは、ChromeブラウザーでWebページを表示した状態でコピーするだけで、Figmaに編集可能なレイヤーとして貼り付けられるChrome拡張機能です。
作者によると、「有料ツールの制限に毎回イライラしていたので、シンプルに使えるものを自分で作った」とのこと。その言葉の通り、余計な機能を省いたシンプルさが特徴です。
主な特徴はこちらです。
- 完全無料で使えて、機能制限なし
- ページ全体または特定の要素を選んでコピーできる
- FigmaのプラグインやアカウントのChromeへの紐づけは不要
- アカウント登録も不要
- オートレイアウトにも対応した編集可能なレイヤーとして取り込まれる
- オフラインのローカルHTMLファイルにも対応
「ちょっとこのサイトのレイアウトをFigmaで確認したい」という場面に、すっとはまる使い勝手です。
導入方法
Chromeウェブストアから「Copy to Figma」を検索するか、下記のリンクから追加できます。
Copy to Figma – Chrome ウェブストア https://chromewebstore.google.com/detail/copy-to-figma/nlhohiiemplbalhbkgfoenonfggmnflg
通常のChrome拡張と同じく「Chromeに追加」をクリックするだけです。Figma側へのプラグインインストールなどは一切不要です。リリースされたばかりにもかかわらず、すでに8000人超えのユーザーがいます。
使い方：操作はたったの3ステップ
① ChromeでWebページを開き、拡張機能をクリック
取り込みたいページをChromeで開き、ツールバーのCopy to Figmaアイコンをクリックします。「Copy to clipboard」をクリックすると、「画面全体」か「要素を選択」のどちらかを選べます。
チェックポイント：「要素を選択」を使うと、ヘッダーだけ・特定のセクションだけ、といった部分取り込みができます。参考にしたい箇所だけ切り取りたいときに便利です。
② Figmaを開いてペースト
Figmaのキャンバスを開き、右クリックして「ここに貼り付け」するだけです。「画面全体」を選択した場合は、Webページの全体がそのまま貼り付けられます。
③ 編集可能なレイヤーとして利用する
取り込まれた内容は、すべて編集可能なレイヤーになっています。オートレイアウトにも対応しているため、テキストやカラーの確認・変更もスムーズにできます。
ローカルHTMLにも対応
Copy to Figmaはオンラインのページだけでなく、ローカルのHTMLファイルにも対応しています。HTMLファイルを右クリックしてChromeで開くだけで、同じ手順で取り込めます。
うまく取り込めない場合は、VS Codeの「Live Server」などでローカルサーバーを立ててから試してみてください。
複数のビューポートサイズで同時に取り込める
デスクトップとスマートフォンなど、複数のビューポートサイズでFigmaファイルを生成することもできます。レスポンシブデザインの確認や、既存サイトの構造を複数サイズで把握したいときにも重宝します。
まとめ：参考サイトの構造確認からリデザインまで幅広く使える
今回ご紹介したCopy to Figmaは、以下のような場面で活躍します。
- 競合サイトや参考サイトの構造をFigmaで確認したいとき
- 既存サイトをベースにリデザイン案を作りたいとき
- ローカルで作っているHTMLをすぐにFigmaに取り込みたいとき
- クライアントへのデザイン提案の下敷きを素早く用意したいとき
アカウント登録もFigmaプラグインも不要で、Chromeに追加するだけで使えます。完全無料で制限もないので、まずは試してみてください。
