Being a UX designer in 2018 is awesome, but crazy. Never have we had more tools being created just for us. This has it's obvious advantages, but often we still struggle to find the best tool for the job. Also often, we create our own tool or process for such cases. Here're some of the ones I've been working on...
Find + Insert Icons
Designing UI with an ever-growing icon library can be difficult. Especially when your library is Microsoft's MDL2 font and contains over 4500 unique icon metaphors. Existing ways of finding icons were time consuming. Browser-based tool that requires intranet connection, constantly asking you to re-authenticate. Fabric's icon search doesn't do either of these, but it is scoped to only their icon set which is significantly smaller 😕

A coworker had started keywording MDL2 re-using an old, but popular emoji Alfred workflow. It solved so many problems – speed, keywording, and was in context of our design apps. Although, after using it for a few days I realized it desperately needed to be upgraded to the full set of icons. The thought of manually keywording that many icons made me sick though. Then I remembered someone had done this using Adobe Bridge, meaning the keywords were embedded in the Illustrator files themselves. So over a weekend I developed a Bash shell script that generated a Ruby file with the corresponding keywords and Unicodes. I used ImageMagick to generate images for each icon. Here's a snippet the from the tags file...
      "62620": { "tags": "Breakfast, Coffee, Drinks, Food, Glass, Items, Kitchen, Steam, Tea" }
Afterwards there was a fair amount of de-bugging to do, but eventually I got it working 🎉 I had upgraded the original set of 300 to a whopping 4000! Here's what the latest version looks like...
Create Icons files
As a designer who loves to make their own desktop app icons, creating the necessary files can be irritating. There're loads of free converters out there, but they're outside my workflow. I want something quick and easy, and potentially gives me both formats. ICNS for macOS and ICO for Windows. A number of projects already do this, but most of them have dependencies. I eventually found the SIPS function that comes bundled with Bash. I was able to use this to create both ICNS and ICO files. I did take one dependency on ImageMagick for better ICO quality. I then pasted my code into an Automator Workflow so it'd appear in my right-click menu. Here's what it looks like in action...
Convert Prototypes for SharePoint
At Microsoft we develop a lot of prototypes. Some are for simple UI animations. Some are design specifications for engineers, like type sizes, color, and layout. Some are click-throughs to test our assumptions against real users. All of these prototypes need a home for people to access. We have a centralized repo, but it's a bit complicated to upload to. I wanted to give my team a quick way to do this otherwise it won't truely be centralized.
I turned to my shell scripting and Automator app to get going. Before long most of the process was automated. My script only does a few things – writes JSON metadata for SharePoint to use, and then bundles the files into a .proto file, which is actually just a .zip with a different extension. A designer would then copy it into their desired SharePoint folder and it would render in a few minutes in the web view. Here's what the conversion looks like...
There are still bugs unfortunately. Like how SharePoint seems to choke on any HTML that contains any special symbols. Do you use underscores on your Page or Artboard names? Going to have to rename all of those 😬
This workflow, paired with a Sketch Measure or Marvel is great for sharing. It can be cumbersome still. In those cases we turn to other tools like Zeplin.
Sketch to PowerPoint

Working at Microsoft on Office products means you live and breathe PowerPoint files. However, as a designer, you work in Sketch or Figma. Sure, you can share a Figma link, but then you're expecting a lot of folks to sign up and learn a new tool. So if there was a way to easily sync your designs with a slideshow you'd be golden. This is when I learned of the Sync to Slides plugin for Sketch. I wanted this to exist for PowerPoint, so for Microsoft's 2018 Hackathon I started working on exactly that.
I started looking for existing resources, and found Sketchtool. This is a command line tool that comes bundled with Sketch that can give you a file's JSON or artboards. Since I know Bash, this is a good place to start.
Back to Top