LoginSignup
45
10

More than 1 year has passed since last update.

Material Design IconsがMaterial Symbolsに進化していた

Last updated at Posted at 2022-04-21

この記事の概要

Google FontsのTwitterアカウントにて、何やら気になる告知がありました。
どうやらMaterial Designにおけるアイコングラフィーがアップデートされたようです。

変更点について簡単にまとめてみました。

追記:現実的な導入方法はこちらの記事でまとめています。

Material SymbolsとMaterial Design Iconsの違い

既にGoogle Fontsのサイトはアップデートされています。
過去のページは見れませんが、Figmaのコミュニティファイルとプラグインを並べて見ると比較ができそうです。

Material Symbols

Figmaのプラグインが公開されています。

起動するとこのような見た目。

変更できるプロパティは以下の5つです。

  • Style
    • Outlined
    • Rounded
    • Sharp
  • Weight
    • 100
    • 200
    • 300
    • 400
    • 500
    • 600
    • 700
  • Fill
    • On
    • Off
  • Grade
    • -25 (Dark theme)
    • 0 (Normal)
    • 200 (Emphasis)
  • Optical size
    • 20dp
    • 24dp
    • 40dp
    • 48dp

Material Design Icons

こちらはプラグインではなくファイルです。
ライブラリとして使う用途です。

変更できるプロパティは1つのみです。

  • Style
    • filled
    • outlined
    • rounded
    • sharp
    • two-tone

Material Symbolsで新たに追加されたプロパティ

Weight

font-weightと同じようなイメージです。
数字が小さくなれば細く、大きくなれば太くなります。

Fill

Offなら線だけ、Onなら塗りあり、のイメージです。

image.png

Grade

Weightに似ていますが、Weightよりももう少し小さな変更用のプロパティだと思われます。
ダークモードで使用すると少し見え方が強すぎるため、-25を用いてほんの少しだけサイズや線幅を控えめにする……というイメージです。

ダークモードのカラーパレットを作る際、ライトモードよりも少し彩度を低くするのが定石なのと似ている気がします。

FigmaのプラグインではDark theme, Normal, Emphasisと記載されていますが、サイトでは-25, 0, 200と記載されています。
表記揺れでしょうか。

Optical size

同一のアイコンを単に拡大縮小をすると印象が変わってしまうため、それぞれのサイズにあわせた太さのバリエーションがあります。

Material Symbolsで削除されたプロパティ

styleのうち、filledtwo-toneがなくなっていました。

filledに関してはFillプロパティで別個に切り出されたので、名前が変わっただけと言えるでしょう。
two-toneは……あまり使われていなかったのでしょうか?
個人的にはtwo-toneを使いたい場面がなかったため、なくなったことに問題は感じていません。
もし多用していた人はFillなどに置き換える必要がありそうです。

まとめ

  • 新しくMaterial Symbolsになったことで、細かい調整がしやすくなった
    • Weight, Grade, Optical size
  • 基本的に進化した項目ばかりだけど、two-toneだけは削除されている

最後まで読んでくださってありがとうございます!
Twitterでも情報を発信しているので、良かったらフォローお願いします!

45
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
45
10