XD Plugins at Adobe Tech Summit 2019

Adobe CEO Shantanu Narayen kicking off Tech Summit 2019

Every two years, Adobe holds Tech Summit, our internal engineering conference where developers from around the company come together to show their work, build relationships, and share ideas that will help us invent a future that pushes possibilities even further for our customers.

The theme for Tech Summit 2019 is “Escape Velocity”. The 3000 attendees from 17 countries have been encouraged to think about what that theme means for their products and customers.

For the Adobe XD platform and ecosystem, 2018 was about launching the plugin APIs and releasing the first group of third-party plugins. Starting in 2019, one way we want to achieve escape velocity is by enabling more developers and designers to innovate on the Adobe XD platform and deliver even more value to experience designers around the world.

An audience of Adobe engineers learning to build their first XD plugins

As we prepare to enable the third-party plugin ecosystem grow through regular API updates (XD 14 in December, XD 15 in January), the Adobe Fund for Design, developer events and much more, we took the opportunity at Tech Summit to help engineers from across Adobe learn to build their own plugins for Adobe XD in a hands-on API lab.

(Our thanks to session facilitator Joe Steele and the Tech Summit organizers for giving us the opportunity to offer this lab!)

Hello, XD Plugin: a hands-on API lab

Kerri, Peter, and me before the Hello, XD Plugin lab

On Monday, Peter Flynn, Kerri Shotts, and I lead an API lab, along with our TAs Steve Kwak and Erin Finnegan.

To start things off, I highlighted the Adobe XD platform features and developer ecosystem. Since we had an audience of Adobe engineers, I also wanted to show off a couple of plugins built by teams at Adobe.

One of those plugins was World Ready, a localization plugin built by Adobe’s localization team. World Ready makes it simple to spot potential issues that might show up when your layouts are localized into other languages. It also offers automated translation services from Google, Microsoft, and our very own Adobe I/O. Check out World Ready in XD’s Plugin Manager.

Just a few icons from our growing ecosystem of XD plugins

I also showed off an awesome example of a private plugin built by the UX design team for Adobe Premiere Rush. It optimizes a very specific workflow for that team, and helps them experiment and iterate faster:

After that introduction to the world of XD plugins, Peter opened his code editor and took everyone from Hello World to working with objects in the Adobe XD scenegraph. The starter code Peter shared in the lab was the same code that’s available to you in our Quick Start tutorial.

From there, we explored the XD scenegraph, ultimately making a plugin that adds a padded button frame around a selected text object in XD.

“Hello, XD!” Taking first steps with XD’s scenegraph API

To wrap things up, Kerri showed lab attendees how to create UI and handle I/O for their XD plugins. Continuing with Peter’s example, developers learned how to add UI to their button frame plugin that allows the user to set padding values.

UI APIs, file and network I/O: all powered in XD plugins by UXP

APIs for plugin UI as well as file and network I/O are provided by UXP, or Unified Extensibility Platform. UXP will be a subject we’ll cover here on the blog increasingly over the next year or so. For now, you can learn more about those APIs in XD by visiting our user interface concepts doc and our references for network I/O and storage APIs.

Ready to learn with us?

Coming soon: Hello, XD Plugin workshops in Europe

We’re taking this show on the road with public events in London, Amsterdam, and Mannheim later this month. Whether you’re a designer, a developer, or both, we’d love for you to join us to learn how to build your first XD plugin.

This blog post has event details with links where you can register for tickets. We hope to see you there!