この記事の概要
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なら塗りあり、のイメージです。
Grade
Weightに似ていますが、Weightよりももう少し小さな変更用のプロパティだと思われます。
ダークモードで使用すると少し見え方が強すぎるため、-25を用いてほんの少しだけサイズや線幅を控えめにする……というイメージです。
ダークモードのカラーパレットを作る際、ライトモードよりも少し彩度を低くするのが定石なのと似ている気がします。
FigmaのプラグインではDark theme, Normal, Emphasisと記載されていますが、サイトでは-25, 0, 200と記載されています。
表記揺れでしょうか。
Optical size
同一のアイコンを単に拡大縮小をすると印象が変わってしまうため、それぞれのサイズにあわせた太さのバリエーションがあります。
Material Symbolsで削除されたプロパティ
styleのうち、filledとtwo-toneがなくなっていました。
filledに関してはFillプロパティで別個に切り出されたので、名前が変わっただけと言えるでしょう。
two-toneは……あまり使われていなかったのでしょうか？
個人的にはtwo-toneを使いたい場面がなかったため、なくなったことに問題は感じていません。
もし多用していた人はFillなどに置き換える必要がありそうです。
まとめ
- 新しくMaterial Symbolsになったことで、細かい調整がしやすくなった
- Weight, Grade, Optical size
- 基本的に進化した項目ばかりだけど、
two-toneだけは削除されている
最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！