How to use an IconWrapper in Figma
Вставка
- Опубліковано 28 лип 2024
- This is part of a larger Figma community file!
The problem it addresses is that nesting icons in our components means we can’t resize them 😬
But if we embed a single IconWrapper component that contains instances of our icons... all of a sudden we can resize any icon using variants. It's an incredible superpower when working in a design system 👍
We use this tactic extensively in Figma Academy - www.figma.academy
Thank you! I'm a total newbie to Figma so this tutorial had me going down a rabbit hole learning what all the different Figma terms meant! I've now emerged from the rabbit hole knowing a lot more than when I went in! Thank you again. I'll be checking out your other videos as well.
That's the measure of success right there :)
Wonerful workflow, thank you so much for this!
thank you so much for this! it was super helpful!
I'm so happy to see I'm not the only one trying to do something like this! 😆 Thank you for making this. 🙏
The other thing I need to check that I'm unsure of is if the icons we use will be pixel fitted when scaling like this.
For example, we are planning to use the Phosphor icon library. It would be awesome if I only needed to import one size in Figma and have those pixel-fit still at each size needed, when scaled within the wrapper.
As long as its an svg it’ll work fine
Awesome explanation! Straight forward without unnecessary babahah... love it! Thanks for making such as good quality videos!
Appreciate the encouragement :)
I was struggling with this for too long. This is a fantastic solution- thank you!
Good I'm glad it helped!
EXCELLENT! thank you a lot!
great, thank you ridd!
This channel is one of the best. Thank you for those very useful tips and guides.
Appreciate it!
Very informative i hope you get a lot of following man
Nice vid. Thank you so much.
You're welcome!
Question:
With new Figma updates is that possible to keep one source for icons and having multiple sizes and can swap them from one source to any size?
Great info, was recommended by a third-party to follow this method. I'm a little late to the party but have a question about the actual icon sizing. Typical scaling as you mentioned might be something like 16, 20, 24 for an 8-pixel grid. When doing this, those dimensions are not for the icon itself but rather the frame, right? I have my 16px icons wrapped in a 24px frame so to get S, M, L I'd have to use the frame sizes and do 24, 32, 40 right? Or is the 16 the frame size and not the actual icon size? Thanks!
Thankssss
Why not just use the scale feature?
How to deal multiple icons . Should we put all the icons in iconwrapper? In that case what would be the better naming convention
Nope you only need one icon in the IconWrapper! And it really doesn't matter which one it is. Because you can just hit "enter" to select the nested icon and then use the menu to change it to whatever icon you'd like.
Hey, I'm wondering about the layers under the icon. Do you "outline the stroke" to make it a single vector or do you keep using strokes? I've tried using strokes, but the icon wrapper doesn't maintain the stroke thickness consistently. When I resize it to a larger size, the stroke thickness stays the same as the original size instead of adjusting to the wrapper size. Any tips on that?
I'm wondering how it could work when you have a set of icons instead. I tried to follow your tutorial, but I'm not able to make it work in a large scale environment. Any tips?
When you say set of icons, are you talking about an icon library of components? In that case, by wrapping any icon component in an IconWrapper, you can automatically swap it with any other icon in your library (while still getting all the resizing functionality baked in)
Hi Ridd,
Your content really help me...but I don't know how to add 100 icons into single library?
I highly recommend checking out the "Phosphor" library + Figma plugin if you haven't already. I rely on that for the vast majority of my icons. Once you find one you want to use in your UI. Insert that into your icon library file and create a new component (I make sure they are all at 16px). That way, you can easily switch between all of your icons directly within your IconWrapper as long as any one of them is embedded. Here's a good article on using icons if you want to go deeper - www.uiprep.com/blog/ultimate-guide-to-using-icons-in-figma
Hey Ridd!
great video, this is really helpful.
one question I have is how do you structure a button in figma with the 2022 component properties new features.
When using the wrapper component it's impossible to create an icon swap property.
Any input on that subject will help as I'm trying to narrow our DS and wanted to use the wrapper component in the buttons but I don't wanna lose the icon swap option that's very comfortable.
Thanks!
So I would definitely keep the `Icon` swap at the parent level using component properties.
Unfortunately, until there's variant swapping... it doesn't make much sense to expose the IconWrapper at the parent level because you're never going to replace that with another component.
I do think variant swapping will be a thing (more here - twitter.com/Ridderingand/status/1526232023383150593) which will be awesome because then you can control both the size and the nested icon directly from the parent level
@@ridd thanks for the reply. I hope it's gonna work in the future as my developers are using wrappers too.
BTW the link you shared leads to "a page that doesn't exist"
@@edengildesign6423 Whoops lol twitter.com/Ridderingand/status/1526232023383150593?s=20&t=9nJmP3UV7SPq9eVEeX9JzA
How can we get this to work for icon fonts? Desperate here. Usiong icon fonts (FontAwesome) in our design system allows us to update all the icons quickly when they do new releases.
Ridd, I dont see how we can swap instances on the icon wrapper? Say I have a chevron thats wrapped around an icon wrapper, the sizing works well.
When I go to change that icon for another icon, the wrapper breaks and I can no longer resize the other icon. I dont see how that can be solved for with the icon wrapper I created.
Are you swapping the IconWrapper for an icon? Make sure you're hitting enter to select the icon itself and then swapping that layer for another icon (not the parent wrapper). If you do that (and your layer name in the IconWrapper is just "Icon") then it should work.
How do you persist style overrides for icons with variants using the "naming your icon layer 'icon'" as you showed @ 5:00? I tried to do this method, but can't get it to keep color override when switching to an icon with variants.
It's almost always an issue with naming if you're seeing this behavior. Make sure your icons have consistent layer names and that within your IconWrapper you are overriding the nested icon name - twitter.com/Ridderingand/status/1474401366604873728?s=20
Lmk if that unlocks something or not!
@@ridd ty for the reply, i'll look into this more and let you know :)
I can successfully make the icon wrapper but i think im failing at making icons because they get strectched and lose their proportions when put into the wrapper. Would love some advice :) (im pretty sure i just need help with icon design / making my icon into a component)
Without seeing, my hunch is that perhaps your icons arent all in uniform square frames? Double check that and feel free to send a file over :)
Great concept, unfortunately IconWrapper will not maintain icon color overrides between different states (variants: enabled, hover, disabled, etc.) once the size or icon itself is swapped. Even with all know override preservation techniques-meticulously matching all layer names down to the flat vector AND having the icon set an unused tertiary color. Desired icon color is maintained only if size is changed within the same state (not changed between states), or the icon is not changed within your component. e.g:
• Enabled + icon size md -to- Enabled + icon size lg = ok
• Enabled + icon size md -to- Hover + icon size md = ok
• Enabled + icon size md -to- Hover + icon size lg = broken (defaults to icon set color)
• Not swapping the icon in the component = ok
As it stands the limitations severely restrict use cases. If anyone finds a fix to this please share, as this technique working to full effect would be amazing!
You’re a god.
Hah idk about that but I’m glad it helped 😇
This is good! but i have a problem which is....my stroke weight is also changing according to it? what to do?
I definitely recommend "flattening" your icons to a single layer (I think that's cmd + opt + o). This way they scale proportionately AND your color overrides will always persist because you'll never be in a situation where you're swapping one icon with 1 layer with another icon that has multiple layers.
@@ridd Great! Thanks
Im running into issues without the colors persisting for the icon. It seems like as soon as I change the size it will revert to its icon root name.
Edit: I solved the styles persist issue and this strategy can still work.
@Harshesh Sayani yes I figured it out
When he says "break it" at 5:17, is he detaching the instance? How do you break it? I'm a noob, go easy.
yeah Detach instance
wasted a lot of time before stumbling on this video. now I need to find out if flattening icons will cause issues with definition/sharpness (i.e. will it pixelate)
Too good thankyou @ridd