Oh my god. I've been trying to solve an issue with my custom icon library with icons that are not fully using 16x16 space that I gave and when being put in the buttons using instance swap they would stretch! The absolute positioning with constraints is just what I needed! Lifesaver man.. I have never been so happy for a proportionally scalable icon 🤣🤗
Yes, the local layer variables can be assigned A layer value using a variable text string. Here's a video I put together hope it helps. ua-cam.com/video/Aj8uHPDrF-o/v-deo.html
Hey, great video! The only part I'm missing is how you are able to show the size property under the 'Layer'. I created my icon and made it a component. I have the different size variables setup but just can't figure out that part where you can switch the sizes. Thanks!
You can use modes to switch sizes, mode 1 = S, mode 2 = M, mode 3 = L, mode 4 = XL. Or you can use a matrix, Start with size scale, the loop then into a screen size scale. I am happy to help out more so feel free to reach out with me on LinkedIn or by email.
@@pixellink.design Thanks, I ended up setting the up sizes as different modes and that worked. The only thing I noticed is that it doesn't scale up the actual size of the icon evenly. So for instance if I have a round icon and the icon itself (not the container) is 14px and then I scale it up using one of the different size variables it scales to 16.8. I assume there's no way to scale it up so the size rounds up or down to a whole number is there? Thanks!
Why do you use autolayout and then absolut the vector item (icon)? You could have set up the vector to scale without it being into an autolayout frame, right?
Maximum and minimum constraints are only available with auto layout, that being said a fixed frame works also. I also have an update to this video coming out this week coving line icons.
Hey, great video!!! but as soon as I create a component of this icon and publish it then insert this icon in any other design file the scaling doesn't work! any idea how to fix it?
I didn't update the video, that might help. But it should work if both the collection and assets are published. Here is a link to my super icon video, ua-cam.com/video/cMI01L-WYwM/v-deo.htmlsi=iLoAPgTabhlTwt_z
Hey man, I appreciate this walkthrough, but this wasn't helpful to me as I am using FontAwesome's icon set in font form, not svg form. Do you think there is a way to successfully do this but using a font-based icon? The pros of using for icons is when FontAwesome release a new version, all I need to do is delete the exiting file, install the new font file, restart Figma and add the new Font Awesome version to their font library which updates all the icons we currently use in our system.
Unfortunately, figma doesn't have the ability to control fonts through variables yet, sounds like the system you have set up is a quite powerful system. It is more effective to use a font that can hold all your icons as symbols. That being said There are ways to create your icons through the vector graphics. Export your icon set. Import your icon set into a tool like fontforge, and then export your font forge icon set as symbols. Then you can can integrate your font symbols into your figma account. Hope this helps. If you need any help, feel free to reach out. Always happy to catch up and have a chat.
Unfortunately, figma doesn't have the ability to control fonts through variables yet, sounds like the system you have set up is a quite powerful system. It is more effective to use a font that can hold all your icons as symbols. That being said There are ways to create your icons through the vector graphics. Export your icon set. Import your icon set into a tool like fontforge, and then export your font forge icon set as symbols. Then you can can integrate your font symbols into your figma account. Hope this helps. If you need any help, feel free to reach out. Always happy to catch up and have a chat.
@@pixellink.designCheers mate! I really appreciate the time you took to respond to this. I will put it to my co worker to see if we can use this work around. We used to use vector "symbols" but myself and the UI dev suggested that the icon font was best so we changed to the icon font. But in terms of creating a robust DS with easy ways to change variables, it seems we may need to revert back :(
@@mbarr I wouldn't reverse back that quickly. The workaround with using a tool like font forage would be a reasonable workaround. I know that figma will be releasing font variables soon, so it may be worth holding out.
Legend, exactly what I was after for my design system. That's a fine beard you've got there too, good sir.
Thank you so much for this, i didn't use it in variables but i solved my problem of scaling icons with this video, thank you thank you!!
I am happy to hear that it helped ☺️
Thank you very helpful!
Oh my god. I've been trying to solve an issue with my custom icon library with icons that are not fully using 16x16 space that I gave and when being put in the buttons using instance swap they would stretch! The absolute positioning with constraints is just what I needed! Lifesaver man.. I have never been so happy for a proportionally scalable icon 🤣🤗
I am very happy it help 😊
Hey thanks for the tutorial! Im wondering, can these local layer variables be used as component properties? If so, how would that be achieved?
Yes, the local layer variables can be assigned A layer value using a variable text string. Here's a video I put together hope it helps.
ua-cam.com/video/Aj8uHPDrF-o/v-deo.html
Hey, great video! The only part I'm missing is how you are able to show the size property under the 'Layer'. I created my icon and made it a component. I have the different size variables setup but just can't figure out that part where you can switch the sizes. Thanks!
You can use modes to switch sizes, mode 1 = S, mode 2 = M, mode 3 = L, mode 4 = XL.
Or you can use a matrix,
Start with size scale, the loop then into a screen size scale.
I am happy to help out more so feel free to reach out with me on LinkedIn or by email.
@@pixellink.design Thanks, I ended up setting the up sizes as different modes and that worked. The only thing I noticed is that it doesn't scale up the actual size of the icon evenly. So for instance if I have a round icon and the icon itself (not the container) is 14px and then I scale it up using one of the different size variables it scales to 16.8. I assume there's no way to scale it up so the size rounds up or down to a whole number is there? Thanks!
Why do you use autolayout and then absolut the vector item (icon)? You could have set up the vector to scale without it being into an autolayout frame, right?
Maximum and minimum constraints are only available with auto layout, that being said a fixed frame works also.
I also have an update to this video coming out this week coving line icons.
Hey, great video!!! but as soon as I create a component of this icon and publish it then insert this icon in any other design file the scaling doesn't work! any idea how to fix it?
I didn't update the video, that might help. But it should work if both the collection and assets are published.
Here is a link to my super icon video, ua-cam.com/video/cMI01L-WYwM/v-deo.htmlsi=iLoAPgTabhlTwt_z
Hey man, I appreciate this walkthrough, but this wasn't helpful to me as I am using FontAwesome's icon set in font form, not svg form. Do you think there is a way to successfully do this but using a font-based icon? The pros of using for icons is when FontAwesome release a new version, all I need to do is delete the exiting file, install the new font file, restart Figma and add the new Font Awesome version to their font library which updates all the icons we currently use in our system.
Unfortunately, figma doesn't have the ability to control fonts through variables yet, sounds like the system you have set up is a quite powerful system. It is more effective to use a font that can hold all your icons as symbols.
That being said There are ways to create your icons through the vector graphics. Export your icon set. Import your icon set into a tool like fontforge, and then export your font forge icon set as symbols.
Then you can can integrate your font symbols into your figma account.
Hope this helps. If you need any help, feel free to reach out. Always happy to catch up and have a chat.
Unfortunately, figma doesn't have the ability to control fonts through variables yet, sounds like the system you have set up is a quite powerful system. It is more effective to use a font that can hold all your icons as symbols.
That being said There are ways to create your icons through the vector graphics. Export your icon set. Import your icon set into a tool like fontforge, and then export your font forge icon set as symbols.
Then you can can integrate your font symbols into your figma account.
Hope this helps. If you need any help, feel free to reach out. Always happy to catch up and have a chat.
@@pixellink.designCheers mate! I really appreciate the time you took to respond to this. I will put it to my co worker to see if we can use this work around. We used to use vector "symbols" but myself and the UI dev suggested that the icon font was best so we changed to the icon font. But in terms of creating a robust DS with easy ways to change variables, it seems we may need to revert back :(
@@mbarr I wouldn't reverse back that quickly. The workaround with using a tool like font forage would be a reasonable workaround. I know that figma will be releasing font variables soon, so it may be worth holding out.