Figmaとは、UIデザインやワイヤーフレームの作成に特化したブラウザベースのデザインツールです。
Figmaにはプラグインが数多く登録されています。既存の機能も十分充実していますが、プラグインを導入し機能を拡張することでより便利に効率的に作業をすることができます。
この記事ではおすすめのFigmaプラグインを20個ご紹介しますので、ぜひ参考にしてみてください。
なお、ご紹介するプラグインは基本無料で使用することができますが、中には有料のプランもありますのでご注意ください。
フリー写真素材サイト「Unsplash」に掲載されている写真をFigmaから直接挿入できるプラグインです。
検索機能もあるため、イメージに合う写真を簡単に探すことができます。
実際にクライアントのウェブサイトにフリー素材を掲載することはあまりないですが、まだ画像が決定していないときのダミー素材として使用するには便利なプラグインです。
Insert Big Imageは、大きい画像をそのままのサイズで挿入できるプラグインです。
Figmaでは、縦幅または横幅が4096px以上の画像を挿入すると自動的に画像が小さくリサイズされ、画質の荒い画像に変換されてしまいます。Insert Big Imageを使用することで画像サイズを保ったままFigmaに挿入することが可能です。
ウェブサイト全体のキャプチャをFigmaに挿入したいときに便利です。
Remove BGは、簡単な操作で画像の背景を切り抜くことができるプラグインです。
Photoshopを起動しなくてもFigma上で行うことができるため非常に便利ですが、解像度が下がったり境界線が不自然になるなどのデメリットもあるため注意が必要です。
私の場合はRemove BGで簡単に画像を切り抜いてデザインに仮置きし、イメージを確かめたいときに使うことが多いです。
MaterialDesign、FontAwesomeといった有名なサービスのアイコンをSVG形式で挿入することができるプラグインです。
別ページを開いてアイコンを探す手間がないため、効率化につながります。
Dot Gridは簡単にドットのパターンを作成することができるプラグインです。
ドットのサイズやカラーコード、gapの指定などをするとすぐにFigmaにドットのパターンを配置することができます。
他のプラグインと比べると使用頻度は低いですが、イラレを起動したり素材サイトからダウンロードする必要がないため、手軽に作成したいときには便利なプラグインです。
Noise & Textureは、ノイズ画像を生成することができるプラグインです。
カラーやサイズなどの細かい設定もできるので、デザインにあったノイズを作成することが可能です。
16:9や3:2など、ウェブデザインでよく使われる比率を選んでシェイプをリサイズできるプラグインです。
私は以前まで他サービスのツールを使って計算していましたが、こちらのプラグインを用いればFigmaのみで完結できるため、作業効率がかなり良くなりました。プラグインにもともと用意されているアスペクト比だけでなく、手入力で比率を決めることも可能です。
To Pathは円形のシェイプに沿わせて文字を配置することができるプラグインです。
illustratorでも可能ですが、こちらはFigmaで完結できるため便利です。
個人的には操作方法もこちらの方が手軽で簡単に感じます。
Blobsは歪んだ液体シェイプを作成することができるプラグインです。
バーを操作すると表示されるシェイプから好きな形を選んで挿入することができ、操作方法も簡単で便利です。
作成したシェイプは背景のあしらいなどで使用できます。
Split Shapeは一つのシェイプに対しColumns、Rows、Gutter、Marginの値を設定して均等に分割することができるプラグインです。
例えば1080pxのコンテンツ幅に対し、均等な横幅の3つのシェイプを置きたいという場合、以前は余白の値を引いて、3で割って、というような作業が必要でしたがこちらのプラグインを用いれば計算することなく複数カラムを作ることが可能です。
Wave & Curveは簡単に波形を作ることができるプラグインです。
数値を変えることで様々な形の波形を手軽に作成することができます。
あしらいを作成するときに便利です。
数多くのグラデーションのパターンが用意されており、その中から選んでオブジェクトや文字に適用できるプラグインです。選択したあとに色の調整も行うことができます。
デザインがすでに固まっている場合はあまり使いませんが、配色がまだ定まっておらず、いろいろなパターンを検証したいときに便利です。
Typescalesは、文字サイズのスケールを自動で生成することができるプラグインです。
ベースサイズ、スケール、生成するスケールの数などの設定に加えて小数点を省いて生成することも可能です。
私は以前は別のサービスを使用していましたが、こちらを使えばFigmaで完結させることができ、また生成されたスケールをスタイルに登録することですぐにデザインに用いることができます。利用されているフォントサイズが一覧で確認できるため、コーディングの効率化にも繋がります。
英語のダミーテキストを挿入するプラグインは「Lorem ipsum」などがありますが、「realistic-dummy-text-ja」は日本語のダミーテキストを挿入することができます。
ダミーテキストとしてよく使われる「あのイーハトーヴォのすきとおった風、」のテキストの他、名前、住所などそのほかのダミーテキストも簡単に入れることができます。
Font Fasciaはデザインに使われているフォントファミリーを一覧で確認することができるプラグインです。
フォントファミリーの他に、使われている数や場所も確認することができます。
デザインの中にルールから逸脱したフォントが混ざっているか確認したいときや、コーディングの際にフォントファミリーを確認したいときに便利です。
Nisa Textは複数行のテキストを改行箇所で分割してくれるプラグインです。
例えばクライアントからもらったテキストをすべてコピーしてそのままFigmaにペーストした場合、一つのテキストボックスにすべてのテキストが入りますが、このままだとデザイン要素を加えたいときに手作業で別のテキストボックスに分ける必要があります。
Nisa Textを用いると自動で改行した箇所に合わせてテキストを分割してくれるためこの作業が不要になり、効率化につながります。
Clean DocumentはFigmaのデザインデータを自動で整理できるプラグインです。
私は小数点がついてしまったオブジェクトを整数にする機能を使うことが多いですが、そのほかにも無駄なグルーピングを削除する機能や、非表示になっているレイヤーを削除する機能、レイヤー名を整える機能もあるようです。
簡単な操作ですべてのレイヤーを一括で整えることができるので、コーディング前のデータ整理として役立ちます。
「CSS Variables Generator」は、figmaでカラーやフォントのスタイルを登録しておくと、その設定をCSSに一括で出力してくれるプラグインです。
注意点として、スタイル登録する際の名前がそのままCSSとして出力されるため、名前の付け方には気を配る必要があります。
「html.to.design」はURLを入力することでそのウェブサイトをデザインデータとしてfigmaにインポートすることができます。
精度も高く、ほぼそのままの状態で取り込むことができるため、既存サイトの改修といった案件で非常に便利です。
注意点として、1カ月に10サイトまでは無料でインポートすることができますが、それ以上は有料の契約が必要になります。
ConvertifyはXDのデータをFigmaにインポートすることができるプラグインです。
XDファイルをドラッグ&ドロップするだけでインポートすることができます。
またxd以外にも、illustratorやPDFのインポートや、FigmaをXDにエクスポートする機能もあります。
注意点として無料プランは10個まで、それ以上のインポートは有料プランの契約が必要になります。
本記事では、Figmaのおすすめプラグインを20個ご紹介しました。
ここで紹介したもの以外にもさまざまな便利なプラグインが登録されています。
プラグインの導入方法も簡単ですぐにできるので、ぜひ試してみてください。