A1ex Posted March 24, 2023 Posted March 24, 2023 For context, SF Symbols is an Apple technology for using and creating UI icons, already very popular (afaik) with UI developers, because it gives you a lot of functionality for free, and bakes some pretty advanced behaviour into the icon itself (in theory, you can turn a single vector drawing into a multicoloured progress indicator). It could be truly revolutionary, if making your own symbols wasn't such a pain. Originally, you had to design a custom symbol in nine weights of 3 sizes (27 icons), if you wanted it to look good everywhere, and using the cool stuff usually means even more work. So the latest iteration of SF Symbols allows you to specify a "variable template", containing just three weights of the small size, and interpolates the rest for you. I've really been enjoying using Designer for a job involving a lot of icons (because I remember the 90s, and could I just mention how much I love the snapping behaviours you've provided for the Node tool...), and thought I'd have a go at souping them up with SF Symbols. The input format is really simple (SVG file with maybe a few requirements on the metadata, and 3 groups: Ultralight-S, Regular-S and Black-S, each containing a - probably compound - path), and if you start from an exported template, that's all set up for you anyway. However, the three variants must be interpolable, so you need the corresponding points to appear in the same order each time. This is hard to guarantee if you're doing anything more than copy-pasting and transforming (which is probably the use case Apple is catering to). As an experiment, I exported an Apple-designed SF Symbol as an SVG template, opened that in Designer, broke a path on one variant, closed it again, and exported an SVG. Turns out, the subpaths had been rearranged, so it wouldn't validate. Even when I manage to follow an identical sequence of steps (which senility doesn't always permit), the outcome is far from guaranteed. The worst of it is, this would be a perfect - and highly enjoyable - workflow, if it wasn't for the last step... So what I'm pitching for is an export preset for SVG which iterates over each variant's subpaths, groups these into closed paths (which they ought to be for an SF Symbol, anyway), and then ensures that their points are always listed from the bottom left, or whatever. No additional UI needed: if it doesn't work, say so in the export preview window. I thought about asking Apple to make their app a bit more accommodating, but I suspect they're actually quite keen for everyone's icons to be composed from their (admittedly excellent) pre-designed palette of symbols... Sorry it took so long to explain such a simple thing. It sounds a bit niche (although it's also very little effort), but there are a lot of UI designers for Apple devices out there, and if the workflow were more designer-friendly (still mucking about with a Python script for the above), I'm sure a lot of them would want to get creative with SF Symbols. What do you think? ohmantics 1 Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.