With the number of higher density screens on mobile devices rapidly increasing, creating icons for use in user interfaces has become a protracted process, now that we designers need to take into account the newer @3x size. In this blog post we look at how recent updates to Apple’s development tool Xcode 6 allows for scalable vector icons.
In the old days of digital design, all I had to concern myself with in terms of UI was making sure all the slices in my table lined up properly, and my Dreamweaver-generated gif mouseover buttons performed as expected. Ahh, those were the days!
When I started getting into designing for apps, I quickly realised the old ways of doing things were no longer going to cut it, and new processes called for newer and better tools. Enter Sketch, a fantastic little vector-based image editor that makes designing for apps a breeze, given its ability to export assets in various sizes. Even the ageing Photoshop has upped its game by the neat introduction of the recent ‘generate assets‘ feature in CC 2014.
The downside of this approach however, is that it remains the responsibility of the designer to ensure all the correctly-sized assets are accounted for. On the one hand that’s no big deal, but it’s a repetitive task, and as we all know, computers are pretty good at repetitive tasks. So it may well have been this thought that prompted the clever boffins over at Infinite Loop to develop the new use of vector images in Xcode 6.
With Xcode 6, Apple has introduced the ability to package vector images in .pdf format. Previously it was necessary to produce three separate .png images in @1x, @2x and the newly introduced @3x sizes. Now we can use a vector pdf at the single @1x size, and at build time, Xcode 6 will automatically scale the image to the correct dimensions for use at @2x and @3x sizes.
This is a pretty epic step forward for iOS app development, and we were surprised here in the studio to learn that no one had yet put together a package of pdf-formatted icons for this purpose. So we got to work! Initially, one of our senior developers, Richard did some research and gathered together some resources on what other people had discovered. Based on that, I went looking for an open-source collection of icons that had a suitable Creative Commons license that would allow us to build on and redistribute them in the new format. The excellent SimpleIcon set over at the Flaticon site fitted the bill perfectly.
Once I had gathered together my own collection of 24 commonly used icons, I opened each in Illustrator, resized them down to Apple’s stipulated @1x size of 22x22px and saved them out as pdf format, remembering to uncheck the ‘Preserve Illustrator Editing Capabilities’ option from the Save dialog.
I put all these together in a directory, created a BitBucket repo so I could share the files with Richard, and then he took over and did some wizardry on GitHub that I don’t fully understand:
A standard Xcode project should have an XCAsset file. Select the file and create a “New Image Set”. This will create an empty image set with empty @x1, @x2 and @x3 image sizes.
Now in the Attributes Inspector, beneath the Image Set heading, set the “Types” option to “Vectors”. This should change the available image set sizes to “All – Universal”.
Now drag your chosen pdf icon onto the universal image size. The new image set should now be available for use with Interface Builder or in code.
And that’s pretty much it! Moving forward, we’d love to see support for fully scalable vectors in Xcode’s asset system. Perhaps support for the svg image format also? Properly implemented, the design process could go straight from Illustrator to Xcode!
You can access our full set of pdf vector icons for Xcode 6 on Github here.
What’s your experience of using Xcode 6’s pdf vector icons so far? How would you like to see this feature developed?