Make Icon Library in Figma in Only 5 min
HTML-код
- Опубликовано: 1 окт 2024
- → PLUGIN ←
www.figma.com/...
→ Alvik ←
alvik.io
→ Watch me design Alvik ←
• Bootstrapping a SaaS S...
→ Listen to the Design Party Podcast ←
designpartypod...
→ Design Party Digest ←
newsletter.des...
→ Let's connect ←
Posts: posts.cv/apek
Website: apek.me
→ Support me ←
www.buymeacoff...
Can't seem to find this plugin please give me a link
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 😋
Shift Enter not working in mac...any other option?
wtf is with the loud circus music
Sorry. I have a bad music taste 🤷♀️
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?
Been scratching my head for a very long time, Now found the holy grail! Thank you for the well made and crisp video!
Thank you for this video and your plugin 👍
Thanks for this Antonija!
Using it! Thank you a lot
thank u Miss Lady you help me so much today your video is the best 😁 !
Nice thanks you so much.
Thanks I use u plug in all the time 😊
4:45 I feel the pain. Thanks for writing this plugin. It makes working on design projects soooooooooooooooooooooooooooo much smoother.
This is amazing Thank youu
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
Love you!! thanks for this video
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
Great Tutorial
😘😘😘😘😘💋💋💋💋💋
Thanks for sharing
Mega Dope!!
OMG!!!! Thank you
😙 Thank you, thank you
Exactly what i was looking for! thank you, subscribed :)
The plugin is not selecting the redundant frame in the latest version of figma.
select all then hit enter 🙂
Nuts!
THANK YOUUUUUU❤
great video!
thanks a lot
you are the best
Cool! Thanks!!!
Game changer
This is amazing .... reduces days of work
i need more amazing videos from you
Tried out that plug-in. Used it for a day, deleted it. It needs some work.
It would be nice to hear what improvements you need so I can work on them 😅
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.
omg
im having issues downloading plug in folder. Did anyone else have issue or can help?
What plugin folder? Can you explain a bit more?
Thanks so much for this video
It was really helpful 😌😌😌🤝🤝
🙌🏻🙏🏻
Can we give group name icons or components in Library?
Not sure I follow this question
Awesome! You just saved me so much work, thank you :)
Glad I could help!
I could not find this plugin .. and I needed it, made me really sad
If you just go to plugins and write Icon Grid Maker it will show up
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)
can we mask a folder with multiple objects in it
Sure, but why would you do it?
Thanks Antonija, very useful ! Subscribed!
I love you so much, thanks for this tutorial
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 🤷♀️
I created it in the same way as variants, but with over 160 icons it became incredibly slow when I wanted to add or edit a variant. Also, variants are not sorted by letter and there is no preview when selecting the instance. I have now found a solution for myself. Partly as shown in the video here (thanks for the great video ), but I don't use a plugin for alignment, but rather autolayout with wrapping. 😃
OMG! This video saved my life. Thank you so much!
Thank you so much for the amazing plugin! I tried and created a library of a huge number of icons in just 5 minutes!!!! 😄
Thanks "Antonija Pek" your trick really help out ..................
Wonderful! Thank you so much.
Really great!! Saved me so much time! Thank you!!
Where can i download the icons svg folder?
If icon creator provided that, it’s usually behind some download button 🤷♀️
I can't find Icon grid maker in Menu.:'(
Make sure you go to plugins and search there
Fantastic. Nice plugin, nice video. Thanks you!!!
Danke!
Thank you Antonija, you are my hero!
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
How to download all that icons together?
Can you explain a but more what are you trying to achieve?
Legend! Such a good video short and snappy! Will help my work flow so much! Thank you : )
Nice to hear 😁😁
Is the plugin ready? 👀
Of course. Check description
Amazing! Thank you so much for sharing!!! Loving it.
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.
@@stuartrussell2859 Your comment saved my life. I started to select one by one, but now is everything done. I love you so much bro
You're amazing thank you!
A W E S O M E !!
Omg life saver! I’ve been putting it off all day 😆 I will give this a go tonight
Thanks so much, you are amazing!
Great plugin! thanks a lot.
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
Simply Super!!! Thank you soo much
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!
Amazing! thank you so so much
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
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
Thank you!!! This is AMAZING!!!
Awesome! Thanks for share!
Hey, that looks awesome, what is your plugin called?
You never mentioned it anywhere
Thanks in advance.!
It's in description. Icon Grid Maker
Thank you again! Love your videos!
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
So simple and easy
love your videos, recently found you out.. consider subscribed!
Awesome plugin!
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!!
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
brutal!!! gracias! ;)
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!
my icons stretch to the size of the frame and loose aspect ratio. But seeing the video they are placed in the center.
Try to use different constraints to achieve the result you expect. You can also share your Figma link with me so we can debug it together.
@@antonijapek I will try a couple of options, but my icons are resized to have same width and height as frame size. Original SVG files differ in height and width.
same here
@@sobeck6900 founded another plugin to do it.
@@justinasbagdonas7762 I would be more than happy to check what happens with the icons if you would share the file. Maybe the plugin requires some refining as well. :)
Thank you so much for making & sharing the plugin!
My pleasure!
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
This is fabulous! Really thannks is great and easy to use. You just win one new subscriber. ❤️
great job ;)
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
Im so glad I found your channel
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
awesome Antonija, thank you so much
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
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)
yup, this is why I love the UX community