McKinley — vector editor for SF Symbols [alpha TestFlight]
The Problem McKinley is a vector graphics editor for creating and manipulating SF Symbols, made by Double & Thrice. Instead of having to manually flatten everything to filled paths, you can use fills, strokes, and knockouts, and export directly to SF Symbols format (for dropping into an asset catalog). McKinley supports swapping between the three required weights (ultralight, regular, black), so you can set different line widths per object for each one, or even completely vary the geometry. Comparison App developers may be using Apple's recommended SF Symbols workflow, which is to export a template from the SF Symbols app, import it into a vector editor, manually create at least three weights of symbol, convert everything to filled paths, export as SVG, re-import into SF Symbols app, go and assign layer colours and properties, then finally export as a file that you can drag into Xcode. It should be obvious where the pain points are here! There are some apps such as Create Custom Symbols, which make the workflow easier, but still require you to make your vector graphics in another app. Glyphs (the font editing app) supports drawing and editing multiple weights of SF Symbols. If you've already got a license, it's probably worth checking out this functionality, but if not, €299 is quite expensive! Pricing Currently the app is in TestFlight (see below). I haven't committed to a price yet, but I'm probably targeting €49 or so (one-off payment). Development I've been working on a vector graphics editor library, which provides the primitive shapes, paths, and interactions necessary to build apps that work with vector items on a canvas. (In my backlog of app ideas, many of them are related to editing some kind of layout of objects on a canvas, so I decided to avoid reinventing the wheel each time.) McKinley is its first outing — building SF Symbols is a pain point for me, and also for other devs I've spoken to, so it seemed like a good opportunity. You may have noticed from the screenshot that it's a fairly 'old school' design of Mac app, heavy on multiple palettes (an inspector, a preview panel, a tools palette, etc). It's also created in AppKit, and uses Cocoa Bindings for the inspector. I'm leaning in to the Old Ways™ :) The Preview and Animation windows show previews of your symbol rendered using Apple's actual SF Symbols renderer. To accomplish that using public APIs, McKinley writes out a compiled asset catalog file of your symbol into a temporary directory, then loads it in with NSBundle, and renders the symbol using SwiftUI's Image(). This is as close as I can get to previewing exactly how the symbol will appear in your own app. Where did the name come from? It's the park in San Francisco that's on the top of one of the hills with a winding street. I kinda thought the winding street looked like a vector glyph, matching the SF Symbols name. Also it's the name of my sister's dog. Status Currently McKinley is in alpha development, which I'm defining as "I'm still adding features". When I've finished building all the features for version 1, I'll move it into beta while I concentrate on bug fixes and polish. That said, the majority of features are now present. TestFlight If you would like to test McKinley, feel free to sign up for the TestFlight: https://testflight.apple.com/join/EkzRYmSf I am looking for feedback in particular on the multitude of small user interactions when editing vectors: does the editor feel fluid and natural? Are there any frustrating bits? And of course, I welcome bug reports. Given its status as alpha software, please don't be surprised if you find things that are not working!
Collected discussion
this looks really cool, the sf symbols workflow has always been such a pain so it's great to see a tool built just for it. love that you leaned into the classic appkit palette look too. how has the alpha testing been going so far?
Had a few folks send requests for usability features (like hold space to pan the canvas). One excellent bug report, with sample file, that helped me diagnose an issue with the multi-weight interpolation stuff. And a number of people pointed out they were still using Sequoia, so I worked out how to make a build they could use. But it's only been in public alpha (i.e. beyond my friends!) for less than a week, so not that many reports yet :)
that's a great start for under a week honestly, and nice of you to make a sequoia build so quickly. the hold space to pan request makes total sense, feels like muscle memory from other editors. are you planning to open it up wider once the interpolation stuff is solid?
cool, how much is it?
I’ve not made a final decision on that yet. I’m considering in the $49 (one off payment) ball park.
will give it a try
I’ve had to manually do this in the past- great idea!
nice!
this solves a very real annoying workflow. the feature i would want early is a pre-export sanity check: missing weights, shapes that will flatten weirdly, strokes that do not map cleanly, layer/color issues, and anything SF Symbols will complain about after import. the painful part of custom symbols is not just drawing them, it is doing the export/import loop and finding out ten minutes later that one variant is broken. catching those before export would make this feel much more dependable.
Look interesting, I will try!
will give it a try
That looks really good 👀 (also the backstory for the name was a nice touch)
Highly needed app! Thanks for this!
This comment was deleted at the source.
You can specify the stroke width for each line separately for each of the three weights if you like; however, there's a default set of widths and there's a way to change the width for the weight you're looking at such that the others scale proportionally.
This comment was deleted at the source.
You can set up the preview window to show whichever combinations of weights/colours/sizes that you want — by default it has all the weights, including the interpolated ones. The editor canvas itself can be toggled between the three weights you design for, there’s keyboard shortcuts or a toolbar control. You can turn on onion skinning to see the other weights overlayed on top of the current canvas too.