Make Icon Library in Figma in Only 5 min
Вставка
- Опубліковано 2 гру 2020
- → PLUGIN ←
www.figma.com/community/plugi...
→ Alvik ←
alvik.io
→ Watch me design Alvik ←
• Bootstrapping a SaaS S...
→ Listen to the Design Party Podcast ←
designpartypodcast.com
→ Design Party Digest ←
newsletter.designpartypodcast...
→ Let's connect ←
Posts: posts.cv/apek
Website: apek.me
→ Support me ←
www.buymeacoffee.com/antonijapek
I had to do a library of more than 1000 icons, thanks to you I did this in less than 5 min, you deserve the world! thanks a lot!!
Thank you so much for the amazing plugin! I tried and created a library of a huge number of icons in just 5 minutes!!!! 😄
4:45 I feel the pain. Thanks for writing this plugin. It makes working on design projects soooooooooooooooooooooooooooo much smoother.
Amazing! Thank you so much for sharing!!! Loving it.
Legend! Such a good video short and snappy! Will help my work flow so much! Thank you : )
Nice to hear 😁😁
this is actually what i need for years, thank you!
this video is so helpful, i don't know why i keep coming back to this!
Been scratching my head for a very long time, Now found the holy grail! Thank you for the well made and crisp video!
This is fabulous! Really thannks is great and easy to use. You just win one new subscriber. ❤️
This is amazing .... reduces days of work
i need more amazing videos from you
Omg life saver! I’ve been putting it off all day 😆 I will give this a go tonight
This is incredible. THANK YOU.
Wonderful! Thank you so much.
Exactly what i was looking for! thank you, subscribed :)
Using it! Thank you a lot
Antonija.....you saved me almost a day's worth of work. I have to import about 3000 icons today into Figma for my job...I can not thank you enough 🖤
Happy to help 😋
Really great!! Saved me so much time! Thank you!!
If icons are designed 24x24 and you scale them down to 16x16 (you will still need to do manual work and remove some details, lines and adjust stroke) Not all icons that are designed 24x24 will look crisp and clear in 16x16. But a great plugin for setting up a library fast :) good job!
That is true. Better to use icons designed for a certain size but it all depends what is the format of the icons. Sometimes scaling works.
Fantastic. Nice plugin, nice video. Thanks you!!!
Thank you again! Love your videos!
I love your energy! New subscriber 🙌🏿
Great plugin! thanks a lot.
Thank you for this video and your plugin 👍
Thank Yuo soo much Antonija 🙏😊 I just have my first steps in figma - tutorials like this are very helpfoul ❤ Good luck with your chanel - looks very promissing 💯
You're so welcome!
awesome Antonija, thank you so much
great one! thanks a lot 👍🎉😊
Can't seem to find this plugin please give me a link
Amazing! thank you so so much
Thank you so much for making & sharing the plugin!
My pleasure!
Simply Super!!! Thank you soo much
Thanks Antonija, very useful ! Subscribed!
OMG! This video saved my life. Thank you so much!
Thank you!!! This is AMAZING!!!
thank u Miss Lady you help me so much today your video is the best 😁 !
Love you!! thanks for this video
Thanks for this Antonija!
This is amazing Thank youu
Im so glad I found your channel
You're amazing thank you!
Awesome! You just saved me so much work, thank you :)
Glad I could help!
Awesome! Thanks for share!
Awesome plugin!
Thanks I use u plug in all the time 😊
Thanks so much, you are amazing!
Hey,
Antonija, your plugin is awesome!
Interesting. I guess I would import one type and batch rename like circle / solid. Then same for all other types. (circle / regular, circle / outline)
Nice thanks you so much.
I love you so much, thanks for this tutorial
Thank you Antonija, you are my hero!
brutal!!! gracias! ;)
That's wonderful, i tried it and it worked perfectly. But when i delete the icons from the board, the one i created in in ''Assets'' also deletes, it doesn't stay. What can i do please?
THANK YOUUUUUU❤
Great Tutorial
Cool! Thanks!!!
Mega Dope!!
So simple and easy
Thanks so much for this video
It was really helpful 😌😌😌🤝🤝
Just started playing around with figma today.... I’m not sure what I just did but thank you lol!
No problem, glad my plugin helped
Thanks for the video. Am I right that we shouldn't do one icon component with all the icons inside it as a variants?
I mean you can do variants but then you lose drag and hot swap. Whatever feels better and easier for you tbh 🤷♀️
great video!
OMG!!!! Thank you
Hey, that looks awesome, what is your plugin called?
You never mentioned it anywhere
Thanks in advance.!
It's in description. Icon Grid Maker
One question, I want to use the icons inside another component with 2 variants (dark e light mode).
I create an instance to choose the icon, the problem is the colors, because when I change the icon, the color doesn't is the same as the component definition.
www.figma.com/community/file/912992763307072611
Preserving colors seems to be tricky in Figma
Danke!
Thank you for the video :) The plugin looks quite handy. What is the name of it?
Icon Grid Maker
Game changer
😙 Thank you, thank you
Curious to know if this icon maker plug-in is sharable with others? If I updated some of the icons and added new ones, would others get the updates if they re-downloaded my pack?
This video misled me... I thought I would be able to upload an icon library for other people to download via figma... but it just puts a frame behind the icon you drew.... I would've called it an icon framer rather than an icon library... because I still am not able to easily share icons with others or update the library to have consistency overtime through multiple users in any meaningful way.
This is a utility to help you make a file with icons that you can export aka share as a library within your team (libraries are available on paid tiers of Figma of course)
you are the best
great job ;)
Thanks "Antonija Pek" your trick really help out ..................
Does this mean that we'll have to paste these icons components into every figma file we want to use them in? How does this compare to using the Feather figma Plugin for example?
If you don’t have paid plan that means you can’t publish libraries so yes, copy paste is the only way to go. I haven’t tried that plugin
Thanks for the video and the plugin! I found it today and it saved me a ton of time. But I'm trying to wrap my head around the best way to handle coloring the icons. In the video you just give all the vectors a red color, but I'm finding that when I use the components and i'm trying to change the color with overrides, it doesn't go so well. Since each icon can have a different number of vectors, if I set the color overrides and then switch the icon, if the new icon has more vectors, the new vectors have the default color, not the overridden color. How can I reliably color these icon components so even when I swap out icons, the color remains consistent? Would I use the vectors as a mask for a color rectangle? That's how I used to do things in sketch, but it's kind of a mess. Would I group the vectors? Maybe that helps... Any ideas would be appreciated.
It's a little bit hard to visualize what is happening with colors in your situation so if you can share a link or screen record with me I might be able to help
I've also tried the same thing without grouping the vectors and then just applying the color override directly to the vectors themselves in the instance. Same behavior.
I am hoping for a way that I can set a color override for an entire instance of an icon so no matter which icon component I swap in, the whole thing takes the color override. This is especially important for variants which contain icons.
@@JakeDeGrootNY but if you apply a color style to icon itself it should cover all inside. I used it like that and never noticed problems
@@antonijapek How would I apply it to the icon itself? When I select the instance of the icon component, I can add a fill (which colors the background) or a stroke (which colors the square border around the icon).
Hvala mnogo za plugin! :)
Nema problema 🙂
thank you! How about creating a library icon with option Bold/light stroke or outline/filled icon? Could you please make another video for this content?
You could make that with a few clicks without any plugin. This is more for making a library fast. Even without this plugin Figma has new features that can help creating an icon library from svgs quite fast
hey bro, can you tell me what you font used on the thumbnail.
It's Noway
Hi. This is really great thing to simplify your life. But if you don't mind I would like to know how did you get all those icons all at once in one place? I mean if I want to do the same thing but with different set of icons, for example Iconify, how do I bring them all together in one frame? Manually or there is some other way? Thanks in advance
If icons are downloadable, then you can just drag the folder of svgs to Figma
@@antonijapek Okay, thank you
Hi Antonija, I am very new to Figma and I struggle to download the SVG file in order to drop it in Figma. Could you please explain HOW i download the SVG file from your Community page?
There is no SVG file at my community page. Usually free (or paid) icon packs you can Google out come in folders and one of these might be SVG
Nice work :-) I would love it if the icons were set to scale/scale in the frame..
They do you need to remove that redundant frame.
The plugin is not selecting the redundant frame in the latest version of figma.
select all then hit enter 🙂
Nuts!
Can we give group name icons or components in Library?
Not sure I follow this question
hi Antonija, i am following this tutorial, and search icon grid maker in figma, i couldn't find it, is it approved by figma yet ?
oh i can find it now when i search under your name, thanks
Where can i download the icons svg folder?
If icon creator provided that, it’s usually behind some download button 🤷♀️
The pug in is awesome, however, is there a possibility to create some option not to resize or resize with the aspect ration
Can you please explain a bit more?
@@antonijapek I downloaded fontawesome icons pack and after I push that to figma, the icons are framed with constant height of 512 px but varied width, and the vector child layers are varied... now the plugin is good when we have square sized frames, now I just want to resize the frames to constant WxH and the vectors should also scale respectively... but with the plugin When the child vector resizes the aspect ration gone and the icon sizes and shapes are messed... now used or frame resize plugin to change the width of the parent frame and manually resizing and aligning to the new frames.... this is the background... in info you can share to achieve the above requirement? I'm new to figma... thanks for the response.
Yep, that is exactly the problem I faced with Fontawesome and this plugin. it's not resizing as aspect ratio.
@@Designer.Shajeeb i solved it by adding frame to all the icons... then reframing all with frame all plug in then select child frames resize with aspect ratio on... but not an easy choice
Thanks for sharing
can we mask a folder with multiple objects in it
Sure, but why would you do it?
life is easy when the person who put the icon pack together made the icon properly, meaning the stroke is the same width in all icons and the size of the icons are the same. from a developers perspective i would ask the designer to convert all strokes to fill (outline stroke) because the fill can inherit text color set for the web page. this eliminates the need for css overrides which is always a good thing. an icon that has outlined strokes also scales properly, like a picture. with strokes, when you make the icon 3x larger the stroke shrinks by 3. developer hell :D
Very good observation. Strokes can be made into unified vector in Figma quite easily. I need to check whether it can be done in a batch action, then this step would complete the workflow for making the icon library
The icons become 16x16 and are not resized proportionally. How do I fix that?
Try with different constraints. You will have to try with different options to make it work. Every set is a bit different so it might not work properly
Hey
I have one question
How to get the size of two icons equal??
Tow icon equal size please
Do you mean the size of the frame or?
@@antonijapek
No icons
Like search icon home icon
@@digitalarvind1 I didn't resize them, they are just placed in 24x24 frame
Hi Antonija, you are a very likeable person with great UA-cam content :). Just a general question regarding changing icon sizes: Isn't it better to scale icons than just resizing them? Because the icon thickness stays and looks too thick when small at 16x16 e.g. or too thin at 64x64. What do you think? Thank you!! Keep up the great work :)
Hey. Thanks for the the kind words. Default size really depends on icon pack, if you believe they look visually better in different size - go for it!
@@antonijapek ok, will do. Thank you 😊
How to download all that icons together?
Can you explain a but more what are you trying to achieve?
thanks a lot
Please explain a little bit more. The alignment please and how to make customised ones
I need a bit more info 😢 tell me what do you wanna achieve
can anyone help to find the location of this folder where we have all icons, I am new to this design world
When you download icons you should have some folder with all of them, in SVG format preferably.
@@antonijapek thankyou for your quick response
Is the plugin ready? 👀
Of course. Check description
I can't find Icon grid maker in Menu.:'(
Make sure you go to plugins and search there
im having issues downloading plug in folder. Did anyone else have issue or can help?
What plugin folder? Can you explain a bit more?
yup, this is why I love the UX community
A W E S O M E !!
🙌🏻🙏🏻