UPDATE: The export slices in the original file were a little bit off on dimensions and I wasn’t sure how to fix this at the time. I’ve now adjusted the Artboards and export slices to perfect those sizes, and this may solve the softness issue I described in the original post as well. The updated file can be found here.

I’m a recent convert to Affinity Photo, so when a special offer came up for Affinity Designer, I leapt at the chance. I’ve not done much more than mucking around to learn Designer, but while doing so I figured it’d be a great tool for designing the type of strong, bold icon I need for my (planned) iOS apps.

That got me thinking about the standard icon grid of golden ratios and the all-important squircle corners. Having used a Photoshop template in the past, I had a pretty good idea of what I wanted. I ended up basing it off an SVG design from German software company Kodira.

The icon template open in Affinity Designer

The template makes use of a new feature in Affinity Designer 1.5 – Symbols – along with artboards. The large (1024 pixel square) design on the left is based on a symbol which is then duplicated to the other artboards which are sized to provide the required icon variants.

Layers palette with master artboard expanded.

To modify with your own design, expand the master artboard and edit only the contents of the symbol, as marked with the solid orange border on the left. In order for the automatic scaling to work, you must remember to check the Scale with object checkboxes where ever-present, such as on strokes and effects. Also, keep an eye on where your objects go – if they don’t get an orange border, they’re not going to be replicated to the other sizes.

A number of guide layers are provided to help you edit and visualise your design.

Check the GUIDES layer to display the golden ratio guides on top of your design. You can also use these for snapping as required. This is not part of the symbol so will not affect the other icons sizes, however, remember to turn them off before exporting if you want your large icon to be clean.

Check the MASK layer to round off the corners with a white background to help visualise the final result. Once again, this will only affect the large icon, but there is another way to round the icons on all sizes. See below.

If the white corners are too much, there is a hairline outline of the corners in the Outline layer which may prove useful while designing.

The top level of the symbol (titled EDIT THE CONTENTS OF THIS) has an optional mask (titled Unselect for Xcode icons) which will round the corners on all of the icons. This may be useful for generating pleasing “finished” icons for promotional material, however, ensure you turn this off when exporting your icons for Xcode.

When you’re done designing, head on over to the Export Persona, where each artboard has already been set up for exporting in the relevant resolutions as required by Xcode or iTunes. The sizes and scale variations are current as at iOS 10.

I’m providing this free of charge because I think it might be useful for others, however, no warranty, express or implied, yadda yadda. You can contact me on my contact page if you have any feedback, but I don’t promise I’ll respond.

NOTE: I have noticed that the scaling Affinity Designer performs can lead to some soft edges and this includes the outside edges of the gradient background in the example – you may wish to check the output and consider whether you want to take a more direct approach to the scaling depending on your design.



Categories: How To


Leave a Reply

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