このChrome拡張、かなり便利で助かりますね。

最近だとAIが生成してくれるプロトタイプに対して修正指示出したい時など、言葉で表現しづらいところは画面をキャプチャして加工したりしていたのですが、これを使えばパーツをその場で組み直しできるので、変更方針などが共有しやすくなりました。

https://coliss.com/articles/build-websites/operation/work/copy-to-figma-chrome-extension.html

スレッド

というポストをした直後に、なんと公式からも同様のChrome拡張がリリースされました。

公式拡張はページ全体だけでなく、要素単位でもキャプチャ可能。もちろん、Figma上で編集できるレイヤーとして取り込めます。

ただ、いくつか試したところ、公式拡張では別ドメインから配信されている画像が取得されないケースがありました。

たとえばUNIQLOの場合、ページ本体は http://uniqlo.com、画像は http://im.uniqlo.com から配信されています。ブラウザ上では別オリジン扱いになるため、公式拡張はこの制約を守り、画像部分が抜けた状態でキャプチャされました。

一方、Copy to Figmaは「全サイトへのアクセス権」を前提に、画像を直接取得しているようです。

つまり優劣というより設計思想の差で、

・公式拡張 = 最小権限で安全寄り。その分、別オリジン画像は取りこぼすことがある
・Copy to Figma = 広いアクセス権を前提に、より多くの要素を持ってこられる

というトレードオフでした。

まずは公式拡張を使いつつ、画像が抜けるケースではCopy to Figmaを使う、という使い分けになりそうです。

https://chromewebstore.google.com/detail/figma/fkmaohpngenfoccdgceedjkfhkdcohmg?pli=1