Figma公式のChrome拡張機能が登場 - 名古屋で集客・採用ホームページ制作なら花のや【実績700社以上】

こんにちは、花岡です。好きなAIはシャロン・アップルです。

2026年6月11日、Figmaが公式のChrome拡張機能をリリースしました。ブラウザに表示しているWebページを、そのまま編集可能なレイヤーとしてFigmaに取り込める機能です。

これが、AIで生成したWebサイトを仕上げる工程と、とても相性がいいです。Claude CodeなどでAI生成したサイトを、コードを触らずにFigmaでデザイン調整できるようになります。

Q. WebサイトをFigmaで編集するにはどうすればいいか？
A. Figma公式のChrome拡張機能を使うと、ブラウザに表示されているWebページをコピーして、Figmaの編集可能なレイヤーとして貼り付けられます。ブラウザでWebサイトを開き、拡張機能でコピー、Figmaにペーストするだけで、コードを触らずにデザイン調整ができます。

Figma公式Chrome拡張機能とは

2026年6月11日にFigmaが公式リリースしたChrome拡張機能は、ブラウザに表示しているWebページを、構造を持ったレイヤーとしてFigmaのキャンバスに取り込めるものです。ページ全体でも、選択した要素だけでも取り込めます。

使い方はシンプルです。

• Chrome拡張機能をインストールし、Figmaアカウントでサインイン
• 取り込みたいWebページをブラウザで開く
• 拡張機能のボタンを押してコピー
• Figmaにペースト → 編集可能なレイヤーとして展開

実際の取り込み画面がこちら ▼

実際のFigma画面がこちら ▼

これまでもhtml.to.designのようなサードパーティ製ツールで似たことはできましたが、Figma公式が機能として提供してきた点が大きいです。
なお現時点ではベータ版で、有料プランのみ対応しています。

ダウンロードはこちらです：Figma（Chrome ウェブストア）

デザイナーの時短ツールとなるか？

Claude CodeやCursorでWebサイトを生成すると、一発で公開可能な状態で作れます。セクションの構成、テキストの配置、基本的なレイアウトなどなど。

ただ、「作れる」ことと「ビジネスで使える品質」の間には、まだ明確なギャップがあります。デザインのクオリティでは今ひとつですし、UXを無視したレイアウトや、ライティングも微妙です。

これらをコードで直すのは手間がかかりますし、デザイナーの中にはコーディングが苦手な人もいるはずです。
しかし、この拡張機能を使うことで、AI一発出しのWebサイトでもデザイナーがFigma上で編集できるようになります。これにより圧倒的に制作スピードを上げることが可能になります。

• フォントの種類・サイズ・行間の調整
• 余白のバランス（特にモバイル表示）
• 配色のブランド整合性
• 画像・アイコンの差し替え
• CTAボタンの位置・デザイン

「AI生成 → Figmaで仕上げ」というワークフロー

Claude CodeでHTMLを生成する

まずClaude Codeに「このサービスのLPをHTMLで作って」と指示します。セクション構成・コピー・基本デザインの初稿が出てきます。

拡張機能でFigmaに取り込む

生成されたHTMLをブラウザで開き、拡張機能でコピーしてFigmaにペーストします。テキスト・画像・ボックスがそれぞれ編集可能なレイヤーとして展開されます。

Figmaでデザインを仕上げる

フォント・余白・配色・画像を調整します。クライアントのブランドガイドラインに合わせて整えます。コードを触らずにGUIで完結します。

仕上がったデザインをコードに戻す

Figmaで調整したデザインをもとに、Claude CodeやCursorで再度コーディングします。「このFigmaのデザインに合わせてCSSを修正して」と指示するだけです。

AIで初稿を出す速さと、Figmaで仕上げる精度を組み合わせることで、制作のスピードと品質を両立できます。

花のやでの使い方

花のやでは、AI生成のコードをそのまま納品することはありません。AIを組みこんだワークフローを活用してデザインの品質を担保しています。
「AIで速く作る」と「Figmaで丁寧に仕上げる」を組み合わせることで、制作コストを抑えながらクライアントが求める品質に近づけています。