November 12, 2018

The Design Tools Hackathon 2018

A recap of 2 days of hacking at the Wix.com spaces in Tel Aviv 🇮🇱

Kicking off the event with 80 participants traveling from 15 different countries around the world.

Last year I organized the Sketch Plugin Hackathon at IXDS in Berlin. That edition was the main inspiration to host a similar event again. As you might know, many design tools got extensible over the last year, and that called for a broader hackathon theme, therefore the topic was Design Tools in general this year.

So, why Tel Aviv? I had met Ben Benhorin from Wix at the very first tools hackathon in Hamburg. One I participated in. It was such a great experience, and we’ve stayed in touch since. Ben was participating in last years Sketch Plugin Hackathon in Berlin as well, and right after the event he coined the idea to host a next edition Tel Aviv. Sounded great! But who thinks that will ever happen!?

And here we are, after an awesome 2 days at the Wix offices in the port of Tel Aviv. I’m still buzzing with positivity from the vibe, exciting demos, inspiring talks, the new friends I made, the weather, and the amazing food of Israel.

We invited speakers from Abstract, Adobe, Anima, Framer , InVision, Sketch, Wix, and Zeplin for giving a talk at the event. All of the presentations are recorded and available for you to watch. See them below!

Abstract, Adobe XD, Framer, Sketch, and Zeplin are all tools that are now extensible as well. And all these tool companies also brought their engineers to Tel Aviv to help out participants to make new tools on top of their platform.

It was very cool to see that about a third of all participants flew from abroad to Tel Aviv to join this event. We had people traveling from 15 different countries, and 80 participants in total. Check out the impressions video!

Impressions video of the Design Tool Hackathon 2019

Day 1 — Technical Talks

The first morning was focused on learning how to get started hacking plugins and extensions using the tools from Abstract, Zeplin, Adobe XD, Framer, and Sketch. If you want to learn this but missed the event, or simply want to relive them, check out the videos!

Crowd watching the Abstract SDK presentation Sertaç Olgunsoylu from Zeplin on getting started with Zeplin Extensions Kerri Shotts from Adobe on getting started with Adobe XD Plugins Hailey Probanz from Framer introducing Framer X Jonas Treub from Framer introducing Framer X and designing with components Mathieu Dutour from Sketch introducing the new Skpm, and getting started with Plugins.

Abstract SDK

Kevin Smith and Tom Moor from Abstract introduced the Beta of the Abstract SDK, which they specially launched just before the hackathon.

Kevin Smith & Tom Moor from Abstract introducing the Abstract SDK Beta

Zeplin Extensions 101

Sertac Olgunsoylu — Software Engineer at Zeplin focussing on their Extensions Platform — introduced us to the possibilities to build on top of Zeplin.

Sertaç Olgunsoylu from Zeplin on getting started with Zeplin Extensions

Adobe XD Plugins

Kerri Shotts from Adobe introduced the new Adobe XD Plugins Platform, and gave extensive examples how to do cool stuff in the UX focused drawing tool.

Kerri Shotts from Adobe on getting started with Adobe XD Plugins

Framer X

Hailey Pobanz and Jonas Treub from Framer explained the crowd how Framer X is different from all the other tools, as it’s in principle a tool to bring design coding closer together with React Components.

Hailey Probanz & Jonas Treub from Framer introducing Framer X and designing with components

Sketch Plugin Ecosystem

Mathieu Dutour — who is leading the Plugin Ecosystem at Sketch — announced the new UI for the Sketch Plugin Manager Skpm, and more good news around plugin development. This is a great talk to get started building a Sketch Plugin.

Mathieu Dutour from Sketch introducing the new Skpm, and getting started with Plugins.

Day 2 — Inspirational Talks

The second morning was less technical, and less about how to develop for a specific platform or tool. The talks on this day were about sharing experiences and challenges building a tool, a design system, and some thoughts on the future of design work.

Crowd watching the Abstract SDK presentation Sertaç Olgunsoylu from Zeplin on getting started with Zeplin Extensions Kerri Shotts from Adobe on getting started with Adobe XD Plugins

Anima — Design to Code

Avishay Cohen from Anima talked about their journey and how he sees the changes of the future of work for designers.

Avishay Cohen from Anima

Design Systems & Me — Wix

Ben Benhorin from Wix extensively shared their challenges and solutions for the Design System they use across all their products and how it’s sometimes needed to come up with custom solutions.

Ben Benhorin from Wix

Let’s Talk Design Systems! — InVision

Basak Haznedaroglu from InVision shared how their remote-only company deals with the approaches and challenges of a Design System.

Basak Haznedaroglu from InVision

Design Engineers

And then we thought that was gonna be it… But Mathieu offered to give another short presentation about the future of design, and how designers should become Design Engineers.

Mathieu Dutour from Sketch on Design Engineers
Crowd watching the order of the demos being announced
Crowd watching the order of the demos being announced

The Hacking

After the talks on the first day and during the lunch break, there was time to prepare a short pitch presentation. Everyone could fill out an A3 sheet describing their ideas, the tool they are building for, and the expertise they need from others. We had 34 pitches in total. And teams started to form quite naturally after they pitched it. We shared the scans of the sheets in Slack.

And off they went! The participants divided themselves over the 2 Wix spaces and set up their hack rooms or casually started building around tables in the open space. With the help from all supporting engineers during both days, quite a bunch of teams came up with a real working demo!

It was great to see all those plugins and extensions built in a little over a day. By 6pm on the second day, 17 teams had a working proof of concept and presented their hacks to all other participants. Some of them already had a Wix landing page, and others published the code on GitHub or to the VSCode store!

We recorded all the demos, so you can enjoy it as if you were there. It’s 1:10h worth of short and sweet presentations that I find inspiring and above all, a lot of fun to watch!

The Hack Demos

Demos of the Design Tools Hackathon 2018
The Jury! From left to right: Ben (Wix), Mathieu (Sketch), Berk (Zeplin), Basak (InVision), Tom (Abstract), Hailey (Framer), Ash (Adobe) The Jury! From left to right: Ben (Wix), Mathieu (Sketch), Berk (Zeplin), Basak (InVision), Tom (Abstract), Hailey (Framer), Ash (Adobe)

And the winners are… 🏆

The jury consisted of Ash (Adobe), Hailey (Framer), Tom (Abstract), Berk (Zeplin), Mathieu (Sketch), Basak (InVision), and Ben (Wix). They rated the demo of every team based on originality, execution, and quality of their presentation. And here are the winners!

Demo of the winner: Symbol Autocomplete
The winner: Symbol Autocomplete

🥇Symbol Autocomplete

Draw some rectangles and turn it into a design using one keyboard shortcut. That’s exactly what this Sketch plugin aims to do. You would wireframe your design, and have the flexibility to turn it into high fidelity screen designs with the symbols you already created. Watch their demo here! And check it on GitHub!

Demo of the runner-up: AnimatriX
Runner up: AnimatriX

🥈 AnimatriX

Easily create animations in Framer X without any coding required! This gets you a little closer to the possibilities of Framer Classic, but then with the power of a bunch of custom exposed props in the properties panel. Watch their demo here! And check it out on GitHub.

Demo of the third place: Sketchy Notes
Third place: Sketchy Notes

🥉 Sketchy Notes

When sharing a WIP Sketch document, you know the struggle of switching tools to write or manage comments. Well, not anymore with Sketchy Notes! It provides a neat little UI with an overview, allowing you to jump right to any comment, and also hide or delete one, or all of them together. Watch their demo here! And check it out on GitHub.

An overview of the 17 presented plugins / extensions / concepts:

Impressions of the two days

Scholarships

To make this event more diverse and open to any kind of person, we decided to partner up with the tool companies to provide scholarships to cover for flights and stay. Scholarships were intended for those who demonstrate financial need, students, and members of underrepresented communities at tech events.

Thanks to our scholarship sponsors! #DTHack18

Interviews

All scholars were very engaged during the event, and we interviewed a few of them to learn from their experiences.

Team ‘Zetch’: Amina, Camille, Caitlin, and Felipe. All joined through a scholarship.

Camille, Developer from London:

I was recommended Design Tools Hackathon by a friend who attended last year in Berlin and raved about it! The idea of bringing together a group of people working in adjoining spaces to problem solve really appealed to me. What I learned? As a developer, I use design tools every day but not as my primary context, so communication and the collaborative capabilities of design tools are crucial, and it was great to hear from a diverse group about their workflows.

Caitlin, Software Engineer from Washington, D.C.:

Though I’ve been working as a developer for over 2.5 years now, I’ve never had the opportunity to participate in a hackathon, and I loved the idea of meeting other designers. I was honestly amazed by the amount that I learned in such a short period of time. First of all, I learned about tools I never even knew existed which are solving incredibly relevant problems in design and development, like Abstract, Zeplin, and Framer. I had gotten into a rhythm in my development process where I was using the same tools over and over again, but the Design Tools Hackathon definitely opened my eyes to some of the cool things I was missing out on. I was blown away by some of the awesome tools and extensions that were made in only 2 days, and I left the hackathon feeling completely inspired to take a different perspective on how I tackle projects in my day-to-day life. Instead of getting into a habit of doing things manually, you can build a tool that automates processes or simplifies your workflow, which can make your life easier in the long run.

Felipe, Visual & UI Designer from Brazil:

During the hackathon I learned to work as a team and to look for opportunities with great pleasure and determination.

Part of team ‘Variable Fonts’, scholars: Johanna, Nicole & Martin.

Johanna, student Interaction Design at HfG Schwäbisch Gmünd in Germany

Coming from a small University, I’m always looking for opportunities to meet other people from the design community. That made the hackathon the perfect opportunity to finally start off. Talking to other participants and toolmakers is a great motivation to keep working on my ideas. I learned a lot about coding for the plug-in and extension ecosystems of Sketch and AdobeXD. I got insights into what you can do with them and where the limits are. It is also amazing to see the results from the teams at the end of the hackathon and how well some of them performed after less than two days of work.

Nicole, student Media Technology in the Netherlands:

Having a coding background, but being passionate about design more than the average developer, building something for designers just seemed like the perfect blend to join this hackathon. Most inspiring for me was to see designers and developers melt into one. The hackathon not only allowed me to get to know people from all over, accompanied by their different career backgrounds, but also new design tools I was not familiar with before and I am dying to try out. After the Hackathon I’m not only inspired, but also very motivated and pumped with the positive energy, which I want to thank for again!

Pallavi presenting for team ‘Make it Right’

Pallavi, Senior Information Architect from India:

Why I wanted to join this hackathon? I am a strong believer of communities. It helps one to learn and grow to contributions of its members. I found their idea of hacking for design tools extremely interesting and unusual and, secondly, the idea of collaborating with designers and developers from around the world was new, scary and fascinating, all at the same time. I teamed up with three Germans and an Israeli and we were ready to hack our way through designing a plugin for Adobe XD for accessible typography. My most inspiring moment was after the presentations. I found people appreciating each other for their presentations and ideas. It’s the feeling of not trying to compete with anyone and having fun while building and creating stuff which you seldom experience in your daily life.

Thanks!

A very big shout out to Einat & Ben from Wix for their great efforts on hosting the event. Also, big thanks to the camera crew and all the others from Wix who helped making this event possible! 👏

Thanks to all our amazing scholarship partners for making this event possible for so many talented and involved participants.

And above all, thanks to all you participants for making this another memorable edition. You were all truly kind and smart people and I’d love to meet you again sometime!

What about next year?

A common question that was brought up by many before, during and after the hackathon. There were some people already hinting at hosting the next one, but let’s see! Anyone interested in having it in SF, London, Italy, Greece, Estonia? I’m open for having a call 🙃!