Figmaプラグイン17選。TopToolsToolsFigmaプラグイン17選。Webデザイナーが使い続けているプラグインを紹介Figmaプラグイン17選。人気記事Webサイトを使いやすくするユーザビリティ11の施策お問い合わせフォーム最適化。最低限設定しておきたい5つFigmaをデザイン作成のメインアプリに変えてから数ヶ月経過し、Figmaプラグインの見直しをおこないました。新たに発見したもの含め、私が使い続けているプラグインを17個紹介します。使用してみたものの使わなくなったプラグインも記事後半に紹介しています。私にスタイルに合わないだけで便利に使用できる方もいると思うので、ぜひ最後までチェックしてみてください。Figmaプラグイン17選まずは、頻繁に使い続けているものや今回見つけたFigmaプラグインを17個紹介します。IconsやFontAwesomeなど、60以上のアイコン配布サイトで提供しているアイコンを、手軽にFigmaに挿入できるIconify。サイトごとの検索や、登録されている全サイトを対象にキーワード検索もできるので、手軽に目的のテイストのアイコンを探しだすことができます。ライセンスの記載もあるので、プラグイン内で完結するのは手間が省けて嬉しいですね。Iconsプラグインを使用しています。Iconsを使ってサクサク作成していることが多いです。Figmablushblushポップなイラストが使いたい時は、blushがおすすめ。複数テイストのイラストから選ぶことができ、カスタマイズが可能です。blushProプランもあり、月$12USD(1,700円くらい)で利用できます。SVG形式のイラストを頻繁に使用するのであればサブスクもありだと思います。Figmablush内でも提供しているイラストHumaaans。blushで提供しているイラストの数よりも多くの種類を使うことができます。無機質な人イラストは使いやすく、色の変更ができるので、サイトに合わせて用意することも可能です。個性は強いですが、サイトによってはしっかりまとまりますし、種類が多いので使い勝手がいいです。使い所は少ないですが、いざという時のためにストックしておくと便利に使えます。Figmaarcarcテキストをカーブに合わせて変形させることができるarc。湾曲させたテキストをメインビジュアルなどのあしらいとして使用する際に使えます。FigmaNoiseNoise写真などにノイズフィルターを加えることができるNoise。Photoshopを開かなくても簡単にノイズ処理ができるのは嬉しいですね。USD(700円くらい)の買い切りで利用できます。FigmaBlobsBlobsクニャと歪んだシェイプが作成できるBlobs。歪み具合などの調整ができ、ランダムで変形させることができます。デザインのあしらいが欲しい時に便利です。デフォルトはフォントが探しにくいので、こちらを利用しています。英語以上に日本語フォントは探しにくいので、使用機会は多いです。FigmaAutoflowAutoflowフローチャートや画面遷移図を作成する際に便利なAutoflow。起点となるオブジェクトを選択し、Shiftキーを押しながら終点となるオブジェクトを選択すると、矢印で結ぶことができます。矢印スタイルの変更が可能。オブジェクトを移動しても追従してくるので、編集しやすいです。フレームやレイヤーの数が多くなると、一つずつ作業するのがかなり手間なので、こちらでサクッと変更しています。『%nn』で01からの連番が指定ができます。便利なので使用頻度高いです。FigmaLilGridLilGrid1クリックでグリッド整列できるLilGrid。Alphabetically)ができます。Alphabeticallyを選択しないと、フレーム作成順で並びます。アルファベット順とありますが、実際には記号(一部除く)→数字→アルファベットの順番に並びます。ちなみに、以前のバージョンでは余白をピクセル単位で指定できたのですが、現在は比率での指定のみのようです。長方形をドラッグさせて余白調整する具体的な数値での余白指定は、動画のように長方形を移動させて調整します。Image画像を斜め上から俯瞰して見ているようなアイソメトリック画像に変換するIsometric。ポートフォリオサイトに使えそうな画像をサクッと作成できます。向きや角度調整も可能なので、画像に合わせて調整すると見せ方を変えることができます。Figmaは、4096px以上の画像を挿入すると画像が圧縮され、解像度の低い画像に自動変換されてしまいます。こちらを使用することで解像度を維持したまま、画像を使用することができます。JPGとPNGが対象です。FigmaDownsizeDownsizeFigma上で画像の圧縮やリサイズができるDownsize。PNGからJPGへの変換もできます。私は別途アプリを使用して圧縮しているので使う機会は少ないです。使用するのはフレーム数が多くなり、ファイルサイズが大きくなった時くらいですね。Figma上で完結させたい場合は、必須プラグインだと思います。FigmaLottieFilesLottieFilesLottieアニメーションが挿入できるLottieFiles。利用するにはLottieFilesでのアカウント作成が必要です。Webサイト上でも、オープニングやボタンなどに軽くアニメーションをつける機会は多くなりました。ファイルサイズの小さいLottieは、選択肢の一つに入れておきたいですね。ちなみに、Figma上でのアニメーションの確認は、『プレゼンテーションを実行』をクリックで見ることができます。Figma使わなくなったプラグイン評判が良く使ってみたものの私の実務では合わなく使用しなくなったプラグインについて紹介します。UnsplashUnsplashUnsplashで提供している商用利用可の写真を、Figma内で使用できるプラグイン。直接サイトに訪れることなく高品質の写真素材が用意できるのは手間が少なく嬉しい機能です。私が請ける案件では無料素材を使用することがないため、仕事では使っていません。本記事のようなメディア記事を作成する際に、カンプとしてごくまれに利用する程度で、ほぼ使用することがなくなりました。Figma上で手軽に処理できるのは嬉しいのですが、解像度が低くなるので使わなくなりました。Photoshopを起動しています。ベクターデータとしてパスを触れるようになるのは嬉しいのですが、こちらもIllustratorを起動するようになりました。マサユキWebサイト制作をメインにサイト設計からデザイン、コーディングまでをワンストップで請負うフリーランスWebデザイナーとして活動。使えるWebデザインアイデアレシピ(マイナビ出版)』は日本以外に韓国や中国で翻訳版を刊行。Twitter(@pulpxstyle)では自身の経験から得た制作の現場で使えるアイデアを発信中。28選+1ネットショップ作成サービスのBASE。写真、イラスト、動画、音声などを販売を検討している方は特におすすめです。非デザイナーやAdobe契約している人以外でも使える画像生成AIツールClipdropが無料で高性能でした。Photoshopのジェネレーティブ塗りつぶしに似た機能以外に多様な生成AI機能も提供しているので合わせて紹介します。ToolsUpdate2023.06.13Release2023.06.12あなたのWeb制作をサポートしてくれるWebツール13選Web制作をサポートしてくれるツールを13個紹介します。グラデーションを使ったCSSアニメーションジェネレーターや、mix-blend-modeやgridレイアウト、transformなどのコードジェネレーターの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。ToolsUpdate2023.05.24Release2023.04.28Web制作に便利なChrome拡張機能20選Chrome拡張機能は、ウェブ閲覧やウェブ制作の際に非常に便利な機能です。新しい拡張機能を見つけるたびに追加し、実務で試しています。気がつくと使わない機能が溜まりがちなので、数ヶ月ごとに見直ししています。Webサイト制作者の視点から便利なChrome拡張機能を厳選して20個紹介します。ToolsUpdate2023.03.31Release2023.03.31ContactBuildへ無料相談するBUILDにご興味をもっていただきありがとうございます。フォームよりお気軽にご連絡ください。Policyメニューを閉じる。