Material SymbolsをFigmaへ。インストールしてすぐに使える。デザイナー、コーチ、ディレクター / 井川

igawa design.

Memo

Material SymbolsをFigmaへ。すぐに使えるインストール方法。

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

GooleのアイコンフォントをFigmaへ。Material Symbols。

Google Fontsから手軽に使えるアイコンフォント「Material Symbols」が、デザインツール「Figma」のプラグインとして配布されている。

Googleの案内では現時点、2,500以上のアイコンが使えるらしい。
かつ「Outlined(輪郭)」、「Rounded(角丸)」、「Sharp(シャープ)」と3つのスタイルが用意されている。

Googleのアイコン。Material Symbols。

petsMaterial Symbols

クオリティや統一感が保たれているので、WebサイトやアプリなどのUI/UXデザインに活用できる。

Googleのアイコン。Google Material IconsをFigmaで。

参照:Material Symbols and Icons – Google Fonts
(※スクショはダークモード表示時のもの。)

Figmaのプラグインサイト:Material Symbols
By Google Fonts


Figmaへインストールする方法と使い方。

Material SymbolsをFigmaへ。Figmaのロゴ。

インストールは上記プラグインサイト、もしくはFigmaのプラグイン検索ボックスから「Material Symbols」ですぐに可能。

Figmaからインストールする場合。

「Material Symbols」でサーチ。

「Material Symbols」が表示されたら、クリックすると画面が切り替わる。

Googleのアイコン。Google Material IconsをFigmaで。

右横の三点リーダーの「Save(保存)」からインストールができる。

Material Symbolsのインストール方法。

インストール完了。

Material Symbols and IconsのFigmaへのインストール方法。

インストールしない場合。

インストールをせずに使用する場合は、「Material Symbols」パネルの「Run(実行)」をクリック。

Material Symbols and IconsのFigmaへのインストール方法。


「Material Symbols」パネルの開き方

「Main menu(メインメニュー)」 > 「Plugins(プラグイン)」 > 「Material Symbols」で開く。

右クリックメニューからでも可。

Material SymbolsをFigmaへ。すぐに使えるインストール方法。

Material Symbolsプラグインの使い方。
  1. Material Symbolsパネルの検索バーからアイコンを探す。
  2. 検索結果で表示されたアイコンをクリックで選択する。
  3. Figmaのキャンバス上にアイコンが表示される。

その後は、Figma右横のプロパティパネルとMaterial Symbolsのパネルを使って調整する。

  • Designパネルから大きさや色を変えられる。大きさはドラッグでも可能。
  • Material Symbolsのパネルで、Fill(塗り)やWeight(太さ)も変えられる。

例)

petsFillがOnとOff、Weightがデフォルトと700の場合。それぞれ違った印象となる。

Material Symbols and IconsのFigmaへのインストール方法。

関連:Material Symbols and Iconsの使い方。表示されないとき。


Figma 関連メモ。
デザインツールFigmaのロゴ。
使い方 & プラグインなど。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。