【2024年】おすすめFigmaプラグイン8選を現役UIデザイナーに聞いてみた
この記事では、オプサーの現役UIデザイナー、有田さんにお話を伺いながら、UIデザインにまつわるプラグインの他、Figma内でのインナーコミュニケーションや、ユーザーへの配慮をチェックするプラグインもご紹介します。
有田さんが実際に使用しているプラグインをご紹介するので、Figma初心者の方に役立つものはもちろんのこと、普段からFigmaでデザインを行っている方でも、なかなか知らないようなニッチなものも含まれています。
普段少し面倒だと感じている作業が簡単になるのでFigmaユーザーの方、必見の内容です!
- Figmaプラグインとは? - プラグインの概要と特徴
- 1. Material Design Icons - Google製のアイコンが使えるプラグイン
- 2. Artboard Mockups- デザインをデバイスのモックアップに当てはめるプラグイン
- 3.Chart Master 3001-Figma上で正確なグラフを作成できるプラグイン
- 4. Contrast - UIデザインの配色チェックに役立つプラグイン
- 5. Design Lint - デザインシステムの一貫性をチェックするプラグイン
- 6. Autoflow - 画面遷移を示すフローを作成できるプラグイン
- 7.eightShapes.specs - 開発に向けて詳細な指示を伝えるプラグイン
- 8.【番外編】Comment Note - シンプルな見た目で伝言するウィジェット
- まとめ
プロフィール
デザイナー / 有田 亮平
グッドパッチにUI/UX・Brand Experience Designerとして約4年間在籍。
新規サービス立ち上げからグロース、リニューアル、ブランディングでの組織文化形成まで幅広く担当。
2019年 UIデザイナーとしてグッドデザイン賞を受賞。
Figmaプラグインとは? - プラグインの概要と特徴
ーーよろしくお願いします。まず簡単にFigmaのプラグインとはどういったものなのか教えてください。
有田さん
分かりました。まず、Figmaプラグインとは、Figmaが公式で用意していない機能を追加できる拡張機能です。それらサードパーティ製のプラグインはFigmaのプラグインストアから入手できます。
例えばGoogleやAppleなどの大手企業も自社のデザインガイドラインに沿ったプラグインを提供しているんです。そのためアプリのUIデザインを行う際にはプラグインを活用することで、デザインの質を高め、作業効率を上げることができます。
ーーなるほど!ありがとうございます。 ここからそれぞれのプラグインの話に踏み込んでいきたいと思うのですが、まずはデザインの際によく使うFigmaのプラグインを教えてください。
有田さん
ではこの素材系のプラグインから紹介しましょうか。
1. Material Design Icons - Google製のアイコンが使えるプラグイン
Material Design Icons
私がよく使うプラグインの1つが、Material Design Iconsです。これは、GoogleのMaterial Designガイドラインに沿ったアイコンをFigma上で簡単に使用できるプラグインです。各デバイスには上記にあげたような独自のガイドラインがあり、GoogleとAppleはそれぞれUIデザインに関する推奨事項を示しています。これらの企業がFigmaにデザイン素材を提供しそれを我々デザイナーが使用することで、アプリの品質を保たれ、それにより各プラットフォームの哲学を反映した適切なデザインが実現されるんです。だからこのプラグインのアイコンを使うことは両者にとって合理的だと考えられています。
実用的な話をすると、このプラグインを使えば、Google製アイコンをワンクリックでFigmaにインポートできるためとても使いやすいです。オプサーのデザインにもこのプラグインを活用しており、統一感のあるアイコンを効率的に配置できています。
ーーありがとうございます。統一感のあるデザインは機能性に関わるので重要ですね。また、公式のプラグインを使うことでガイドラインの保守といったメリットもあるんですね。ほかのプラグインもお願いします!
有田さん
次に紹介するのは、Artboard Mockupsというプラグインです。これは、作成したデザインを様々なデバイスのモックアップに当てはめられるプラグインです。
2. Artboard Mockups- デザインをデバイスのモックアップに当てはめるプラグイン
Artboard Mockups | Figma
スマートフォンやタブレット、ノートPCなどのデバイスフレームにデザインを簡単に配置でき、実際のデザインのイメージを作ることができるので、サービスだけでなくプレゼンテーションの際にも活用しています。以前はAdobe Photoshopでモックアップを作成していたんですが、Artboard Mockupsのおかげで、Figma上ですべての作業が完結するようになりました。
ーーFigmaという一つのデザインツールで完結するのはとても便利ですね!
有田さん
そうなんです。次もデザイン作成の手間を省いてくれるツールとなっています。それがFigma上で正確なグラフを作成できるプラグインです。
3.Chart Master 3001-Figma上で正確なグラフを作成できるプラグイン
Chart Master 3001
棒グラフや折れ線グラフ、円グラフなどを、数値データからワンクリックで生成できるんですよ。オプサーのサービス資料でも活用しており、正確なグラフをスピーディーに作成しています。ラフなグラフであればFigmaの基本ツールでもそれなりに作ることはできるのですが、やはり数値の正確性が求められるよう場面では、以前まで、グラフ作成にAdobe IllustratorやKeynoteを使用し、また貼り付けるという作業をしていました。しかし、これらのツールのおかげで、Figma上ですべて完結できるようになりました。
ーー最近のアップデートでFigma Slidesもリリースされました。デザイン性を担保しながら、正確なスライド作りをするためにも、一層このツールを使う場面が増えそうですね。
有田さん
そうですね。このツールは本当によく使わせてもらっています。ここからはチェックツールの紹介ができればと思います。
4. Contrast - UIデザインの配色チェックに役立つプラグイン
Contrast | Figma
チェックツールの一つ目として紹介するのはContrastというプラグインです。これは、UIデザインの配色がウェブアクセシビリティ基準を満たしているかをチェックできるプラグインです。
ウェブアクセシビリティ基準とは、視覚・聴覚障害や高齢者、色覚特性を持つ人など、さまざまなユーザーがウェブコンテンツを問題なく利用できるようにするための指針やルールのことです。具体的には、文字のコントラスト、文字サイズ、色の使い方、操作のしやすさなどに関するガイドラインが定められています。日本でのウェブアクセシビリティは、JIS X 8341-3:2016という規格がベースとなっています。
特に目では判断しづらい背景色とテキスト色のコントラスト比を測定し、アクセシビリティ基準を満たしていない組み合わせや、文字が適切な大きさか、なども判断してくれます。色覚に障がいを持つ方でも読みやすいUIを設計するために、このプラグインは欠かせません。
オプサーでも、社内のデザインシステムの構築時や新たなスタイルを定義する際にContrastを活用し、アクセシブルな配色を実現しています。
ーー誰にとっても使いやすいデザインを作るために満たすべき、アクセシビリティ基準。誰でも平等に使いやすいサービスであるために欠かせないチェック項目ですね。
有田さん
そうですね。次もチェックツールの部類で結構ニッチですが頼りになるプラグインです。
5. Design Lint - デザインシステムの一貫性をチェックするプラグイン
Design Lint | Figma
つぎに紹介するのは、Design Lintというプラグインです。これは、Figma上のデザインがデザインシステムの規約に沿っているかをチェックするプラグインなんです。
デザインシステムの目的は、デザインの増加や更新を行う際に色やボタンのスタイルがどんどん増えてしまうのを防ぎ、開発側での統一感を保つことです。
Design Lintはあらかじめ設定したデザイントークン(色やタイポグラフィ、コンポーネントなど)と照らし合わせ、デザインシステムから逸脱している箇所を検出してくれるんですよ。
新しい画面を作成した際に、既存のデザインスタイルが割り当てられていないレイヤーをそのまま見落としてしまう事がよくあるのですが、Design Lintを使用してデザインスタイルに含まれていない色やテキストサイズを感知し、確認することで、より一層整理されたデザインファイルになります。見落としているポイントを教えてくれて、整理されたファイルになっていくのはレビューしてくれてるような感覚になり、ありがたいです。
ーーなるほどだいぶニッチですね笑 実際に開発にかかわっていないとこのツールの利便性は伝わりづらいかと思いますが、デザインファイルの整理に役立ちそうですね!
有田さん
ではここからはFigma上でのコミュニケーションを円滑に進めるためのツールを紹介します。
6. Autoflow - 画面遷移を示すフローを作成できるプラグイン
Autoflow | Figma
6つ目は、Autoflowというプラグインです。これは、画面遷移を示すフロー図を作成できるプラグインなんです。
各画面間の繋がりを示す矢印を引くだけで、自動的にフロー図が生成されるんですよ。画面が多岐にわたるサービスを設計する際に、Autoflowは非常に役立ちます。画面構成を一目で把握でき、関係者とのコミュニケーションも円滑になります。
ーーたしかに矢印一つで画面の遷移が分かりやすくなるのでプロの方に限らず、初心者の人にもぜひ使ってほしいプラグインですね。
有田さん
次はデザイナーと開発間でのコミュニケーションを円滑にするアイテムです。
7.eightShapes.specs - 開発に向けて詳細な指示を伝えるプラグイン
EightShapes Specs | Figma
そんな7つ目は、EightShapes Specsです。これは、デザインの各要素に関する詳細な情報を記載できるプラグインです。
僕がよく使うタイミングとしては、 Figmaを見ただけでは伝わりづらい場所にEightShapes Specsを使います。
例えば、少し複雑なレイヤーになってしまった画面や、すでにあるルールとは意図的に変える箇所などで活用しています。
具体的には要素間の余白や、特殊な動作が求められる部分について、エンジニアに向けた指示を直接アートボードにに書き込めるツールなんです。これにより、開発側にデザインの意図を正確に伝え、開発とのスムーズな連携が可能になります。Figmaの開発モードでも詳細な情報は伝えることができますが、開発側もすべての余白やレイアウトの細部までは把握しきれないことが多いため、デザインの詳細な仕様を補足できるEightShapes Specsが威力を発揮しますね。
ーーなるほど。たしかに一つ一つ「ここが何ピクセルで、、」と毎回確認していては開発のスピードも落ちてしまいますもんね。目立たせたいところだけ、注意深くみてもらうほうが効率が良いのは言うまでもないですね。
有田さん
そうですね。すべてFigma上で指示が完結するのもありがたいです。最後に紹介するのがこれも伝達系で、プラグインではないのですが、より大人数で作業をする際に役に立つウィジェットです。
8.【番外編】Comment Note - シンプルな見た目で伝言するウィジェット
Comment Note | Figma
最後に紹介するのはプラグインではなくウィジェットです。
単に備忘録としてメモをするなら付箋機能でも問題ありませんが、ほかのデザイナーやエンジニア、ビジネスサイドの方など各方面がそれぞれ修正案やコメントをしたい場合、Comment noteが優秀です。特に優れている点はコメント種別を仕様・作業者メモ・修正・レビュー・要確認から選択ができ、色で別れているので、MTG中に共有する際に共有漏れを防ぐことができます。もちろん備忘録としても重宝しています。
まとめ
以上が、有田さんがFigmaで愛用しているプラグイン、ウィジェットをご紹介しました。一部ニッチなプラグインもご紹介しましたが、これらを活用することで、デザインの質を高め、作業効率を大幅に向上させることができます。ぜひ皆さんも実際に使ってみて業務の効率化を実現してみてください!
この記事をシェアする
関連記事
- ノウハウモーションデザイナーとは?仕事内容や年収、将来性を解説!#モーションデザイナー投稿日2024年11月01日更新日2024年11月01日
ウェブサイトや動画、アプリなどで、動きのあるデザインを目にしませんか?それはモーションデザイナーが作ったものかもしれません。モーションデザイナーとは高度な技術を駆使して、より現実に近い視覚体験を提供する素敵なお仕事です。 しかし、ネットで「モーションデザイナー」と検索すると「モーションデザイナーなくなる」といったネガティブな単語も見受けられます。 この記事では、モーションデザイナーの仕事内容から将来性、「なくなる」といわれる理由まで、詳しく解説していきます。
- ノウハウ【2024年】おすすめFigmaプラグイン8選を現役UIデザイナーに聞いてみた#Figma投稿日2024年10月18日更新日2024年10月29日
この記事では、オプサーの現役UIデザイナー、有田さんにお話を伺いながら、UIデザインにまつわるプラグインの他、Figma内でのインナーコミュニケーションや、ユーザーへの配慮をチェックするプラグインもご紹介します。有田さんが実際に使用しているプラグインをご紹介するので、Figma初心者の方に役立つものはもちろんのこと、普段からFigmaでデザインを行っている方でも、なかなか知らないようなニッチなものも含まれています。普段少し面倒だと感じている作業が簡単になるのでFigmaユーザーの方、必見の内容です!
- ノウハウ【デザイナー向け】ポートフォリオの作り方、6つの基本を紹介!#ポートフォリオ投稿日2024年08月26日更新日2024年08月29日
「自分の才能をもっと評価してほしい」「希望の仕事でキャリアアップしたい」。そんなデザイナーの皆さんは、自分の実績や作品を最大限にアピールできていますか?魅力的なポートフォリオは、依頼者や企業の心を掴む強力な武器となります。しかし、ただ実績を羅列するだけでは、あなたの魅力は十分に伝わりません。この記事では、採用担当者や依頼者の目に留まり、記憶に残るために求められる自己紹介ポートフォリオのおすすめを、具体的な方法と最新トレンドを交えて徹底解説します。あなただけの魅力が輝く、最高の自己紹介ポートフォリオを一緒に作り上げましょう。
特別インタビュー
- 特別インタビュー企業とフリーランスがフラットで真っ当なビジネス関係を築けるように投稿日2024年11月19日更新日2024年11月19日
業界や分野問わず”デザイン”に関わる方々に、目的や信念、その領域におけるデザインに関する考え方やノウハウを伺っていくコンテンツシリーズ「◯◯のデザイン」。今回は「あんしんと補償のデザイン」と題し、フリーランスが陥りやすいトラブルとその解決策について、「FREENANCE(フリーナンス) byGMO」を運営するGMOクリエイターズネットワーク株式会社の湯本 和浩さんにお話を伺いました。GMOクリエイターズネットワーク株式会社 Fintech事業部 マネージャー マーケティングチーム 湯本 和浩GMOクリエイターズネットワーク株式会社Fintech事業部 マネージャー マーケティングチーム湯本 和浩エンタメ業界にて様々なクリエイターと共にディレクター・プロモーターとして業務を経験。GMOクリエイターズネットワークに入社後、現在はマーケティングチーム責任者としてWEBマーケティングを中心に、イベント/セミナー運営、CRM、アライアンス等の業務を行う。
- 特別インタビュー書体は声。同じトーンで企業のあらゆるものを発信できるツール / 株式会社モリサワ#フォント#ユニバーサルデザイン投稿日2024年08月28日更新日2024年08月29日
業界や分野問わず“デザイン”に関わる方々に、目的や信念、その領域におけるデザインに関する考え方やノウハウを伺っていくコンテンツシリーズ「◯◯のデザイン」。今回は「文字と認識のデザイン」と題し、後編ではユニバーサルデザインなどフォントが与える「知覚のデザイン」について、日本国内のフォントサービス市場でトップシェアを誇る株式会社モリサワの貫真由さんと、CI・VIロゴや、コーポレートブランディングなどデザインを行うアートディレクター / グラフィックデザイナーの仁田大介さんにお話を伺いました。▼前編はこちら
- 特別インタビュー書体を提案するということは、生活者から見えるイメージを変えるということ / 株式会社モリサワ#コーポレートデザイン#フォント投稿日2024年08月28日更新日2024年08月29日
業界や分野問わず”デザイン”に関わる方々に、目的や信念、その領域におけるデザインに関する考え方やノウハウを伺っていくコンテンツシリーズ「◯◯のデザイン」。今回は「文字と認識のデザイン」と題し、前編ではフォントが与える「生活のデザイン」について、日本国内のフォントサービス市場でトップシェアを誇る株式会社モリサワの貫真由さんと、CI・VI、コーポレートブランディングなどを行うアートディレクター / グラフィックデザイナーの仁田大介さんにお話を伺いました。
クリエイターの声
- クリエイターの声オプサーはクリエイター視点で作られたサービスだと思う― azさん#インタビュー#動画制作#フリーランス投稿日2024年01月17日更新日2024年08月16日
opusr Creator's Voice vol.8オプサーで活躍されているクリエイターの皆様へ、クリエイターとしての想いやオプサーとの関わりについて語っていただくインタビュー企画《opusr Creator's Voice》。今回はオプサーが az さんの独立までの経緯や、最近の気づきについて聞かせていただきました。
- クリエイターの声チャレンジングな仕事との出会いがある― そうらいさん#3DCG#フリーランス#インタビュー投稿日2023年12月26日更新日2024年08月16日
opusr Creator's Voice vol.7オプサーで活躍されているクリエイターの皆様へ、クリエイターとしての想いやオプサーとの関わりについて語っていただくインタビュー企画《opusr Creator's Voice》。今回は そうらい さんへ、活動を開始するまでの経緯や、オプサーを通じて実現した案件について聞かせていただきました。
- クリエイターの声クリエイターへの信頼があるから、自由にできる ― matsuokaさん#動画制作#インタビュー#フリーランス投稿日2023年11月27日更新日2024年08月16日
opusr Creator's Voice vol.6オプサーで活躍されているクリエイターの皆様へ、クリエイターとしての想いやオプサーとの関わりについて語っていただくインタビュー企画《opusr Creator's Voice》。今回は matsuoka さんへ、オプサーが独立までの経緯や、オプサーを通じて実現した案件について聞かせていただきました。
企業の声
- 企業の声40年続く化粧品ブランドを蘇らせたクリエイティブの力-株式会社デジタルガレージ#上場企業#広告代理店投稿日2024年10月09日更新日2024年10月09日
オプサーでは広告代理店様とコンペから伴走する形もあります。今回はオプサー登録アートディレクターがコンペから参画し、受注に至った事例を株式会社デジタルガレージの片桐 隆信 氏にインタビューしました。株式会社デジタルガレージ片桐 隆信音楽専門商社にてバイヤー・セールスを担当した後、広告会社へ転職。資生堂・大塚製薬・ANA・PARCOといったナショナルクライアントへOOHを中心にクリエイティブ・デジタル領域を提案。その後デジタルガレージへ移り、クリエイティブ・新規技術(web3・AIなど)を使ったナショナルクライアントのマーケット開発を推進。企業の声とは、オプサーをお使いいただいている企業の皆様へ、実際にオプサーを利用されてみてのご感想や、オプサーの活用方法について伺う導入企業インタビューシリーズです。
- 企業の声デザイン投資の価値を実感できた ― ALL STAR SAAS FUND#VC#空間デザイン#インタビュー投稿日2024年02月28日更新日2024年08月16日
オプサーユーザーの企業へ、利用した感想やより良い活用法を伺うインタビューシリーズ。今回は、クラウドサービスを活用してソフトウェアを提供する「SaaS(※1)」企業を専門的に投資・支援するVC(※2)の「ALL STAR SAAS FUND」が2023年11月9日に開催したカンファレンスをフィーチャー。ALL STAR SAAS FUNDを代表として投資事業を務める前田ヒロさんと、同VCのブランディングやマーケティングのトップである小林千尋さん、そしてオプサー登録クリエイターでハイフン(HYPHEN)の代表・原健三さんを招きました。聞き手は、オプサーを運営する ヒューリズムでCEOを務める多湖大師です。大規模オフラインイベント「ALL STAR SAAS CONFERENCE 2023」においては、ウェブサイトや会場設計・意匠に至るまで、リアル/ウェブを横断して、クリエイティブ全般をオプサーを通じてマッチングしたHYPHENと推進。今回の実施を踏まえ、本業である投資事業の観点から「デザインへの投資価値」をテーマに、その有用性や重要性を伺いました。※1 SaaS:サース。“Software as a Service”の略※2 VC:ベンチャーキャピタル。ベンチャー企業やスタートアップに出資する投資会社
- 企業の声求める条件に精度高くマッチするデザイナーをスピーディーに決定 ― 株式会社マネーフォワード#上場企業#UIデザイン#UXデザイン#インタビュー投稿日2023年12月01日更新日2024年08月19日
オプサーをお使いいただいている企業の皆様へ、実際にオプサーを利用されてみてのご感想や、オプサーの活用方法について伺う導入企業インタビューシリーズ。今回は株式会社マネーフォワードの足立さんと、オプサー登録クリエイターで、マネーフォワード社の業務を請け負うフリーランスデザイナーの長井さんにお話を伺いました。
オプサーニュース
- ニュース幕張メッセ開催のコンテンツ東京2024に出展します#オフラインイベント投稿日2024年11月13日更新日2024年11月13日
クリエイターマッチングサービス「オプサー」を運営する、株式会社ヒューリズムは「コンテンツ東京2024」に出展いたします。本展示会は6つの専門展で構成された日本最大のコンテンツビジネス総合展で、2024年11月20日(水)~11月22日(金)の3日間で幕張メッセにて行われます。コンテンツ制作、映像・CG制作、ブランディング、マーケティング、権利、IT、最先端の表現技術などが出展しており、メディア、エンターテイメントや企業の広報・マーケティング、商品企画部門の方々が来場します。
- ニュース【2024年11月27日(水)開催】株式会社アマナ主催セミナーに弊社代表取締役 多湖が登壇いたします#オフラインイベント投稿日2024年10月31日更新日2024年10月31日
生成AIの時代においてクリエイターが発揮すべき創造性と、それをキャリアにどう結びつけていくべきかを深掘るワークショップに株式会社ヒューリズム代表取締役の多湖が登壇します。詳細はこちら本プログラムは、クリエイターと企業が作品から繋がれるマッチングプラットフォーム“オプサー“を運営する多湖大師が登壇し、現代クリエイターにとっての新たなキャリアパスのヒントの発見を目指します。AI活用やクリエイティブ業界に関心のある方、未経験の方も歓迎いたします。どうぞお気軽にご参加ください。
- ニュース【2024年11月1日(金)開催】「X・Salon」第4回に弊社取締役 諸石が登壇いたします#オフラインイベント投稿日2024年10月30日更新日2024年10月30日
各所で価値を生み出している若手マーケターを中心に、豪華4セッションを行う第4回X・Salonに、株式会社ヒューリズム取締役の諸石が登壇します。X・Salon公式サイトはこちら「X・Salon」は、平日夕方に、マーケティングやDXに関わる昨今の重要テーマを取り上げ、世代を問わず広く知見の共有と交流を行う場として、次世代のマーケティングのあり方を議論・対話するカンファレンス「MARKETING・X」からスピンアウトして誕生いたしました。関西圏を中心に定期的に開催しています。
ナレッジ
- クリエイターグラフィックデザイナーとは?仕事の概要とキャリアパスを徹底解説グラフィックデザイナーとは?仕事の概要とキャリアパスを徹底解説#グラフィックデザイン投稿日2024年11月21日更新日2024年11月21日
「グラフィックデザイナー」という職業に興味を持ったものの、「具体的にはどんな仕事をしているの?」と疑問を感じていませんか? 実は、広告のポスターやウェブサイトのレイアウト、商品のパッケージデザインなど、日常の中で自然と目にしているデザインが彼らの手によって生み出されています。しかし、具体的な仕事内容や求められるスキルについては知られていない部分も多いかもしれません。本記事では、そんなあなたの疑問を解決し、グラフィックデザイナーという職業の全体像や、その魅力を徹底解説します。
- クリエイターイラストレーターとは?仕事内容や年収、外注時のポイントを徹底解説!#イラストレーション投稿日2024年11月21日更新日2024年11月21日
「イラストレーターとは」と検索する方は、職業の実態や求められるスキル、さらには自身の可能性について知りたいという興味や不安を抱えているかもしれません。本記事では、そんな疑問や悩みに寄り添いながら、イラストレーターという仕事の魅力や具体像を分かりやすくお伝えします。また「企業として外注を考えているけど、どう依頼すればいいの?」といった疑問にも丁寧にお答えします。 この記事を読むことで、あなたが抱える「イラストレーターって何?」という疑問が解消されるだけでなく、この職業が持つ可能性や、自分が目指せる未来を具体的に描けるようになるでしょう。
- クリエイターアートディレクターとは?役割・スキル・キャリアパスを徹底解説#アートディレクター投稿日2024年11月07日更新日2024年11月07日
「アートディレクターって、どんな仕事をするのだろう?」その役割や日々の業務内容、どんなスキルが求められるのか気になる方も多いと思います。また、アートディレクターと他のデザイナー職との違いや、業界でのトレンド、活躍するためのキャリアの築き方について知りたいという方もいるでしょう。さらに、年収や働き方も気になるところです。本記事では、アートディレクターという職業の基本から、キャリアのステップ、最新の動向まで、分かりやすくお伝えしていきます。アートディレクターを目指す方や、興味を持つ方の参考になれば幸いです。