2026.10.01
Figmaのプラグインで制作を便利に
デザインカンプやワイヤーフレームをphotoshopで作成していたのは結構最近だったような気がするのですが Figmaを使用するようになり、とにかくプラグインが秀逸でAIが導入されてからというものMCPをはじめ、デザイン制作を効率化してくれる便利なプラグインやツールが数多く用意されています。 今回は、かなり王道ではありますが便利なプラグインをいくつか紹介します Webページを編集可能なデータとして取り込める「html.to.design」 豊富なアイコンをFigma内で検索できる「Iconify」 幻想的なグラデーションを作成できる「Mesh Gradient」 既存のWebページをFigmaに取り込める「html.to.design」 「別のサイトで作成したUIをカラーを変えたり文言変えて提案したい」「既存サイトのリニューアル案を作りたい」というときに便利なのが、html.to.designです。Webページを単なるスクリーンショットではなく、テキストや画像などが分かれた編集可能なレイヤーとしてFigmaへ取り込めます。既存サイトの構造を確認したり、取り込んだデザインをベースに改善案を作ったりするときに便利です。 「html.to.design」の使い方 1. URLを入力する Figmaでhtml.to.designを起動し、「Web」タブの入力欄へ取り込みたいWebページのURLを貼り付けます。必要に応じて、画面幅、ライト・ダークテーマ、言語なども設定できます。 html.to.designのURL入力画面。取り込みたいページのURLを入力し、「Import」をクリックします。 2. 「Import」をクリックする URLと表示条件を確認したら「Import」をクリックします。ログイン後のページ、ローカル環境、バナーを閉じた状態など、ブラウザに表示されている状態をそのまま取り込みたい場合は、ブラウザ拡張機能も利用できます。 3. インポートオプションを設定する Figmaプラグインを使用する場合は、取り込み前にオプションを設定できます。オートレイアウトの適用、スタイルや変数の作成、リンクの追加、HTMLレイヤー名の保持など、目的に合わせて必要な項目を選びます。 html.to.designのインポート設定画面。必要なオプションを選択して「Proceed」をクリックします。 Use Autolayout 可能な限り「オートレイアウト」を適用した状態で取り込みます。後からの修正が断然楽になるので基本はONで。 Create styles & variables サイト内で使われている色やフォントを、Figmaの「スタイル」や「変数」として自動登録してくれます。 Use existing local styles すでに作成済みのローカルスタイルがある場合、それを使って再現を試みます。 For hover effects (slower) ホバー時の挙動まで再現したい場合に使用します。 Add hyperlinks 元ページに設定されているリンク情報を保持します。 HTML layer names レイヤー名をHTMLのタグ名などに基づいた名前にします。ページ構造を確認しながら編集したいときに便利です。 4. Figmaへ取り込む 設定が完了したら「Proceed」をクリックします。変換が完了すると、WebページがFigmaのキャンバスへ配置されます。 html.to.designでWebページを取り込んだ画面。見出しや本文などがレイヤーに分かれています。 ページのデザイン自体はFigmaへ取り込めました。レイヤーパネルを見ると、見出しや本文が個別の要素として認識されていることが分かります。すご・・ フォントなんかも結構忠実に再現されていてすごさと同時に怖さもあります・・ 複雑なアニメーションや独自のWebフォントは、必要に応じてFigma上で調整します。 10万種類以上のアイコンをFigma内で検索・配置できる「Iconify」 アイコンを探すために素材サイトを開き、ダウンロードしてからFigmaへ読み込む作業は、意外と時間がかかります。 Iconify系のプラグインを使うと、Figmaから離れることなく、多数のアイコンセットを横断して目的のアイコンを検索できます。 アイコンを配置する手順 1. キーワードで検索する プラグインを起動し、検索欄へ探したいアイコンの名前を入力します。「arrow」「menu」「search」のように英語で検索すると候補を見つけやすくなります。 2. 使用するアイコンを選ぶ 検索結果から、デザインの雰囲気に合うアイコンを選びます。同じサイト内では線の太さや角の形が近いアイコンセットを使うと、デザインに統一感が生まれます。 3. サイズと色を設定して配置する アイコンのサイズや色を設定してFigmaへ配置します。公開物で使用する場合は、選択したアイコンセットのライセンスも確認しておきましょう。 同じようにコーディング時に欠かすことのできなかったFont Awesomeアイコンも「Font Awesome Icons」というプラグインでFigma上で使用可能です。 トレンドの「あか抜け」背景を作れる「Mesh Gradient」 単色や一般的な線形グラデーションでは、背景が少し物足りなく感じることがあります。 Mesh Gradientを使うと、複数の色が有機的に混ざり合った、奥行きのあるグラデーションを作成できます。メインビジュアルやバナー、カードの背景へアクセントを加えたいときに便利です。 Figmaが提供している無料の「Mesh Gradient」を使用します。 「Mesh Gradient」の使い方 1. メッシュの細かさを選ぶ Mesh Gradientを起動し、「Number of mesh points」でメッシュポイントの数を設定します。ポイントが少ないと大きく滑らかな色の変化になり、多くすると複雑で表情のあるグラデーションになります。 Mesh Gradientの基本画面。「2×2」など、作りたい表情に合わせてポイント数を選択します。 2. 色とポイントの位置を調整する 「Colors」で各ポイントの色を設定し、プレビュー上の白いハンドルをドラッグします。色が混ざる位置を確認しながら、全体のバランスを調整しましょう。 メッシュポイントを「3×3」に設定した状態。白いハンドルを動かすと、色の位置や混ざり方を細かく調整できます。 3. Figmaへ生成する 好みのグラデーションが完成したら「Generate」をクリックしてキャンバスへ配置します。気に入った設定は「Save」で保存できます。 背景として使う場合は、上に載せる文字の読みやすさも確認してください。必要に応じて半透明の黒や白を重ねると、文字とのコントラストを調整できます。 Figmaで作成したデザインはMCPでhtmlに吐き出すことが可能です（これもすごい） MCPとは、FigmaとCodexなどのAIツールを接続するための仕組みです。見た目だけを画像として読み取るのではなく、Figma内の構造やデザイン情報を取得できるため、スクリーンショットだけを参考にするよりも再現性の高いコードを作成しやすくなります。これもだんだん精度が上がっているように感じる・・・ もちろんhtmlやcssもなんだかちょっと気持ち悪かったり修正に時間がかかったりとまだまだ課題点もあるのですが便利すぎるのは間違いない・・・ プラグインは、制作時間を短縮するだけでなく、デザインの検証やアイデア出しにも役立ちます。まずは、普段の作業で時間がかかっている部分から取り入れてみてはいかがでしょうか。
