Will Sketch open file format enable the perfect icon management flow?

over 5 years ago from , Teamlead

Most of you probably already know, Sketch 43 and it will bring something amazing to the industry: an open file format! For those who are not yet aware, here a nice read on it: Sketch 43 is coming

Now... I was recently reading this article how the Dropbox Paper team manage to automate some of their Icon management

If you haven't yet read it I highly suggest doing so.

Long story short: they came quite far to something I would consider an ideal workflow form icon management already with the current Sketch file.

And then I started thinking... "hm.. with Sketch 43 this can be really interesting..."

So here I am. I would like to share with you what I would call my (and our company) ideal scenario and would like to hear from you your ideas!

  1. We have a central git repo for all our icons which consist from single Sketch files. One file for one icon.

  2. We have a icon_template.sketch that includes three basic art-board: Icon, Infos and Preview

-- The Icon art-board includes only the icon (as a symbol)

-- The Info art-board has some basic information info blocks: name, description, keywords etc.

-- The preview art-board shows the icon in different use cases. Of course we use the symbol here, so we immediately see all the changes when iterating on a icon.

  1. When designer wants to create a new icon, he takes the template, makes icon and commits/pushes to GIT (we would probably have a D,Q and P branch). Same goes for editing existing icon.

  2. Now the magic happens:

-- A script on our server takes the committed content, extracts the new (or updated) .sketch file, generates the .svg, generates the .png (if needed),

-- updates the sprite, css (less, sass, whatever),

-- updates the icons HTML overview page (with the name, description, keywords) so people can quickly look what exists

-- maybe even creates a big .sketch file with all the icons as symbols...

-- since our website uses the central .css and sprite ... the icons are automatically updated on the website

Ok... we will most probably have to have guidelines how a icon has to be done and some governance process but the idea is simple: from the point the Designer pushes his new/changed .sketch file... everything happens automatically and is in perfect sync + because of GIT we have the version history.

What do you think?

1 comment

  • Darrell HanleyDarrell Hanley, over 5 years ago

    Digging into the file format a bit, it seems like you could have a centralized icon/color management system, but with a couple of caveats.

    If you really want a powerful color management or asset management system then everyone has to get on the same page with using Sketch the right way which means using shared styles, symbols, probably using Craft libraries for non-master files.

    Sketch also seems to use SVG text which is reliant on you having the font installed for you to use it. Obviously, this means that symbols that use fonts (say a logo) would need to be converted to outlines in Sketch before they could be processed on a server to be exported into PNGs or SVGs. This also means highlighting this as an error on whatever client would be responsible for managing the assets.

    I also think that you'd need a visual client to handle merges. Lets call it the Art Director. The Art Director would allow you to make notes on individual submissions on what would need to be changed (like a Github comments section) and allow you to merge changes a pull request. All of this would be Git, and I think the Art Director would essentially just be a visual git management tool. If you wanted the ability to selectively allow or disallow changes in a PR, then the Art Director would also be responsible for creating and merging branches that feature only those approved changes.

    0 points