Adobe XD Plugins and Open Source

Developer Audrey So speaking on empowering new developers through open source

Last week, Adobe’s open source office held its 3rd annual Open Source Summit for North America. Since the first event in 2016, Open Source Summits have been great opportunities for advocates of open source at Adobe to get together and share best practices, lessons learned, and cross-team collaboration opportunities.

Group discussion at Adobe Open Source Summit

At last week’s North American summit in Lehi, Utah, we heard speakers from around Adobe cover topics like Magento’s successful approach to fostering an open source community at scale, how to empower new developers through open source contributions, nudging web standards and open source browsers, and much more.

I presented to Adobe’s community of open source advocates about how open source has played a role in the launch and early growth of the Adobe XD developer community and plugin ecosystem. In this post, I’ll share with you a quick overview of the intersection of open source and XD plugin APIs today.

Why open source

Open source solves for participation at scale.
— Jason Woosley, VP, Commerce Product & Platform at Adobe and Magento

For the XD plugin ecosystem, a big focus for us at the moment is to make it as frictionless as possible for people with impactful ideas to build and share XD plugins with experience designers around the world. We’re motivated to produce documentation, samples, tools, and more to make sure you can get the most out of the APIs.

As part of that mission, we want to welcome in ideas, perspectives, and participation beyond on our own. There is already a friendly group of talented designers and developers building XD plugins and development resources. Engaging with them through open source gives us a chance to make sure the community can participate and have their work elevated to other developers on the platform who can also benefit from their projects.

The lay of the land today

The open source projects for XD plugin developers can be found on the new Adobe XD GitHub organization.

Featured repos on the Adobe XD GitHub organization

Repos that we’re currently highlighting are:

  • plugin-docs: the official Adobe XD plugin documentation, offered as an open source project
  • plugin-samples: code-complete sample plugins crafted to help you learn many common use cases for the APIs
  • plugin-toolkit: helper functions and utilities for plugin developers
  • xdpm: a command line tool to help speed up development and packaging of XD plugins
  • typings: type definitions for autocompletion features in editors and IDEs
  • xd-awesome: resources from the community, like plugins, templates, samples, and more

Each of these repos comes complete with a license (MIT or Apache 2.0, depending on the repo), a contributing file, an issue template, and a pull request template (plugin-docs is the only repo we don’t currently accept pull requests for).

If there are tools or resources you think we’re missing, let us know… or start up your own project. Feel free to reach out on the XD platform developer forums if there’s anything you want to discuss first.

Community-lead projects

The cover slide for my talk on the Adobe XD platform launch and open source

At last week’s Open Source Summit, I was happy to be able to highlight the level of early open source community participation during my talk. Since GitHub repos played a big role during our private beta, we were able to work with our community of launch partners to create and iterate on the public repos that you have available today.

While all repos are open to feedback and contribution, some of the repos are already strongly community-centric. I’ll introduce a few of them below.

XD plugin API typings

During the private beta, XD plugin developer Pablo Klaschka asked us about our plans to provide typings for API autocomplete and contextual information in code editors. While typings were on our minds too, we knew we wouldn’t have them ready by the API launch date.

Pablo opted to take the project on individually. We were so impressed with his work that we asked him to consider contributing the repo to the Adobe XD GitHub org. He agreed, and the Adobe XD plugin API typings are now available to you under a MIT license as part of our official collection of repo offerings.

Visit the repo for setup instructions and more.

XD Awesome

Our XD Awesome repo is a growing collection of developer resources, largely created by the community itself. It’s still early days, but the list is already growing.

Precious’ Christophe Stoll speaking about the Data Populator plugin at Adobe MAX

Rename It by Rodrigo Soares and Data Populator by Precious are both excellent examples of open source plugins from the community, and both are names that many in the design community will recognize.

If you’re looking for utility libraries, Sven Schannak and Pablo Klaschka have both contributed helper libraries like xd-storage-helper and xd-json-wrapper.

Check out the XD Awesome repo to get the full list.

Get involved

XD plugin API labs at Adobe MAX 2018

We’re proud of the early open source community around the XD plugin APIs. Thanks to community contributions, our docs are stronger, our samples are more robust, and the library of resources to help you build is more extensive than it would be if we had gone it on our own.

We’d love to see you take an active part in the open source community, too. Some ideas to help you get started:

As you can see, not all contributions have to be code commits and pull requests! Pick the level of involvement that’s right for you and jump in.

If you’re not sure about something, feel free to reach out on the developer forums. We’re here to help you succeed.