Building XD Plugins: A Designer’s Story
Building XD Plugins: A Designer’s Story
How Designer Valentin De Bruyn Learned JavaScript to Publish a Plugin for Adobe XD. The Result: New API Skills and a Streamlined Workflow.
Building XD Plugins: A Designer’s Story
Editor’s Note: Our featured community member this week is Valentin de Bruyn. He works as Lead designer at Etamin Studio in Clermont-Ferrand, France. He recently taught himself JavaScript to publish his first plugin for Adobe XD.
We’d like to highlight his experience building out the “Fit to Artboard” plugin to illustrate something amazing about the Creative Cloud community. APIs used for finding solutions to problems through code aren’t just for Computer Science majors or experienced developers. Creative professionals can also learn how to create plugins that solve their needs, even sometimes leading to publishing a plugin on the Plugin Manager for others to use in their work.
Seeing others learn how to create a plugin and then launch it is something we are happy to highlight for others getting familiar with the platform!
— Rob Kleiman, Platform Marketing Associate, Developer Experience
The XD plugin developer forums are a lively place. We have a great section for folks to introduce themselves so they can connect and get support through the journey of creating their own plugins.
Valentin de Bruyn, Lead designer at Etamin Studio in Clermont-Ferrand, France.
In this post, we speak with Valentin, who recently shared his plugin with the forum.
Like many others in the community, his journey from designer to developer illustrates how creative users can use APIs in interesting ways to streamline and enhance their work.
How did you get into design?
When I was eight, my dad bought a copy of Adobe Photoshop. Then two years later, he got Macromedia Flash. From there, I started tweaking video game assets for fun. Back then I had a lot of fun creating tiny flash games for my friends which I brought to school on floppy disks!
Then I went to design school at both ESAAT and Gobelins in France. Here I worked hard to learn how to design apps and websites. I met some cool developers while in school. We loved working together and ended up creating our own studio. We’ve been working together now for eight years.
How do you currently use Adobe XD in your workflow?
I currently use Adobe XD**as my go-to tool for ideation. I love its simplicity and speed of use. I use it for tasks that span from wireframing to building design systems. In terms of my overall design workflow, after I create something in XD, I’ll either hand off to developers or build the front-end myself, using Webflow.
But time and again, I found myself manually manipulating objects on the artboard, over and over. It was this repetition that motivated me to start developing my Fit to Artboard plugin.
It came down to this:**I wanted to save time when designing. Building this plugin has saved me a lot of time per week that would be lost due to the direct manipulation of these objects from within the application.
What does your plugin do?
Fit to Artboard helps users achieve two really simple things:
- Expanding the width of a rectangle to fit the width of the artboard.
- Expanding the height of a rectangle to fit the height of the artboard.
This functionality is useful for creating topbar shapes, or sidebars. Instead of doing it manually, the plugin brings two keyboard shortcuts to achieve these actions really fast. When hitting Cmd+Shift+H or Cmd+Shift+N to resize things in a blink, I just feel like a badass (because I built them).
A quick overview of how the plugin works:
Why did you want to build this? Who is it for?
I’ve been thinking of ways to add some features to XD that match the actual workflow of a professional designer like me. While freedom and direct manipulation on the screen are great when we explore design directions, playing with shapes, colors and styles, we find specific shortcuts and constraints-based tools can greatly improve the speed of work at my studio.
We use direct manipulation to find a design direction, to define the look & feel of the app or website we are designing.
We use constraints-based tools as well, which are of great help when building design systems and creating the actual layouts and templates for the work.
These tools help us achieve consistency in things like spacings, colors, and sizes. While CSS can provide an easy way to make documents have the same properties, it’s hard to do with direct manipulation tools.
So I created this plugin for anyone that finds themselves repeatedly resizing shapes to an artboard (these could include topbars, sidebars, section backgrounds).
What challenges did you face bringing “Fit to Artboard” to XD?
Firstly, I was a beginner in JavaScript when starting this project, so basic things might have taken me longer than they would have for a seasoned developer.
From there, the next challenge: it took me a while to understand the scenegraph / scenenode paradigm.
I followed a bunch of basic JS tutorials on Youtube and read the Plugin API documentation a dozen times (back then it did not have a search feature).
I got around these challenges by posting a question on the XD Plugin Developer Forums.
During the plugin review process, my plugin got initially rejected because I did not handle errors while trying to execute the shortcuts on focused elements that were not supported (i.e. groups, symbols, text…). Through some more clarification and visiting other resources available, I was able to get that sorted out and get Fit to Artboardpublished!
The answers helped me build out the error handling functionality in my plugin so that I could get my plugin listed in the plugin marketplace.
How long did it take you to build?
After getting familiar with some JavaScript basics from online tutorials, it was probably ~ 20 to 30 hours, all in. But what’s surprising and a bit unexpected is how**I felt quite empowered by acquiring the ability to tweak my main work tool, Adobe XD. This is a great feeling!
Do you see yourself continuing to build or ship plugins in the future? What are some use cases you’d like to explore?
Definitely. I am exploring different ideas right now that revolve around setting constraints (spacing, scales, stacking…) and toying with ideas of a very different way of creating UIs.
I’ve also built a plugin as a pet project called*[Stack It*](https://forums.adobexdplatform.com/t/hi-there-im-valentin-i-developed-the-fit-to-artboard-plugin/1584/3?u=robk) to boost my own workflow.
This tool is the first step towards a larger one I might publish one day. I use it to stack elements vertically or horizontally with a custom spacing value, with the press of a couple of keys on my keyboard via the shortcut I made.
Are there any other thoughts on the experience you’d like to share?
I find that current UI Design Tools out there inherit lots of features or design components from their roots originating in Print Design Tools. It seems most of the new and innovative features recently implemented in my favorite tools like XD have been born out of plugin ideas and/or detailed user requests, which is exciting to see.
We spend so much time working & using these software tools. Let’s not forget to regularly cut ourselves some slack and make time to dream of what the truly game-changing XD update could be or how the perfect Design Tool might behave. This field is still quite in its early days so it is exciting to think that there’s still plenty of room for pioneers and new paradigms to emerge!
What advice do you have for designers who want to try creating their own XD plugin?
My advice is: jump into it, watch a few basic JavaScript tutorials on Youtube, read the API documentation, have a look at the plugin examples and tutorialsmentioned there.
You should be up and running your first plugin within a day or two! The whole experience is empowering and will make you more engaged with your design tool.
Fit to Artboard is currently available for Adobe XD. You can keep up with Valentin by following him on Twitter or checking out his website.
If you’re just getting started with building Plugins for Adobe XD we encourage you tohead to the Community forums and introduce yourself.
Let us know what you’re working on or ask questions there and get the support you need to be successful. We want to hear from you.
For more stories like this, subscribe to our Creative Cloud Developer Newsletter.
By Rob Kleiman on February 26, 2020.
Exported from Medium on August 4, 2020.