これは便利すぎる！ Webページをコピペで、編集可能なFigma用に変換できる拡張機能「Copy to Figma」しかも完全無料

Chromeに表示したWebページや特定のセクションをコピペで、Figmaの編集可能なレイヤーに変換できる拡張機能を紹介します。

以前紹介したhtml.to.designと似ていますが、html.to.designはサブスクで無料版はかなりの制限があります。この記事で紹介するCopy to Figmaは完全に無料で、すべての機能を利用できます！

Copy to Figma -Chrome ウェブストア

• コピペでWebページをFigmaに変換
• Copy to Figmaの利用方法
• Copy to Figmaの使い方

コピペでWebページをFigmaに変換

Copy to FigmaはChromeの拡張機能で、Chromeに表示したWebページ（オンライン・オフライン）をコピーして、Figmaの編集可能なレイヤーに変換してペーストできます。

作者様によると、単にWebページやセクションをFigmaに取り込みたいだけなのに、有料ツールを使うと制限に引っかかってしまうことにイライラしていたので、無料でシンプルな拡張機能を作ったとのことです。

• 任意のWebページまたは特定のセクションをコピーします。
• Figmaに直接ペーストし、編集可能なレイヤー・フレームとして利用できます。
• Figmaの他のプラグインは不要です。
• 登録は不要です。
• すべてブラウザ内で完結します。

利用にあたって完全に無料で、制限も一切ありません。

Copy to Figmaは、先日リリースされたばかりで、さっそく試してみました。まずは、AppleをFigmaに変換。

作業はブラウザからコピペするだけなので、非常に簡単です。すべてが編集可能なレイヤーになっています。

https://www.apple.com/jp/をFigmaに変換

当ブログもFigmaに変換してみました。
日本語の文字化けもなく、問題無く変換されています。

https://coliss.com/をFigmaに変換

Copy to Figmaの利用方法

Copy to Figmaを利用するには、下記ページから。
先日リリースされたばかりですが、すでに500超えのユーザーがいますね。

Copy to Figma -Chrome ウェブストア

Chromeの通常の拡張機能と同様に、「Chromeに追加」をクリックするだけです。ブラウザ内で完結するため、Figmaにプラグインをインストールするとかは必要はありません。

Copy to Figmaの使い方

Copy to Figmaの使い方は、驚くほど簡単です。
ChromeでWebページを表示し、Copy to Figmaのボタンをクリックし「Copy to clipboard」をクリックします。

「クリップボードにコピー」が表示され、「画面全体」「要素を選択」のどちらかをクリックします。要素を選択した際は、コピーする要素を選択できます。

Apple（日本）をChromeで表示

Figmaを開き、ペーストするだけで完了です。

右クリックして「ここに貼り付け」

「画面全体」を選択したので、Webページの全体がFigmaにペーストされました。

https://www.apple.com/jp/をFigmaに変換

Figmaに変換されたWebページは、編集可能なレイヤーとなっており、オートレイアウトにも対応しています。

編集可能なレイヤー

Copy to FigmaはオンラインのWebページだけでなく、ローカルにあるHTMLも変換できます。HTMLファイルを右クリックしてChromeで開くだけです。

うまくいかない場合は、ローカルサーバーでローカルのHTMLファイルを表示します。Live Serverを使うと、便利です。

https://coliss.com/をFigmaに変換

複数のビューポートサイズでFigmaファイルを生成することもできます。たとえば、デスクトップとスマホにすると、下記のようになります。

https://coliss.com/をFigmaに変換