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

.

Memo

です・ます調の文章でなくすみません。

当初の名残りです..pets

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で。

作者:Google Fonts
プラグインサイト:Material Symbols
参照:Material Symbols and Icons – Google Fonts


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

Material SymbolsをFigmaへ。Figma(フィグマ)のロゴ。

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

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

「Material Symbols」でサーチ。

インストールは上部メニューの「Resources(リソース)」から、「Plugins(プラグイン)」のパネルを開き、「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の使い方。表示されないとき。

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

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


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

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

Figma 関連メモ。

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

免責事項について

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