A Case Study on Arranger: Making the Leap from CEP to UXP

Erin Finnegan
Aug 21 · 6 min read
Arranger for Illustrator, available in the Creative Cloud Exchange

You may have heard about UXP, or the Unified Extensibility Platform, which provides a modern solution for extending Creative Cloud applications. UXP-powered extensibility was first introduced in Adobe XD at MAX 2018, and while we’re still a few years from out from integrating UXP with other Creative Cloud applications, we’ve had a lot of questions and feedback from existing CEP and ES developers about what it will be like to migrate an existing extension to this new model. So, this week, we’re interviewing Eugen Pflueger, a developer who ported his Illustrator and InDesign extension to Adobe XD.

Eugen Pflueger is a designer, part-time developer, co-founder of Parce and father of three. He lives and works in Germany. He works as an interaction designer at www.neumannmueller.com | digital media.

Eugen Pflueger, creator of Arranger

Hi Eugen! First off, what is Arranger and what does it do?

Arranger is a plugin for Illustrator, InDesign and now also XD that arranges multiple objects as a circle, a grid or a wave.

What was your motivation to start developing Arranger for Illustrator back in 2017?

I built Arranger to solve a design issue I had: arranging objects in a circular layout. I was working on a project in which I had to do this a lot. I was frustrated by doing this manually all the time. I knew there were other solutions, but they felt too complicated. I wanted something quick and easy. I knew about CEP and HTML plugins for a while — so I simply decided to build my own.

Who is Arranger’s target user?

Arranger is for people / designers who use Illustrator and InDesign for their daily work. It should help them save a few minutes each day.

Arranger for Illustrator, as available in the Creative Cloud Exchange

What challenges did you face bringing Arranger to Illustrator and InDesign?

If I have to reduce it to one line of code it would be this:

csInterface.evalScript(‘arrangeRadial(‘ + JSON.stringify(obj) + ‘)’);

The biggest challenge for me was understanding CEP as a concept. Davide Barranca’s book helped me a lot. At first I had to restart Illustrator after every change in code! This was an exercise in patience. After a while I learned the tricks, but I wanted to quit this project more than once!

Why did you decide to bring Arranger to Adobe XD?

In March 2019 I went to the “Hello! XD plugin” workshop in Mannheim, Germany and learned how to build plugins for XD. Talking to the Adobe team in person was extremely helpful and motivating.

Arranger for XD, available now in XD’s Plugin Manager

As a long time Illustrator user, what do you think of Adobe XD?

XD is great. It feels lighter, simpler, and faster than Illustrator. Adobe is trying new things and I think it works. I really like components and how they sync between documents. Also, I see more and more people that use XD directly for presentations.

But sometimes I miss the anchor point feature… 😀

What were your first impressions of the UXP development process versus the CEP development process?

My first impression was: Whoa this is really easy! Make a change in the code, reload the plugin in XD, and it’s ready. Compared to CEP development it was like fast forward mode. The setup was so simple, and you even have a console window right inside XD.

Illustrator can’t return an event when the user makes a change to their selection. In CEP that is not possible. In XD it was just there. This is a real game changer.

What’s really cool is that you have the three main events that you did not have in CEP (at least not in Illustrator): show, hide, and update.

I know some developers that built workarounds with time intervals in CEP to get this kind of functionality. Update is extremely useful. Now you can react when the user changes something: change the UI, give feedback and support for the particular object the user has selected. Coming from the CEP world this is phenomenal. I really hope this will be the same across all the host apps (Photoshop, Illustrator, InDesign etc.) as they adopt UXP.

Building the UI was easier in UXP because everything is already in XD’s UI style by default. In CEP you have to build your own UI and styles from scratch (or change some CSS libraries, and even then, they never really feel look like they belong in there).

How does the speed and performance of Arranger in Adobe XD compare to Arranger in Illustrator and InDesign?

XD is way more performant; especially as you add more objects. Plus, XD boots faster than Illustrator. 😀

On a side note: While playing around with Arranger for XD I created some cool functionality using XD components and auto animate, which makes Arranger for XD even more powerful. Here is an example:

Arranger for XD in combination with components.

What challenges did you face building on UXP?

The biggest challenge for me was to learn the new API. Especially the Scenegraph¹ and placeInParentCoordinates. It felt limiting at first. I had to make some conceptual changes to make Arranger work in XD (e.g. all objects need to be grouped). This was not necessary in CEP. On the other hand, working with just one group compared to a set of 20 or more loose objects is easier. Right now I am thinking about bringing this to Arranger for Illustrator and InDesign.

I hope that Adobe brings the possibility to place objects in absolute coordinates (something like placeInAbsoluteCoordinates or resolve in InDesign).

There are some other things I would love to be included: an index property, and getting the selection to return objects in index order. Right now you have to travel up and down the Scenegraph a lot.

This month, Adobe XD launched panel plugins, whereas previously all XD plugins were based on modal dialog boxes. Did this make a difference for you?

I started to consider porting to XD when Kerri Shotts presented the plans for panel plugins earlier this year. Modals were not an option for me. After that I was convinced!

What advice do you have for CEP developers who want to bring their plugins or integrations to Adobe XD and/or UXP?

Just give it a go. Now with panel plugins and modals you have a lot of options. The development is simpler and faster than with CEP. The main frustration will be that you can throw away all the workaround code that you wrote for CEP. 😀

Also, when you port your plugin to XD and build it on new technology with different limitations and benefits you may find new ideas that can improve your CEP based plugins as well (like I think of grouping objects now also in Arranger for Illustrator or InDesign).

Any other thoughts on UXP you’d like to share?

As UXP is currently only public for XD, it is hard for me to recognize what is UXP and what is XD, like the limitations on placing things in the Scenegraph. With feedback from developers I hope this will mature in the coming months. (Editor’s Note: It will!) What is really great is that plugins are more present in XD, which should motivate developers.

I am looking forward to having UXP in Illustrator and InDesign.

Top on my personal wish list is something like an App Store for UXP plugins with payments. I know there are some discussions about this in the community. But for me, as a part-time developer I am not interested in developing a payment/licensing solution. I would be happy to give Adobe a share if they would handle that for me.

Thanks for taking the time to answer our questions!

Arranger is currently available for Illustrator, InDesign, and Adobe XD. You can keep up with Eugen by following him on twitter or checking out his website.

[1]: Only XD uses the Scenegraph model. As a host app API, it’s unlikely one will face this problem in other Creative Cloud apps.

For more stories like this, subscribe to our Creative Cloud Developer Newsletter.

Adobe Tech Blog

News, updates, and thoughts related to Adobe, developers, and technology.

Erin Finnegan

Written by

Community Engineer at Adobe. Views are my own.

Adobe Tech Blog

News, updates, and thoughts related to Adobe, developers, and technology.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade