My Experience Building an Adobe Express Add-on
Thinking about creating your own Add-on? Here’s a developer’s perspective on the process.
Adobe recently announced that developers would be able to create add-ons for Adobe Express as part of their beta program.
I was one of the selected participants who were granted access to the add-on API, so we could offer early feedback and start building the very first add-ons available to users on the platform. It was an exciting opportunity for me to test my skills and explore something new.
Now, you may wonder, what was my overall experience like, and am I satisfied with the results?
Let’s find out…
First, a little about me
I’m a web and mobile developer from Tanzania in East Africa. I build websites with the basic setup of HTML/CSS (mostly Tailwind CSS nowadays). I’ve also recently replaced jQuery with AlpineJS (check it out, it’s really cool).
For web apps, I mostly use React, but have built a couple of CMSs using VueJS. And like any curious dev, I’ve kept an eager eye on Svelte and Solid.
I build mobile apps using Flutter, but I’ve also been considering React Native lately (mainly because Expo Router looks like a really fun way to build apps).
I also do a bit of backend using PHP (mostly Laravel) and worked on a little library to speed up my process in that workflow.
My concept
Anyone who knows me knows I’m a huge fan of extensibility.
I’ve worked on everything from Chrome extensions to plugins for Adobe Xd and for Raycast. So when I got the opportunity to be one of the first developers to build an add-on for Adobe Express, I was like a kid in the candy store (the healthy kind of candy of course :) ).
I decided to work on Vision Board, an add-on that helps Adobe Express users create vision boards with just a few clicks.
Introducing Vision Board
Vision boards are fun to create. But they usually require you to collect assets from various sources and also have the design skills to make the necessary edits.
Even for a good designer, this can be tedious. For citizen designers, it can be the difference between quickly creating something off-the-cuff or giving up and getting distracted by something else.
Vision Board features several features that make the process a whole lot easier:
Clipped images: Useful for article clipping but can also be used for clipped photographs to give them that sense of being in a scrapbook.
Patterns: This feature enables the user to create a pattern from common shapes like hearts, stars, and paws — and also be able to combine two shapes. They can also select a color and get a few alternate filters. It’s one of my favorites because the value you get from clicking one or two patterns and a color hides away a lot of work that a user would have to do to experiment until they find something they like.
Layouts: When the user uploads a few pictures, the add-on generates common layouts that fit the style. Right now there are only three layouts, but more will come in the future, and I hope some of them will be suggested by the community.
Polaroids: While the layouts generate Polaroids of the pictures you upload and make a layout out of them, sometimes the user wants a bit more control. In these cases, you can upload a single picture and get a Polaroid generated for you. Right now you get two filter choices, but I really like the Adobe Express dual-tone filters, so I’ll be adding some of those in the future.
These are just a few of the features available. If you’re intrigued, install the add-on and play around with them. They’re so easy to use.
Feedback on Vision Board
It’s still early days, so I haven’t had a chance to interview frequent users of the add-on. But here’s a nice quote from Kerri from the team at Adobe.
“I love this add-on, by the way, it really gets the juices flowing.”
I’m hoping to get more thoughts from the community in time, but I’ve already got some ideas for improvements. The current flow allows you to drag and drop, which makes it easy for even a part-time designer like me to create a decent-looking vision board in minutes. But you’re presently not able to customize the image after you’ve done that.
The team at Adobe is working on content creation APIs. Those will come in handy once they land because instead of a static image, the add-on will generate shapes and text and arrange them accordingly — but crucially allow them to be customized further after generation.
So for instance the user could generate a regular Polaroid using the add-on and then make the background any color, add a pattern to it, and crop the image however they like.
My experience building the add-on
I was familiar with some of the processes from my experience of building a plugin for Adobe XD a few years back.
But I was getting really-early access to the add-on API, so I expected a bit of a rocky road to start, as I got familiar with how it all worked, and the engineering team went about fixing bugs around me.
Lucky for me, the experience was much smoother than that.
Once I’d set up my local environment to test the add-on on the live Adobe Express site (which I can’t help but marvel at), I was really off to the races.
Unlike on UXP, I was able to use my normal workflow to build the Add-on. I was even able to switch from the default setup that uses Webpack to the more modern build tool Vite. This really boosted my productivity.
The current API is very simple. It provides you with the means to add an image from your add-on to the Adobe Express canvas. You also have the full power of the fetch API and the HTML5 canvas at your fingertips, which means you can mix and match between fetched images and generated images and create some really cool things.
Support and community
While starting early definitely comes with some uncertainties, it also comes with the benefits of access to immediate support, as well as a community of other first-time developers running into the same problems you’re running into.
The team at Adobe made this even more seamless by creating a Slack channel — including all the early access add-on developers, developer relations team, platform designers, the engineering team, and even some marketing experts and community people who are engaging with the private beta customers.
You could ask a question about the API, make suggestions for upcoming features, or — if you’re like me — make use of the designers to get early feedback on design decisions and iterations as you make them.
We also had weekly video chat sessions where we were presented with the latest updates (remember, new features and improvements were shipping as we were building).
Add-on developers also used this session to share their in-progress work and got early feedback and suggestions from other developers as well as designers and engineers from Adobe. It was always nice to see the week-by-week improvements as the suggestions got incorporated into the next iterations.
These sessions also included a QA session which was very productive because the engineering team would also be in attendance and could answer questions that the developer experience team couldn’t. The developer experience team also got a chance to catch some of the recurring pain points and would update the docs to address them.
Comparison to UXP
As mentioned before, I’ve built for Adobe XD before. As I was building the add-on, I couldn’t help but compare and contrast the experience between the two. The main ones that I noticed were these two.
Web technologies: While both UXP (Adobe XD) and WebXp (Adobe Express) UIs are built using web technologies, WebXP is much more predictable and supports all the common web functionality and workflows. UXP provides you with a limited set of web tools. Some obvious limitations are no support for shadows and you can’t use the HTML5 canvas to generate content.
Manipulating the canvas: UXP has been around much longer so it takes the cake on this one. If you take a look at this demo for a plugin I made for XD, you can see the plugin not only generates whole UI components, with grouping aligning and the like, but also after generation the user can select part of the generated content and continue editing it from the plugin,. It’s incredibly powerful.
Some of those editing capabilities are expected to ship on Adobe Express by max so I can’t wait to add some more cool features to Vision Board once they ship.
Gotchas, tips, and tricks
No support for Webm
One of the first add-ons I wanted to create was a confetti add-on. To achieve this, I needed to be able to generate a transparent video, and I figured the most obvious way to do this on the browser was to generate Webm videos. Sadly at the point of creating the add-on, those weren’t supported yet.
SVGs
One thing I discovered when working on the Vision Board add-on was that a lot of the components were paths that updated colors, contained paths that had changed colors, or had dynamic content inside.
Therefore, instead of regenerating them on the canvas every time which was memory intensive, I started generating the components beforehand and then using React to update the dynamic parts as the user interacted with the customization options.
At the time of writing this, Adobe Express doesn’t support adding SVGs to the canvas, but you can use the SVGs for preview and then when the user drags to the canvas, generate the image using the HTML5 canvas.
Design
When I was starting out, there wasn’t a clear design guideline to follow, so it was mostly trial and error. Since then, the design team has provided a solid design guideline that you can use to make sure your add-on feels like it’s part of the larger Adobe experience. The guidelines will evolve as new features launch, so it is a living document that changes alongside the APIs that are opened up.
Add-on Samples
When building your first add-on, a lot of things might be unfamiliar, and while the docs are a great reference guide, another really useful resource to look at is the add-on samples. Here you’ll find simple add-ons that cover most of the API provided by Adobe Express, as well as some ideas on design and code organization.
Some bonus add-on ideas
If you’re looking to dive into building add-ons for Adobe Express but don’t have an idea of what to build, here are some you could start with:
Confetti
If at the time you’re reading this there’s finally support for Webm videos, and I haven’t built it yet, you can steal my Confetti add-on idea. It’s one of those things that aren’t easy to create and customize even for experienced designers. So an add-on that helps them generate confetti using a few clicks would be a real time saver and might even encourage more people to add confetti to their content.
Grid pictures generator
One trend that used to be popular on Instagram was to post grids of pictures that form a larger picture. it’s no longer as popular as it used to be, but it could be a fun practice to allow a user to upload a picture and generate the smaller grid pictures that they can download and upload or maybe use with the schedule posting feature.
CSV to slides
This add-on would allow a user to upload a CSV with product details such as a link to the product image, name, price, and varieties (such as . SM, LG, XL). The add-on would then generate images from the CSV rows at common sizes such as Instagram grid and Instagram story sizes.
The add-on should also provide the user with a few themes and an easy way to customize the themes.
You could take some inspiration from https://pitch.com
Video generator
If you’re familiar with FFmpeg, you could create video templates where the user provides some preset data like image, title, and subtitle and then use the add-on to generate a few alternatives dynamically generated using the user-provided content.
The current flow requires the user to browse through templates, find one they like, test it out with their content and if that doesn’t work, go through the whole flow of searching for templates again, so this would be a very useful add-on.
This would be one of the harder ones to build but should be a lot of fun figuring it out.
You could take some inspiration from https://creatorkit.com
Final words
If you’ve gotten this far, you’re probably looking to dive in and build your first add-on; there’s no better place for that than the add-on guides. The partnerships team from Adobe Express has done a really good job making them as concise as possible with a lot of screenshots to get you situated quickly.
As mentioned before, I’ve gone through the review process a few times, so if you need someone to bounce your ideas off of and get early feedback, or if you just want to connect and chat about add-ons and extensibility, or web development in general, hit me up on Twitter at @jestrux.
