Figmaで企業やサービスのブランドロゴやカラーをすぐ参照できるプラグイン「Brandfetch」

デザイン時に企業やサービスのロゴ画像が必要になるときがあります。
例えばTwitterやFacebookなどのSNSロゴを入れたい場合に、わざわざ各サービスのロゴ配布ページへ移動してダウンロード、フォルダを解凍してからようやくFigmaにドラッグアンドドロップして配置できます。
今回紹介する「Brandfetch」を使うと、すぐにロゴ画像をSVGでインポートできます。
Brandfetch

Brandfetchは、企業やサービスのブランド情報を検索して、すぐにインポート・参照できるプラグインです。
有名な企業はかなり網羅されていますし、だいたい検索すれば情報が出てきます。
表示されるブランド情報は下記の通りです。
- Logos:ロゴ画像
- Colors:ブランドカラー
- Fonts:ブランドフォント
- Images:その他の画像
基本的な使い方
使い方はBrandfetchを起動して、「Brandfetch」ウインドウを開きます。
タブが4つあって、基本的には「Search」タブで検索するのがメインです。

- Search:検索画面
- Explore:カテゴリごとに有名なブランドを探したり、ランダムでブランドを表示できる
- Editorial:Brandfetchが運営しているブログ記事が表示される
- Library:ここに表示されるリンクからアカウント登録をして、自身のブランドをBrandfetchに登録できる
検索ボックスにキーワードを入力すると、企業やサービスなどブランドが表示されます。

あとはブランド名をクリックすると、登録されているブランド情報が表示されるので、必要な情報をクリックでインポートしたりコピーします。

「Logos」にはロゴ画像が入っていて、「Colors」をクリックするとブランドカラーが表示されます。

ロゴ画像はクリックすればインポートされますし、ブランドカラーやフォントは要素を選択した状態でクリックすれば色やフォントが反映されます。


Figmaで文字色と背景色のコントラスト比をチェックするプラグイン「Contrast」
Figmaでプラグインを使わずに複数のレイヤー名を一括変更する方法
FigmaのSearch Menuを使用して必要なメニュー・コマンドをすばやく実行する
Figmaプラグインのインストール方法とその管理方法
Figmaでデザインを作成するときの基本的な操作方法
Figmaのフォント選択時に分かりやすくプレビューしてくれるプラグイン
Figmaのフレームを一瞬で整列するプラグイン「LilGrid」
Illustratorの選択系のツールを徹底的にまとめる
Figmaのプロトタイプ機能の基本|作成したデザインに実際に画面遷移を設定する
Sketchでデザインを作成するときの基本的な操作方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Backlogで2段階認証を設定後、SourceTreeでアカウントエラーが発生する場合の対処法
ATOKで登録した単語の品詞を、あとから一括で変更する方法
Hazelを使って、最近使用していないアプリケーションやフォルダにラベルを貼って可視化する
CSS Nite in Kobe, vol.39「ウェブサイトの分析とGoogleアナリティクス活用・カイゼンのノウハウを学ぼう」に参加してきました
CSSの読み込みで「its MIME type (‘text/html’) is not a supported stylesheet MIME type」エラーが表示されて読み込みができない場合の解決方法
Alfred 4のmacOS標準アプリとの連携機能(電卓・辞書・連絡先・iTunes)に関してのまとめ
Vue CLIで共通のSCSSファイルを読み込む方法
macOSのシステム環境設定「通知」の設定見直し
ATOKで特定辞書の単語登録画面を表示するKeyboard Maestroマクロ
Homebrew Caskを使うとき、「brew cask search」は効かないので「brew search」を使うようにする