Sketch Plugins
Accelerating the design workflow through custom and secure plugins.
DesignDevelopDeployDesign Automation
I developed two Sketch plugins for IBM's Quote to Cash business unit. Our strict IT standards kept corporate and client data secure, but left a gap in Design toolchain functionality.
By creating “in-house” plugins, our team gained secure enhancements to our toolchain, including : using GitHub and RSS subscriptions to reduce the number of file handoffs, using a product-level design system to create auto layouts, and using in-document variables to be replaced by values from a CSV template to expedite copy integration.
High Impact
Increases on prototyping productivity have an exponential impact on product development.
UX Prototyping has become a critical part of Front Loading product development. “Front-loading [is] a strategy that seeks to improve development performance by shifting the identification and solving of problems to earlier phases of a product development process” (Thomke and Fujimoto 2000).
One analysis believes the first 20% of product development holds 70% of the “ultimate cost and efficiency of the entire product development process.“ (Bradford Goldense)
Features
The largest challenge our team faced was UX and UI inconsistency inside our product. Over a decade of churn and enhancements had lead to a product with a variety of options for a finite number of needs.
We created a product-level design system to create consistency, and I used JavaScript to code our layout rules into quick action buttons inside sketch. A user could then auto arrange content on tiles or pages.
Our product was a data-heavy sales support tool. Many of our mockups and prototypes involved hundreds of instances of “realistic” data. A feature that could take hours for a designer to implement. The solution was to begin utilizing variables in our designs.
With the plugin, a designer could name a column in a mockup with a variable such as {List_1}. Then, at the push of a button, the fs JS library would read a user-specified CSV template. The plugin would loop through the document layers and substitute matching variables for text from the CSV cells.
Lastly, the plugin needed to be easy to access and update. Using the Sketch “store” would have meant public hosting and public sharing of the plugin, which was counter productive to our security concerns.
I used IBM’s GitHub Enterprise to host the plugin package in a secure repository. Then, learning from the Sketch Developer forums, I was able to include an RSS subscription in the manifest. This would alert the user in-Sketch when an update was available.
Final Thoughts
Learning how to modify or enhance toolsets is an important - but niche - skillset. It’s labor-intense, but identifying and overcoming bottlenecks has an exponential impact on the product workflow.