Figma material icons. Components library
How I switched the bot-mode on and converted hundreds of material icons to support your every project
Those days I was a freelancer. Once I started shaping my pixels in Figma and soon noticed how I was repeating a lot of the same movements every time I started a new project. Not meaning the recreation of buttons or inputs (although it was this routine that led me to the idea to develop quick-starting design system for Figma).
🔣 Icons! Whenever I started a new project to a new client, I always dragged the same icons onto artboards. I browsed to MaterialDesignIcons. Searched e.g. for the “ ❌” icon, or “ 🔎”, whatever. Then downloaded. Dragged. Dropped. Once again. Repeat…
⛔ Stop!
Suddenly, I realized something. Why not to just prepare something like universal icons library for all occasions? Thus, some time ago the first set of 300+ material icons appeared.
🔃 998 icons → 998 repeats
Well, how about developing the most extensive material icon library for Figma? To repeat 998 times: drag’n’drop each SVG from the browser, converting into frame, alignment, renaming, color masking, forming a component. It seems I’ve forgotten nothing and now I’m switching on the bot-mode 👊
✍ The tutorial
1️⃣ Preparing icon group template
I’ve decided to improve the experience of mine since I’ve made the first version of 300+ icons. So I pre-prepared a grid of empty frames in advance, aligned it vertically in two columns. I believe this way will be most convenient to determine images visually. Then I’ve duplicated the grid and renamed every frame. 998 times → ⌘-C → ⌘-V:
2️⃣ Selecting to push backwards
Since each cell-frame already contains a color component made for overlay the mask, it is necessary to push SVG image backwards. 998 clicks ✨ more holding the Shift-key (I probably should count +10% more for misclicks) :
3️⃣ Replacing names for better organization
Fortunately, the name of the inserted icon kept well, so it can be cut now and moved upstairs to the frame name. Suddenly I’ve discovered the perfectionist inside me, so I require the ideal organization to operate and switch with ease between icons via Instance menu. Thus, this icon kit will be very convenient to use, because I equipped each category with emoji-icon:
4️⃣ Applying color masks
The idea based of new material icons library to obtain the functionality to repaint all the icons at once through the master-color component. To perform this, there was already placed the color duplicate in each pre-prepared empty cell. Thanks, Pablo, worked well with Figma as in Sketch. It only remains to set the color mask (998 masking 🗿 combos performed in here)…
5️⃣ Converting to a component
This is the easiest level when you’re almost done. Just 998 conversions into the component (I hit Ctrl-Alt-K combo to convert). You can even play the game by selecting objects in variety of order: up & down, zigzag or checkered:
6️⃣ You can’t just make it perfect
When I was somewhere at the middle I was hit by lightning as the idea came. So, what if to place a background component for each icon. For purposes of adding shadows to all the bundle, or converting the icons pack into iconic buttons pack, or just shape the corner radius at once for all objects. In general, I’ve spent a few hours more doing my next 998 copy-pastings in order to get this effect:
🏁 The summary
At least three clicks you are about to execute at the each stage when following those steps. So let’s calculate: 6 stages × 3 clicks or keypresses × 998 times = at least 17964 repeats to produce
→ 998 material icons library for Figma 📥
Yes, indeed I’d charge for this a little bit. Because it’s your must-have material icon starter pack for every prototype in Figma. Equipped with nested backgrounds to customize thousands icons at once in every of 40 categories
Thanks for 👓
Made with 💗 to my family
Created with Material prototyping system 🔨 for Figma
❶ Explore the system → http://setproduct.com/material
❷ Components overview → http://setproduct.com/material/components
❸ More videos → http://setproduct.com/material/videos
❹ Purchase & download → http://setproduct.com/material/download
❺ 1000+ material icons → http://setproduct.com/material/icons_pro
