おすすめのFigmaプラグイン20選

Figmaのプラグインについて

Figmaとは、UIデザインやワイヤーフレームの作成に特化したブラウザベースのデザインツールです。

Figmaにはプラグインが数多く登録されています。既存の機能も十分充実していますが、プラグインを導入し機能を拡張することでより便利に効率的に作業をすることができます。

この記事ではおすすめのFigmaプラグインを20個ご紹介しますので、ぜひ参考にしてみてください。

なお、ご紹介するプラグインは基本無料で使用することができますが、中には有料のプランもありますのでご注意ください。

プラグインの紹介

①高品質な写真素材を挿入できる「Unsplash」

フリー写真素材サイト「Unsplash」に掲載されている写真をFigmaから直接挿入できるプラグインです。

検索機能もあるため、イメージに合う写真を簡単に探すことができます。

実際にクライアントのウェブサイトにフリー素材を掲載することはあまりないですが、まだ画像が決定していないときのダミー素材として使用するには便利なプラグインです。

 

ダウンロードはこちら

 

②サイズの大きい画像をそのまま挿入できる「Insert Big Image」

Insert Big Imageは、大きい画像をそのままのサイズで挿入できるプラグインです。

Figmaでは、縦幅または横幅が4096px以上の画像を挿入すると自動的に画像が小さくリサイズされ、画質の荒い画像に変換されてしまいます。Insert Big Imageを使用することで画像サイズを保ったままFigmaに挿入することが可能です。

ウェブサイト全体のキャプチャをFigmaに挿入したいときに便利です。

 

ダウンロードはこちら

 

③簡単に背景を切り抜ける「Remove BG」

Remove BGは、簡単な操作で画像の背景を切り抜くことができるプラグインです。

Photoshopを起動しなくてもFigma上で行うことができるため非常に便利ですが、解像度が下がったり境界線が不自然になるなどのデメリットもあるため注意が必要です。

私の場合はRemove BGで簡単に画像を切り抜いてデザインに仮置きし、イメージを確かめたいときに使うことが多いです。

 

ダウンロードはこちら

 

④手軽にアイコンを挿入できる「Iconify」

MaterialDesign、FontAwesomeといった有名なサービスのアイコンをSVG形式で挿入することができるプラグインです。

別ページを開いてアイコンを探す手間がないため、効率化につながります。

 

ダウンロードはこちら

 

⑤ドットパターンの素材を簡単に作れる「Dot Grid」

Dot Gridは簡単にドットのパターンを作成することができるプラグインです。

ドットのサイズやカラーコード、gapの指定などをするとすぐにFigmaにドットのパターンを配置することができます。

他のプラグインと比べると使用頻度は低いですが、イラレを起動したり素材サイトからダウンロードする必要がないため、手軽に作成したいときには便利なプラグインです。

 

ダウンロードはこちら

 

⑥ノイズを作成できる「Noise & Texture」

Noise & Textureは、ノイズ画像を生成することができるプラグインです。

カラーやサイズなどの細かい設定もできるので、デザインにあったノイズを作成することが可能です。

 

ダウンロードはこちら

 

⑦シェイプの比率を選んでリサイズできる「Aspect Ratio」

16:9や3:2など、ウェブデザインでよく使われる比率を選んでシェイプをリサイズできるプラグインです。

私は以前まで他サービスのツールを使って計算していましたが、こちらのプラグインを用いればFigmaのみで完結できるため、作業効率がかなり良くなりました。プラグインにもともと用意されているアスペクト比だけでなく、手入力で比率を決めることも可能です。

 

ダウンロードはこちら

 

⑧曲線に沿って文字を配置する「To Path」

To Pathは円形のシェイプに沿わせて文字を配置することができるプラグインです。

illustratorでも可能ですが、こちらはFigmaで完結できるため便利です。

個人的には操作方法もこちらの方が手軽で簡単に感じます。

 

ダウンロードはこちら

 

⑨歪んだシェイプを作成できる「Blobs」

Blobsは歪んだ液体シェイプを作成することができるプラグインです。

バーを操作すると表示されるシェイプから好きな形を選んで挿入することができ、操作方法も簡単で便利です。

作成したシェイプは背景のあしらいなどで使用できます。

 

ダウンロードはこちら

 

⑩一つのシェイプを均等に分割する「Split Shape」

Split Shapeは一つのシェイプに対しColumns、Rows、Gutter、Marginの値を設定して均等に分割することができるプラグインです。

例えば1080pxのコンテンツ幅に対し、均等な横幅の3つのシェイプを置きたいという場合、以前は余白の値を引いて、3で割って、というような作業が必要でしたがこちらのプラグインを用いれば計算することなく複数カラムを作ることが可能です。

 

ダウンロードはこちら

 

⑪波形を作る「Wave & Curve」

Wave & Curveは簡単に波形を作ることができるプラグインです。

数値を変えることで様々な形の波形を手軽に作成することができます。

あしらいを作成するときに便利です。

 

ダウンロードはこちら

 

⑫綺麗なグラデーションを簡単に作る「uiGradients」

数多くのグラデーションのパターンが用意されており、その中から選んでオブジェクトや文字に適用できるプラグインです。選択したあとに色の調整も行うことができます。

デザインがすでに固まっている場合はあまり使いませんが、配色がまだ定まっておらず、いろいろなパターンを検証したいときに便利です。

 

ダウンロードはこちら

 

⑬タイプスケールを自動で生成「Typescales」

Typescalesは、文字サイズのスケールを自動で生成することができるプラグインです。

ベースサイズ、スケール、生成するスケールの数などの設定に加えて小数点を省いて生成することも可能です。

私は以前は別のサービスを使用していましたが、こちらを使えばFigmaで完結させることができ、また生成されたスケールをスタイルに登録することですぐにデザインに用いることができます。利用されているフォントサイズが一覧で確認できるため、コーディングの効率化にも繋がります。

 

ダウンロードはこちら

 

⑭ダミーの日本語テキストを挿入「realistic-dummy-text-ja」

英語のダミーテキストを挿入するプラグインは「Lorem ipsum」などがありますが、「realistic-dummy-text-ja」は日本語のダミーテキストを挿入することができます。

ダミーテキストとしてよく使われる「あのイーハトーヴォのすきとおった風、」のテキストの他、名前、住所などそのほかのダミーテキストも簡単に入れることができます。

 

ダウンロードはこちら

 

⑮利用しているフォントファミリーを表示する「Font Fascia」

Font Fasciaはデザインに使われているフォントファミリーを一覧で確認することができるプラグインです。

フォントファミリーの他に、使われている数や場所も確認することができます。

デザインの中にルールから逸脱したフォントが混ざっているか確認したいときや、コーディングの際にフォントファミリーを確認したいときに便利です。

 

ダウンロードはこちら

 

⑯複数行のテキストを分割「Nisa Text」

Nisa Textは複数行のテキストを改行箇所で分割してくれるプラグインです。

例えばクライアントからもらったテキストをすべてコピーしてそのままFigmaにペーストした場合、一つのテキストボックスにすべてのテキストが入りますが、このままだとデザイン要素を加えたいときに手作業で別のテキストボックスに分ける必要があります。

Nisa Textを用いると自動で改行した箇所に合わせてテキストを分割してくれるためこの作業が不要になり、効率化につながります。

 

ダウンロードはこちら

 

⑰レイヤーやオブジェクトを整理する「Clean Document」

Clean DocumentはFigmaのデザインデータを自動で整理できるプラグインです。

私は小数点がついてしまったオブジェクトを整数にする機能を使うことが多いですが、そのほかにも無駄なグルーピングを削除する機能や、非表示になっているレイヤーを削除する機能、レイヤー名を整える機能もあるようです。

簡単な操作ですべてのレイヤーを一括で整えることができるので、コーディング前のデータ整理として役立ちます。

 

ダウンロードはこちら

 

⑱スタイル登録した設定を一括でcss出力「CSS Variables Generator」

「CSS Variables Generator」は、figmaでカラーやフォントのスタイルを登録しておくと、その設定をCSSに一括で出力してくれるプラグインです。

注意点として、スタイル登録する際の名前がそのままCSSとして出力されるため、名前の付け方には気を配る必要があります。

 

ダウンロードはこちら

 

⑲ウェブサイトをデザインデータにしてfigmaに取り込む「html.to.design」

「html.to.design」はURLを入力することでそのウェブサイトをデザインデータとしてfigmaにインポートすることができます。

精度も高く、ほぼそのままの状態で取り込むことができるため、既存サイトの改修といった案件で非常に便利です。

注意点として、1カ月に10サイトまでは無料でインポートすることができますが、それ以上は有料の契約が必要になります。

 

ダウンロードはこちら

 

⑳XDのデータをFIgmaにインポートする「Convertify」

ConvertifyはXDのデータをFigmaにインポートすることができるプラグインです。

XDファイルをドラッグ&ドロップするだけでインポートすることができます。

またxd以外にも、illustratorやPDFのインポートや、FigmaをXDにエクスポートする機能もあります。

注意点として無料プランは10個まで、それ以上のインポートは有料プランの契約が必要になります。

 

ダウンロードはこちら

 

まとめ

本記事では、Figmaのおすすめプラグインを20個ご紹介しました。

ここで紹介したもの以外にもさまざまな便利なプラグインが登録されています。

プラグインの導入方法も簡単ですぐにできるので、ぜひ試してみてください。

最近のお知らせ 全てのお知らせ

Other

その他のご案内

  • First初めての方へ

    ご依頼の流れや当社の業務フローをご紹介しています。

    View more
  • Company企業情報

    SynQPartners株式会社の会社情報/アクセスはこちら。

    View more
  • Consultation無料相談のご予約

    サイトのお悩みを抱えている企業様へ、依頼前に相談を承ります。

    View more
  • Contact usお問い合わせ

    ご依頼や相談、後不明点等の各種お問い合わせはこちらから

    View more