Category
Visual Design
Interaction Design
Software Engineering

Published
Jan 28, 2019

Read
3 min

Tweet
Share
Comment

Bookmarks - Adobe XD Plugin

Introduction

The first time I used Adobe XD I knew that I wanted the ability to quickly jump around to different artboards without manually zooming and panning around. For small projects this ability isn't very useful. On bigger projects however it is super useful. In fact, the larger your document and greater the artboard count, the more useful bookmarking becomes.

Bookmarks exists to empower the XD users that want this ability.

Bookmarks Icon

Bookmarks

If you are unsure if Bookmarks would be useful to you and/or your team, here is a list of uses and qualities it provides. A video (coming soon) showcases it in action.

  • Jump around large documents with ease
  • Jump to areas of interest when presenting designs, user flows, etc.
  • Jump to a bird's-eye view of all artboards in one view
  • Bookmarks persist in the document so they're shared with team members automatically
  • Nickname bookmarks

Video coming soon

You can download and install Bookmarks within XD via Menu > Plugins > Discover Plugins... and search for Bookmarks. The plugin exists for both Mac and Windows. Once installed, it looks like this after the cmd/ctrl + shift + B shortcut.

Bookmarks Default UI

If you end up installing Bookmarks, don't hesitate to reach out on Twitter @derekknox or via emal braindroplabs [at] gmail.com with improvement ideas, feature requests, or other related thoughts.

If you also happen to use Unity3D you'll likely dig a similar plugin I made for it called Scene Shot Bookmarks.

Developer Experience

In first researching if bookmarking zoom and pan locations was even possible, I found myself at the Adobe XD API Roadmap. In combination with the API Reference these resources detailed a few APIs that sounded promising. Through asking a series of questions on Twitter and with the help of @kerrishotts I validated that bookmarking in XD was 100% possible.

Additionally I learned that third-party plugins are authored in HTML, CSS, and JavaScript. Since that's my bread and butter, I thought I'd have the project done in a weekend. Unfortunately, there are more than a few pain-in-the-ass gotchas that other aspiring plugin authors should be aware of.

In no particular order:

  • A subset of HTML, CSS, and JavaScript are supported
    • This manifests as a subpar UX for Bookmarks where sacrifices I'd not normally have to make were forced
    • Your plugin must exist within a <dialog> (though plugins in panels are on the roadmap)
  • innerHtml() and manual element creation vs. providing static .html and .css files
    • This negatively impacted iteration speed (again due to the subset issue mentioned above) and the expectation of using .html and .css in distinct files
  • Lack of "this-is-the-main-way-you-should-author-the-shell-of-you-plugin"
    • The GitHub example repo was great... but it was noisy and had seemingly outdated examples. Options are good, but providing and promoting a standard would help plugin authors actually focus on their plugin and not the shell and lifecycle enforced by Adobe.
  • Shortcut restrictions
    • I get this likely has to do with security and not globbing up the shortcut space, but the lack of flexibility here was another PIA which results in a subpar UX for the end-user.
  • The form for submitting my plugin was borked and I had to enter all the information twice
    • This is pretty rediclous to be honest but I'm thankful the process is fairly short

Overall, I give the Adobe XD plugin authoring experience a C. I know the team is still working to make this experience better while also improving the APIs, but right now it falls short. I'm looking forward to these improvements however as they will empower authors and thus end-users to get much more out of XD.