Building a Smart Points Removal Plugin For Adobe XD Using Astui Web API

Smart Points Removal Adobe XD Plugin from Astute Graphics using their Astui Web API

Update, March 14th, 2019: You can try the Astui plugin in XD here! Also, XD’s APIs are now public. Learn more about Adobe XD’s APIs and start building your own plugin by visiting: https://adobexdplatform.com/

Our guest developer post this week is by Irina Petrova, a web developer at Astute Graphics, the company behind popular plugins for Adobe Illustrator CC. For years, Astute Graphics has been focused on empowering creatives to do more in Illustrator, and just recently they announced the development of vector editing APIs. This blog post is about Astute Graphics’ experience building XD plugins using their own APIs and XD’s upcoming plugin APIs.
— Drew Endick, Platform Partnerships Manager, Creative Cloud

Adobe approached Astute Graphics earlier in the year, inviting us to attend a special XD Dev Days event in San Francisco to kickstart XD’s new plugin ecosystem. The relationship between Adobe and Astute Graphics stretches back over 12 years. With our expertise and hard-won reputation in conjuring up magical new vector tools for Illustrator, working alongside the Adobe XD team felt very natural.

While we recognise XD is not intended for general graphic design, it is a focused vector prototype tool. Therefore, many of the lessons we learned with enhancing the user’s workflow in Illustrator translate to XD beautifully.

Before diving into our first plugin for XD, we had to think hard about five aspects:

  1. What would benefit every XD user and make a genuine difference to daily workflows?
  2. What function makes no demand of traditional vector design knowledge or experience?
  3. With the initial XD plugin release, what feature could have a big impact on design work with little interaction required of the user?
  4. What steps can be taken to ensure XD’s mantra of “performance, performance, performance” would not be impacted by any new function?
  5. How can Astute Graphics make a long-term business case for supporting XD plugins and yet release the plugin as open source?

With a wonderful moment of planets aligning, we announced our AG Tech earlier in the year. What hadn’t been announced at that point was how this unique developer’s toolbox for vector path manipulation was also going to be deployed to many users; enter the Astui Web API.

Smart Points Removal

With highly involved and demanding vector path processing taking place in the cloud, our options became much clearer and answers started to flow. Immediately, one of our core vector technologies, Smart Point Removal (SPR), came to the fore with benefits for everybody working with vectors. SPR reduces file size, which is always important for download time and rendering speeds. Simultaneously, it makes imported artwork humanly editable by drastically reducing the number of path nodes — especially in XD with its intentionally distilled vector design toolset.

Smart Points Removal Adobe XD Plugin from Astute Graphics using their Astui Web API

SPR has a single tolerance (“strength”) slider control. That’s it!

This streamlined user interaction model ensures the learning curve vanishes, letting the tech take the strain. Easily contained in a simple modal dialogue, it starts the SPR process, which transfers the selected artwork element(s) to the Astui service for processing with no local overhead.

Developing for XD

Developing in JavaScript is a lot of fun. It’s dynamic, easy to write, and has a big variety of frameworks and libraries to use. In fact, JavaScript is many developers’ favourite language, and rightfully so. We were happy to find XD plugins are written in JavaScript. We also found that XD has a booming community of great developers who are always ready to help.

Each monthly beta release of the XD plugin API has brought something new and great. For the XD Dev Days event, we got access to UI elements with pre-styled UXP components, which drastically simplified giving user feedback. File system access allows you to store settings for your plugin and using Promises to modify elements on the Scenegraph makes it easy to work with multiple elements asynchronously.

We value the availability of good documentation and code examples to quickly get you started and show what’s available for the community —and the XD team produced exactly that. The latest release of documentation contains not only the API reference, but examples of how to use and build simple plugins.

Getting it out there

With the XD plugin developed, it is now time to focus on distribution. With the core SPR technology being server-based, the streamlined XD plugin will be immediately open-sourced when Adobe launches the XD plugin APIs. Also, being fully commented, our XD plugin codebase is ready to be examined and extended by others.

We plan to distribute our plugin on XD’s own in-app plugin manager, as well as on astui.tech and GitHub. Expect to get your hands on the first Astui plugin for XD very soon. Please follow us at astutegraphics.com for the latest news!

I can say that I’ve been privileged to influence XD’s growth, see how the ecosystem for developers evolves, and use some of the goodies produced by the Adobe team.