こんにちは、chitopeと申します。
グラフィックデザイナー、WEBデザイナーを経て、現在はUIデザイナーをしています。
今回はFigmaでmaterial iconを使用した時の失敗談と、対応方法をお話します！
まず、Google Material Icons。
Material Designを提唱したGoogleが配布してくれているアイコン集です。
アイコンの状態も下記から選べるので、トンマナをページに合わせられて便利。
Outlined / Filled / Rounded / Sharp / Two Tone
このページから欲しいアイコンを探してSVGファイルをDLし、figmaにインポートして普段仕事をしています。
が、このファイルそのままでfigmaで色変更を行うと、欲しくないところまで色が変わります！
矢印本体の色が変わって欲しいのに、背景部分が白くなる。
塗りを設定すると、意図していないところの色が変わっちゃう。
こんな時は、レイヤーから「Vector」レイヤーを削除すれば大丈夫。
こいつに気が付かずたくさんコンポーネント化してしまって、後から削除の対応に追われて無駄に時間を食ってしまいました。
これで欲しい画面がやっとできました。よかった。
それでは皆様、よきfigmaライフを～！
このアプリ画面は適当に作成しました。
入会申込
ログイン
