Run a remote hackathon to build an Adobe XD plugin

Originally published at Adobe Blog. https://medium.com/adobetech/run-a-remote-hackathon-to-build-an-adobe-xd-plugin-7b7e624e42d

Learn how Yummygum ran a remote hackathon to build an Adobe XD plugin in one day. Read about the process, tactics, and tools they used.

Introduction

As the world swiftly transformed before our eyes the past couple of months, we found ourselves in an odd place. At Yummygum we always push ourselves to be innovative and stay creative, but lately it has been tough. It can be a challenge to avoid creative fatigue and even sometimes be a struggle to have fun at work.

To help the team process events and take our mind off things, we planned a one day remote hackathon to create an Adobe XD plugin. Hackathons are a great way to connect your team, spark new enthusiasm, foster excitement, and learn new things. Building an Adobe XD plugin is easy, and it is feasible to create something amazing in just one day as we’ve done before. This time, however, our whole team was remote.

Glitch for Adobe XD

To spark your enthusiasm we’d like to share our results first. Glitch is an amazingly simple plugin to create that symbolic “glitching” effect on shapes or text. You’ve undoubtedly seen this before in movies or on YouTube as it’s a popular visual.

View on YouTube

We felt this would be an amazing companion to our Confetti plugin to make a tedious design process easy and fast. It was incredible to build something like this in a short amount of time. Download the plugin in the Adobe XD Plugin Manager or on the website and be sure to tweet us your creations.


Let’s dive into our process.

How to Run a Remote Hackathon

It might sound scary if you don’t know what to expect, but in the current digital age running a remote hackathon is super easy to do. Our team is about 10% remote which gave us limited experience with remote working. There are many tools out there that can help you during this process, and the following tools work with both synchronous and asynchronous communication.

Communication

For quick chats we use Slack, and for longer, more personal conversations we use Google Meet with video. Context-related communication is also often done within JIRA with comments.

Project Management

We track tasks, progress and planning with JIRA Cloud.

Design

Designers are spoiled with many great design tools but the collaboration features in tools like Adobe XD are essential for a remote and continuous workflow with multiple designers. Be sure to check out more details on the coediting within Adobe XD, it’s very smooth.

Development

Most of our dev squad is into VS Code, and actually had a few runs of pair programming during our hackathon right inside VS Code. It was super seamless.

In the end it’s important to trust each other to complete the work, do their best, and trust your process to get the outcome you wish for. It isn’t news but important enough to repeat; communication is essential so invest in a good setup.

Phase 1: Define Scope, Squads, and Timelines

Preparing your day is essential for a smooth process and achieving your goals. A pro-tip is to define your goals and deliverables at least a week before hackathon day. This helps to get everybody on the same page before time is of the essence. It may also help to define squads and separate the work into themes like a website, plugin, AI, marketing, etc.

Set up a detailed plan for the day with timestamps and delivery milestones, and be sure to share this often so everybody is up to date throughout the day. If the whole team understands what needs to be done, by whom and when, it’s go time.

Phase 2: Dive in, Share and Ask

Being distant from your colleagues can introduce a struggle to communicate, and having kids or running cats at home can demand your attention. Be sure to respect each other’s household situations.

That said, our mantra on a day like this is “share early and share often”. This keeps your colleagues up to date and allows them to chime in whenever necessary. As a bonus, it shows when you’re available for a quick chat if you share something.

Planning a milestone call on Google Meet is also amazing to get direct input and thoughts from others. For example, we planned a call to share the first alpha version of the glitch effect with the full team. This allowed designers to give quick UX feedback on how the plugin should work.

End phase 2 around lunch time to share progress and plan for the rest of the day.

Step 3: Trim your scope and finalize

As lunch is about halfway through your day, it’s a good moment to review and assess if you need to make adjustments to your scope and plan accordingly. In our experience we’re usually too ambitious in our scope so we trim it after lunch and discuss the next steps.

Make that final sprint to the finish line and collaborate towards the final deliverable.

Step 4: Celebrate with drinks and a video call

As shared by a lot of people on Twitter, having a bit of down time and relaxing at the end of the day does wonders. Make sure to celebrate the results of the day — regardless of if goals are met — by cracking open a bottle or soda together on a video call. Briefly discuss how the day went, and what you can improve next time.

Quickly switch to a more social call with topics like weekend plans (tip: plan your hackathon on a Friday), pets, kids, family and other fun stuff. End the day on a happy note of fun stuff to come in your personal lives. That concludes a full day of working together professionally to a more informal setting.

End the call with an applause for yourself and the team.

Your turn

Excited yet? We hope this article is an inspiration to start your own remote hackathon soon. Get started with an Adobe XD plugin and download Glitch to make some glitchy artwork.