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’ve met Ben 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!

---

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!

Abstract SDK

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

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.

Adobe XD Plugins

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

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.

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.

---

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.

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.

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.

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.

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.

---

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

---

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!

🥇 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!

🥈 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.

🥉 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:

• AnimatriX (Framer X) — A hack to allow designers to easily create animations in Framer X without any coding required!
  Download
• Make it Right (Adobe XD) — Test accessibility of typography inside Adobe XD. But then actively! This team made their XD Jason Wrapper and XD Plugin Helper open source!
• Notifeed (Asbtract) — View Abstract’s commit log and get notified of new commits as they arrive, without leaving your IDE! Download
• Take me to the Branch (Sketch + Abstract) — Get back to any branch in Abstract. A plugin need that grew from a personal frustration with huge documents and loads of branches.
• Symbol Autocomplete (Sketch) — Turn wireframes into high fidelity design in a split second. Download
• Components Advanced Tool (Zeplin) — A concept of linking components/symbols together in Zeplin and have a way to refer to them.
• Say My Comp Name (Zeplin) — How do Sketch designs link to a UI Library in a Desin System? This plugin links the two together inside Zeplin.
• Layout Presets (Sketch) — A set of presets of layout guides in Sketch to allow you to use the one you need, when you need it.
• Orbis (Sketch) — A new way of accessing frequent editing tools by popping up a circular interface around the mouse pointer when triggering a shortcut.
• Quotedienne (Adobe XD) — Textual content is important, use Quotedienne in Adobe XD to search for alternative ways of expressing a piece of content.
• Jane Doe (Sketch) — Get diversity into your content, with this Sketch Data plugin you add localized profiles to your design, powered by uinames.com Download
• Sketchy Notes (Sketch) — Write and manage comments right inside Sketch. Download
• Zetch (Zeplin) — A Zeplin extension to work with a design system by converting the Zeplin-generated CSS into a list of classes from an existing stylesheet that match the selected element. Download
• Mapbox Localize (Framer X) — A specialized set of components to allow custom transitions between maps and data Download
• Variable Fonts (Sketch) — The power of variable fonts inside Sketch.
• NeoStyles (Sketch) — No longer a bloated list of duplicate styles. Define a variable for each color and use them across fills, borders, and text.
• Zeplin Chrome Extension (Zeplin) — Bypassing the limitations of the Zeplin Extensions API by using a browser extension to search for any text anywhere inside Zeplin. Download

---

Check out all the photos here

---

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.

Interviews

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

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.”

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, 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 🙃!

Newsletter

To stay updated on future events and the latest news on design tools, sign up for Design Tools News, my monthly email newsletter.