Inkscape convert image to stroke vector4/22/2024 ![]() Most of the designers tend to ignore or be unaware of these projects so I thought sharing this info might be helpful. While Figma failed to convert my github icon, the conversion was pretty straight forward with InkscapeĬountless times Inkscape or GIMP (both open source) saved my skin where Illustrator, Sketch, Photoshop or Figma failed to perform a specific task. My workaround was to export the icon as SVG and use Inkscape app to do the trick. Thanks and until Figma fixes this bug, hope this workaround can help! Plus once the “shattered points” occur, it seems there is no way to even manually fix them, you have to start over from scratch. It takes a few steps, but it’s better than having to manually re-draw your icon, because no one has time for that on a deadline. Which is a very clean, popular library of quality icons – so this odd fragmented “Shattered Glass” or “Warped Points” issue upon outlining strokes should not be happening. (Appreciate you Team Figma!!) I personally had this happen to me using freshly downloaded. ![]() I spoke to a head of product at Figma about this, they are definitely looking into it. Something about export to PDF seems to retain point integrity upon import to AI. Exporting the scaled large SVG from Figma didn’t seem to do the trick – the points still went wonky upon import into AI. Maybe this is why Scaling (again, using the Scale Tool, not merely manually enlarging) helps – because at the larger size, the stroke is enlarged as well – which seems to help it convert to outlines properly.īut definitely export from Figma as vector PDF, then import the PDF into AI. Not sure why this is happening, but it seems to especially happen frequently when using strokes smaller than 1 pt., such as. Voila – It should behave now in Figma: The united icon scales down + exports cleanly for your developers. Then Scale Tool it back down to the size you needed it. SVG to your desktop.ĭrag that new (still enlarged) SVG back into Figma. Your outlined stroke should now be united as one with your new clean icon, no more separate stroke. Select All again, go to Pathfinder > Under Shape Modes, Choose “Unite” Select All, then go to Object > Path > “Outline Stroke” in Adobe Illustrator. (For some reason, PDF seems to stabilize the vector points better than when exported from Figma as SVG.) Download the PDF to your desktop. ![]() If 5" doesn’t work, go back and try it again at 10" or however large you need until it works.) You must use the scale tool when enlarging…to ensure the stroke stays proportional to your originally chosen/needed stroke weight.Įxport that large-scaled stroked icon to vector PDF. (I scaled my 18px icon anywhere from 5-10 inches on screen before exporting. Use the SCALE TOOL to enlarge your stroked icon – really, really large on your monitor. In Figma, add the live editable stroke you need around your icon. ![]() Just deleted my old post, it wasn’t working in all scenarios.įound another better method that did work for me, try this instead: ![]()
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |