Things to consider when packaging your Sketch freebie

Having recently loaded up the Made with Sketch site with Sketch freebies, I've noticed that as a community, there aren't really any guidelines for sharing a Sketch freebie with the community. Alas the idea for this post was conceived.

1.) Name the .sketch file

This one might sound obvious, but you’d be surprised how often you’ll find file.sketch, freebie.sketch, source.sketch – none of which tell you what the resource is. I’m a bit of a perfectionist, so I like to stick to lowercase-hyphenated.sketch and then once zipped, lowercase-hyphenated.sketch.zip – so that it’s easily recognizable as a sketch file and also easy to search for (ie, “.sketch.zip”).

2.) Remove all stock images

Including embedded images in your Sketch files will massively increase the file size, so try and avoid this when ever possible. If you really want to include images in your Sketch files, be sure to offer an image free alternative, that way folks on slower connections have the choice to download the image free version.

3.) Check the file size

Once yanking the images from your designs, be sure to check the file size, as it should be down to a few mb’s at most. I had an issue in the past where I had a design created in an older version of Sketch, which was suspiciously large and I eventually recreated the design (copying and pasting the layers) in the latest version of Sketch and the file size came down to a modest 1.7mb (compared to 64mb before). In another case, it turned out I had missed an image in the design.

4.) Offer alternatives

If you have different variations of a design, offer each of the variations as it’s own download. That way, it’s easy to download the exact resource you’re interested in, without needing to download the entire kit. For example, Facebook Devices is an awesome library of some 35+ devices, but it’s a bit frustrating to have to download all of them, when I only need 2 or 3. Same goes for including all the device stills in the main download. In the case of Facebook Devices, the download zip went from 124mb to 31mb just by removing the device stills. That’s a whopping difference for someone on a slow connection. More on Facebook devices coming in another post.

5.) Include fonts

You would think this one would be obvious, but it’s more often not the case. How often have you opened a Sketch freebie, only to be faced with the dreaded Missing Fonts dialogue:

fonts-missing

Meh! Now I gotta go track down those fonts, install them, restart Sketch, etc.

It’s not the end of the world, but it would have been nice if I’d had some early warning and even nicer if freebies creator would had bundled the required fonts with the resource.

I generally only include the specific font weights that are used in the design, as including all of them gives the impression that all can or should be used.

While they technically can, it doesn’t mean they should. When in doubt, head over to the Google Fonts page to see if the font is listed. If it is, the font details page has a neat widget that shows the impact on page load:

google-fonts-page-load

See the recommended folder structure for an example of how to include fonts at the end.

6.) For templates, package as a DMG

Something I came across recently, which I thought was pretty clever, was the approach taken by Facebook’s Design team to package up their iOS 9 UI Kit as a DMG. At first I thought DMG might offer better compression than zip, but it turns out their both on par when it comes to file size. Their reasoning only became apparent once I actually mounted the DMG.

facebook-ios-dmg

Notice the Add to Sketch Templates option? How neat is that?! Now instead of having to open the template version in Sketch, then save-as-template vs one click and done. That’s some nice preemptive design right there. Nice work guys!

Creating your own DMG’s

For more info on how to create your own fancy DMG’s, see this comprehensive post by Remko Tronçon (which has been translated into Ukrainian, Bulgarian and Swedish). The approach taken in the article is a bit technical, but for those that prefer a visual tool, check out DMG Creator on Sourceforge

Add as template workflow

7.) Include credits

Did you use anyone else’s work in your design? Icons or stock photography perhaps? Even the fonts creators deserve a mention in your freebies credits. See the the recommended folder structure at the end for an example.

8.) Link to any other assets used

This one is a bit of a continuation from the last point, but be sure to provide links to any assets used in your design. This is especially relevant if you remove the images from the Sketch freebies you’re sharing. Say you’ve used a stock image from Bigstock, which can’t be distributed with your freebie (unless you have purchased the appropriate license, which isn’t likely), linking to the image on Bigstock means anyone who liked the image in the design can find it again. You could potentially make some money on the side by using affiliate links (clearly stated, of course).

Your-Resource-by-Your-Name.sketch.zip

Eg: iOS-9-iPhone-Light-by-Facebook.sketch.zip
--- iOS-9-iPhone-Light-by-Facebook.sketch
--- readme.txt
--- /Fonts/
------- SFUIDisplay-Regular.ttf
------- SFUIDisplay-Medium.ttf
------- SFUIDisplay-Bold.ttf

Then in the readme.rtf, we’d have something along the lines of:

/*************************************************************************************/

Resource name: iOS 9 iPhone Light
Author: Facebook
Author URL: https://facebook.github.io/design/
License: GPL
Tags: Apple, iPhone, iOS, iOS9
Designer/s: Geoff Teehan, Jeff Smith, Robin Clediere, Dan Lebowitz, Chelsea Kim, Priyanka Kodikal, Brody Larson, Michael Boswell, Alex Ristevski, Helen Zhou, Julius Tarng, Andrew Pouliot, Charlie Deets, and Davey McGavern

Description:
Sketch templates of GUI elements found in the public release of iOS 9

Fonts:
- SFUIDisplay Regular, Medium and Bold (http://link-to-font-source).

Images:
- Blue Sky on Forest, by John Smith (http://jonsmith.com/link-to-image).

Icons:
- Simple Line Icons by Hugh Heffer (http://dribbble.com/hughheffer/link-to-resource).

Other:
- Emojis for Sketch by Jack Frost (http://jackfrost.com/link-to-resource).
- iOS 9 Keyboard by Pat Spat (http://dribbble.com/patspits/link-to-resource).

/*************************************************************************************/

This is intended to be a rough guide and you would only include sections that are relevant. For example, if you’re not using anyones icons or stock images, you’d just leave those sections out.

Footnotes

DMG stands for (Disk iMaGe) The file format used in the Mac for distributing software. Mac install packages appear as a virtual disk drive on the Mac. When the DMG file icon is double clicked, the virtual drive is “mounted” on the desktop. The DMG format harks back to the days when the Mac was a floppy-only machine. DMGs were used to make multiple floppy disks without having to insert the original floppy again for each subsequent copy.

Definition from PC Mag

That’s about it. Got anything to add? Do so in the comments.

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *

Comment *

Name *
Email *
Website