Figma Chrome拡張（公式）とは
先日Figmaからリリースされた、WebページをFigmaデータ化できるChrome拡張です。
編集可能なレイヤーとして取り込めるため、vibe codingで作ったページや既存ページをFigma化 → Figma上で調整 → Claude Codeに戻す、といったデザインとコードの往復がよりスムーズにできるようになります。
取り込んだフレームは「Send to Figma Make」でMakeのプロトタイプ起点にもできます。
ClaudeのArtifactsをFigma化する
私はプロトタイピングに主にClaudeのArtifacts機能を使っています。
ただ、Claude上で直接この拡張を使ってもArtifacts部分はレイヤー化できませんでした。
そこで、ArtifactをHTML形式でダウンロードしてファイルを開き、キャプチャを試しましたが動きませんでした。
原因は、拡張機能設定の「Allow access to file URLs」（ファイルの URL へのアクセスを許可する）がデフォルトでOFFになっていたことでした。
これをONにすることで、localのHTMLファイルでもFigma Capture機能が使えるようになります。
これで、ClaudeのArtifacts機能で作成したプロトタイプをより簡単にFigmaデータ化できるようになりました。