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」をクリックするとブランドカラーが表示されます。

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


Illustratorで文字をオブジェクトの上下中央揃えにする2つの方法
Sketchのレイヤー周りの基本操作|グループ化やマスク、オブジェクトのロックや表示切り替えなどのレイヤーでできること
今から始めるUIデザインツールSketch入門 Sketchの特徴と使う理由
Figmaのテキストやオブジェクトを斜めに変形・旋回させるプラグイン「SkewDat」
Figmaのサイズの大きい画像を縮小せずにインポートするプラグイン「Insert Big Image」
記事内の画像にマウスホバーした時に画像が半透明になる意味はあるのか?
Figmaのプロトタイプ機能の基本|作成したデザインに実際に画面遷移を設定する
Sketchのパス周りの基本操作|基本的な描画方法からベクターツールと直線ツールの違いまで
Sketchの図形周りの基本操作|図形の作成方法から描画に関する細かい部分まで
Sketchのライブラリアップデートの方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
.htaccessを使って、httpからhttpsへリダイレクトする設定方法
高機能で定番なテキストエディタ「Jedit Ω」で自分好みの編集を実現する
Visual Studio Codeのエクスプローラー上でファイル・フォルダの複製ができるようになる拡張機能「Duplicate action」
Google Chromeのブックマークを綺麗に整理するコツ
デモを見やすく分かりやすくするためのMouseposéオススメの設定
Alfred 4でスニペットを作成して使用する方法
ポモドーロテクニックを実践するために役立つデバイスごとのオススメアプリ
備忘録として自分のした事をまとめるブログを始めました – ブログ作成の経緯と方向性
Path Finder 8で使えるツールバーの項目一覧