Webコーダーの神ツール「Copy to Figma」

先日、久しぶりに便利で画期的で仕事効率が爆上がりするツールに出会いました。 WEBコーディングの便利情報をいつも発信してくれているコリスで紹介されていた、「Copy to Figma」というインターネットブラウザの拡張機能です。 公開されているWebサイトをそのままFigmaのワークスペースにコピーしてくれるというツールですが、これを使うと、Web制作業務は格段に効率化できることがわかったので、ウチのブログでも紹介しておきたいと思います。 ちなみに、このツール、どれだけつかっても「無料」なんですよ。スゴクネ？ 元リンク Coliss : これは便利すぎる！ Webページをコピペで、編集可能なFigma用に変換できる拡張機能「Copy to Figma」しかも完全無料

インストール

現時点（このブログを執筆している時）は、GoogleChromeの拡張機能でしか提供されていなかったので、Firefoxの人や、Operaの人などは、GoogleChromeをツールとして使ってくださいまし。 まず、次のサイトに言って、拡張機能をインストールしてください。 GoogleChromeの拡張機能ページ https://chromewebstore.google.com/detail/copy-to-figma/nlhohiiemplbalhbkgfoenonfggmnflg インストールしたら、アイコンが表示されます。 Figmaのアイコンのまんまなので、まるでFigmaのリンクみたいに見えてしまいますが、「Copy to Figma」のアイコンです。 （Edit用のギアアイコンを付与するなどしてほしかったですね） 次に、コピーしたいホームページに言って、インストールしたアイコンをクリック。 すると、次のようなダイアログが表示されます。 手前味噌ですが、ウチの会社のホームページは、かなりトリッキーなので、こちらで試してみました。 「Copy to Clipboard」ボタンをクリックすると、そのサイトのDOM構造がそのままクリップボードにコピーされます。 そのまま、FigmaのWebページに言って、ペーストするだけです。 FigmaのWebサイト https://www.figma.com/ （サインアップしていない人は、Googleアカウント連動などで登録しておきましょう） Create - Design で、新規プロジェクトを作って、そのまま、ペーストしてみます。（右クリックまたは、CMD + V） 見事にWebページがそのままFigmaにコピペされます。 おもしろいことに、内部の階層をそのままキレイに再現されているので、少し変更したり、修正したり、別ページとして作り直したりすることもできます。 ただし、表示のDOM再現なので、Javascriptなどの処理はコピーしないので、あくまで見た目のDOMコピーという事をご理解くださいませ。

便利ポイントを解説

このツールを使ってコピーされたデータで、一体何が効率化できるのか？と思う人もいると思うので、自分の考えたポイントを以下にまとめておきます。

気になる他社のWebページを魚拓

LPなど、いいデザインのWebサイトがあっても、半年後ぐらいにそのページをみてみたら、全然違うデザインに変更されていたり、アーカイブされてネットから削除されていたりするものです。 LPアーカイブなどのサイトをみても、広告だらけだったり、変なリンクも多く、見ずらいということもよくあります。 そんな時に、この機能を使って、自分でライブラリを作っておいて、お気に入りデザインや参考デザインをまとめておくことができるでしょう。

気になるパーツのCSSを参照できる

ブラウザのDevTool（デバッグコンソール）を使って、CSSなどを便利に閲覧することはできますが、 文字色や背景色、使っているアイコンなどなど・・・ これらを、じっくりと鑑賞する場合にFigmaは非常に有効です。 左カラムの、階層構造でリストの確認などができるので、エンジニアレベルの人じゃなくても、便利に使えることでしょう。

構造を簡単に変更できる

Figmaの使い方になれているのであれば、要素に対して変更を加えて、そのまま変更後のCSSを取り出すことはカンタンにできるようになります。 また、ページ内を大幅に変更しても、そのままHTMLにコンバートしやすい形になっているので、静的ページであれば、瞬時にHTML出力することができるでしょう。

あとがき

HTMLのコーディングが難しいと思っている人でも、Figmaを使って、変更・修正は手軽にできてしまうでしょう。 CSSが苦手な人であっても、ノーコード的に扱うことができるので、もはやこれは神ツール。 こういうツールを知っているのと知らないのとで、知識のひとつとして溜め込んでおく事をオススメします。 AIにコーディングやってもらうからいい・・・という人もいるかもしれませんが、それはそれ、これはこれ・・・という話。