I've tried building a Sketch plugin maybe 5 times in the last 3 years. Getting the itch to over-engineer some automated solution to a design problem that is probably better suited as a D3 chart.

Well, I recently had an opportunity to build a D3 chart, which stretched my brain a bit, as well as required me to write javascript.

So, given that Sketch plugins can be written in javascript, and I happen to be working on a pretty large project at work that'd benefit from some automation. Let me explain.

I work on software systems. This particular project, like many systems I work on, consists of many different web pages. Across all the pages, some common components exist. In order to understand the whole system, I like to print out web pages and get them on a wall, or Shay board.

On the boards, I like to put 1) the current state of the application, and 2) the future state of the application. The future state is often a Sketch, Photoshop, or visual artifact from your tool of choice. The point is: current vs future state.

To get from the current state of the application to the designed future state, the delta represents the tasks required to get from here to there. Those tasks are often represented by Stories in a backlog.

In my case, I'm using Pivotal Tracker.

And, back to the visual board... on that board, where we have the future state of the application on top, and the current state of the app on the bottom. I have been printing out each story on a post-it sized paper and taping it at the location where the work needs to be done in the app. If work applies across the app, I place it where it is first seen. (A page layout might be the first page, where a sitewide button hover interaction may not be called out until signup).

While I, and my team seem to find the visual representation of the site quite valuable, we are aware and weary of the cost; the overhead of maintenance. Yet, I'm attuned to the value, and seeking to reduce the cost of maintenance of such artifacts.

The Goal

My goal is to import Tracker Stories into my Sketch board. Then, be able to refresh the import, And have existing stories of the same status remain, And have existing finished stories, be marked red (so that I can address them) And have new stories marked placed in a specific location (so that I can address them)

The Plugin

The plugin, I installed 'skpm'. I created the menu and specified what it was going to call. I wrote the code that it executed when the button was clicked.

Benefits

In my experience, the artifacts can provide the following benefits:

• depict the whole - getting to see all the site at once is kind of a treat. as web-users, we are accustomed to 1 page at a time.
• depict the parts - seeing the general flow of the site, from left-to-right, and current and future, allows teams to disambiguate and incorporate spatial coordinates, colors, and textures into their shared vocabulary.
• radiate information - it is inviting to others - being able to capture information at a glance, and literally, increasing the surface area; a proxy interface to product-design

References

• http://developer.sketchapp.com/guides/preferences/