Recently I finished a large redesign project at my company, SimilarWeb. In this project I had to create (and constantly update) an iconfont made out of SVGs that I exported from my Photoshop designs.
In this post I’ll explain how I used the “PSD layers to SVG” script to drastically improve my workflow.
When working on a large design project, I like to create a separate PSD containing all the shapes and icons that I want to export as SVGs.
I recommend putting this PSD in a separate folder inside the main project folder (i.e [projectname]/svgs/svgs.psd). The script will later export the SVGs to this folder, so you’ll want to get something like this at the end:
In the SVG PSD, make sure of the following:
- Name the layers properly (with names that you’d like to export them as), and make sure you have “.svg” at the end.
For renaming multiple layers and adding the “.svg” ending I used a $10 plugin called Renamy.
I made a keyboard shortcut for it. So to rename I chose the layers I wanted, entered the keyboard shortcut (CMD+Alt+R in my case), and then typed *.svg and pressed Enter. There is also a free batch layer renaming tool by captain awesome that came out recently. It really looks awesome but I didn’t try it yet.
- Make sure each vector shape you have is a closed vector.
- Make sure all shapes in the icon are merged.
- All the points of that shape are selected: Choose the vector selection tool (or click A), then choose the shape to see its vector points, then select all of the shapes points by clicking and dragging the tool, and then exit the selection tool. Its not as long as it seems, just a second.
Now the only thing left is to export. I’ve been using the PSD to SVG script that David and I put together. You’re welcome to download it for free.
I made a shortcut for it cmd+alt+e.
Updating and maintaining the doc
You’re probably asking yourself: “Will the script re-export all my SVGs every time I have a new asset?”
Well, after I export all the icons I want, I make sure to remove the “g” at the end of the layer names (i.e “coolicon.svg” –> “coolicon.sv”). I do it by simply going to the top icon and editing its name and then clicking “tab” and “backspace” over and over until I’ve changed all the icon names I need. Once the layer name ending is “.sv” and not “.svg” the script wont recognise it next time I run it.
Creating the iconfont
I save the iconfont each time in a shared “slices” folder. Then I make sure to notify the devs when I’ve updated the iconfont so they can update it in the code.
That’s it. If you have any suggestions or questions about this workflow – feel free to ask here in the comments.
More UX & Frontend goodness
- Love what you do, take massive action, and prosper (w/ Ran Segall, Prospero) - May 11, 2018
- How well are we connecting with our curiosity? (w/ David Kadavy, Love Your Work) - May 3, 2018
- What is design if not a way to tell a story (w/ Yasmine Evjen, Google) - March 16, 2018
- The value of free education and building communities (w/ Quincy Larson, FreeCodeCamp) - March 8, 2018
- Breaking down design systems to atomic elements (w/ Brad Frost, Atomic Design) - March 1, 2018
- Don’t be a “tooler”, but a learner (w/ Jason Ogle, UserDefenders.com) - February 22, 2018
- Have fun, create value and do it consistently (w/ Noah Kagan, Sumo.com & AppSumo.com) - February 15, 2018
- Find a niche you love, specialize, succeed (w/ Samuel Hulick, UserOnboard.com) - February 8, 2018
- Designing as ‘Change Agents’ (w/ Maria Giudice, former VP Experience at Autodesk) - February 1, 2018
- Finding Your Product’s Level of Readiness and Manifesting Design systems (w/ Keenan Cummings, Airbnb) - January 25, 2018