Include "Size" option about figma

[rektdeckard]

Hi @megaroeny, one of the reasons we ship our plugin assets unflattened is to allow greater design flexibility, IE the ability to recolor individual strokes and vector elements, and to tweak and modify icons. This is at odds with easily scaling the icons proportionally, but we think that it's a fair tradeoff to make to ask the designer to press "K" before scaling.

For the next release, we'll consider adding a flattened/unflattened option when importing from the plugin -- but I don't think manual sizing from within the plugin is the right solution. WDYT?

[rektdeckard]

Pixel-snapping is not really truly achievable with a variable-sized icon library, as I'm sure you know -- but we will be shipping a lot of subtle cleanup to improve snapping and sharpness at multiples of our key size (16px) in the next major release.

[megaroeny]

Awesome no worries! Appreciate the hard work on these. We're switching over to your iconography for our design system at Khan Academy soon, so I'm looking forward to it.

[rektdeckard]

So Glad to hear it! I watched a lot of your YouTube content when I was getting started as a dev 😄

[rektdeckard]

Unfortunately Figma's built-in flatten tool is poorly implemented and does not often achieve the desired result with imported SVGs, so we're working on a software solution within the plugin to bring in natively-flattened assets.

[rektdeckard]

@megaroeny yes. I think there are some quirks (you may have to deselect the icon first), but hit K, then resize the icon by dragging from a corner. This will scale the strokes proportionally with the size, as the icons do in the browser.

Unfortunately, you cannot use the Width and Height fields in the Design inspector; this is a known issue in Figma, which several plugins have been created to address.

[megaroeny]

@rektdeckard yup, totally get it! I could imagine it's a lot more work too. Another issue I saw (at least to me), was that when scaling the icons, a lot of times they aren't "pixel-fitted". So, for example, at 16 or 24px, sometimes edges end up at "sub-pixels" giving it a slightly blurry appearance. But having to pixel-fit every icon at every size is a lot of work. So again, I get it. 😄

[Simon-Renault]

This would be amazing and could fix this issue with duotones icons :

• The width of the stroke or the colour is often not maintained when using the icons as nested instances in a component. Only happens with duotone since the number of layers is inconsistent between icons. I believe flattening would solve that

[megaroeny]

Unfortunately Figma's built-in flatten tool is poorly implemented and does not often achieve the desired result with imported SVGs, so we're working on a software solution within the plugin to bring in natively-flattened assets.

I've noticed this as well. Sometimes if I want to flatten an icon, the vector paths get all messed up. 😦

[megaroeny]

@rektdeckard so am I doing this correctly in Figma for now, to represent how it renders in the browser?

1. Import in Figma (via the plugin let's say)
2. Press K to use the scale tool, and reduce to, let's say, 24x24
3. If I inspect the stroke width in Figma now, it is reduced to 1.5 pixels.

Is that how to accurately represent the way it scales via code/in the browser?

[megaroeny]

Unfortunately, you cannot use the Width and Height fields in the Design inspector; this is a known issue in Figma, which [several]

Perfect. Yup exactly what I do. But the inspector does have shortcuts now to resize by 0.5x, 0.75x, 2x, etc. So that's handy.

[rektdeckard]

Closing, as flattened icons solve resizing issues.