The Berlin Sketch Plugin Hackathon 2017
A recap of 2 days of hacking at the IXDS studio in Berlin with an amazing bunch of people. Best weekend of the year!
Disclaimer: Only an 8 minute read, but almost 4 hours of content!
The last weekend of October we — the Design Tools Berlin collective — hosted our first big event at the lovely IXDS studio. It was time for the Sketch Plugin Hackathon—We had a blast!
The idea for this event arose over 6 months ago when Sergi and I caught up. We felt we had to organize it, because we had such an awesome experience creating Sketch Runner at the 2016 hackathon in Hamburg. It needed a sequel. There’s a need to improve the tools we use on a daily basis, and events to bring tool makers together are in my opinion the best way to spark ideas and push boundaries.
So we set out to create 2 days with an inspiring program of talks and enough time around it to actually work on Sketch plugins. We managed to get key speakers from Sketch, Abstract, Framer, Facebook, SoundCloud, Atlassian and Brainly. This turned out to be a great mix of talks.
The limited space allowed us to invite 70 participants. And we received way more applications than that. It is truly amazing to see that we had so many people over in the studio. And they traveled from 13 different countries all the way to Berlin to join us.
After the talks and a proper lunch on day 1, the participants pitched their ideas in 1 minute and started forming groups. Then it was time for actually doing some work and sketching out ideas and building the plugins. Pieter and Mathieu from Sketch were present both days to help people out if they had any questions.
The Talks
Day 1 was fully packed with talks from Sketch, Facebook, SoundCloud, Brainly & Atlassian. It was very cool to see how different types of companies approach their tooling with a focus on only internal tools, or tools for all designers to use.
Note: We don’t have clearance for publishing the Facebook talk. With a little bit of luck we might be able to publish it later.
Music by LY•MA
Update Nov. 30: We received approval to publish the Facebook talk! 🎉
Facebook: Design Systems & Tools at Facebook
Cristobal Castilla & Zack Schiller from Facebook show you how their teams collaborate. The interfaces team uses the internally developed tools to conquer the big challenges they face.
SoundCloud: Design Tools at SoundCloud
Gerrit Kaiser from SoundCloud presents what tools you can build to simplify internal workflows without needing a big design tools team.
Brainly: How to Sketch a Style Guide
Konrad Dzwinel from Brainly showing off his Sketch plugin experiments. What about rendering a website inside Sketch?
Atlassian: Building Sketch plugins for the Cloud
Tim Pettersen from Atlassian talks about how integration driven the company is and explains all about the Jira integration for Sketch.
Sketch: Let’s Build a Keynote Killer
Sketch’ newest team member Mathieu Dutour live codes a keynote-like plugin and explains the ins and outs of doing that.
Framer: Design, Develop, Collaborate, Deploy
Koen Bok talks about the history and future of Framer. Are they taking on Sketch as well?
Abstract: Redesigning The Design Process
Josh Brewer explains why and how they started with Abstract. He also shows off some new features in the meantime.
The plugin presentations
It was such an incredible moment to see all those cool plugins built in a little over 24 hours! By the end of the second day, 15 teams had a working proof of concept and presented their hacks. Some of them were very prepared and already had a landing page live and published the code on GitHub.
We recorded the demos so you can relive it as if you were there. It’s 55 minutes worth of short and sweet demos that are all unique and a lot of fun to watch. Enjoy!
An overview of the 15 presented plugins:
- Get Override — The overrides sidebar can become a mess sometimes. This plugin aims to make this easier. Inspired by Sketch Runner.
- Knowledge Drop — Access any design principles or guidelines right where and when you need it. A panel in Sketch with quick access to these lists.
- LaTeX Sketch — Generate scientific formula in Sketch. Because when you need to design a scientific poster, you still want to do it with Sketch, right?!
→ Download - SiteMapper — No more manually designing sitemaps. Just generate them. And update them when needed. All based on the structure of your artboards.
- Translate.me — Translations. Simplified. Translate your Sketch text layers, artboards and pages in over 100 languages with Translate.me plugin. Powered by Google Translate.
→ Download - Gif.me — Have you ever been working in Sketch and thought “this page could definitely use more cat gifs?” With the Gif.me plugin you can play gifs and videos inside Sketch while you’re designing.
→ Download - SVG Symbols — Re-use symbols across platforms with
.svgsymbolfiles. They contain additional metadata about the structure and semantics of the symbol and keeps it in sync in for example your styleguide or in Framer!
→ Download - Phil — The struggle of having content editors to add and change texts in your designs, or worse: seeing it in the live product later, and it doesn’t work well. This is what Phil solves. An easy way to fill content through a web interface right into a Sketch file!
→ Download - Text Style Pro—Text Styles are currently a bit limited in Sketch. So this team set out to make it more flexible! Build a style from a base font, size and color, and change it to your liking.
- Point Break—Live breakpoints in Sketch. A way to preview your truly responsive designs by just resizing the artboards. Just like you would with a browser. And it worked really well!
- Simple Symbol Name—Symbol names can become very long with all that nesting. With this plugin you simply decide to show the full path or omit it all and just show the last part as the layer name.
- txt2image—Replace any text or shape with an image. Hooked up to various API’s.
→ Download - Bootstrap Helpers—Using bootstrap grids? Or grids in general? This plugin generates a grid. And even a grid inside that grid! All your elements then nudge and move based on this grid.
→ Download - $var—Create a text variable once and change it whenever you need. Always keep your content in sync with this simple panel.
- Syntax Highlighter — Automatically highlight the syntax of any code snippet, right within Sketch.
→ Download
And the winners are… 🏆
A jury formed by Pieter and Mathieu (Sketch), Josh (Abstract), Jorn (Framer) and Hans (IXDS) picked 3 winners. It turned out we had to pick 4 winning teams as the second place was a tie. It was well deserved!
🥇 Point Break
A very convincing demo by this duo that showed how to design a responsive artboard almost effortlessly! Point Break, because Breakpoint would be a lame name. They promised us to publish their plugin once it was a little more polished. So be on the lookout!
🥈 Gif.me (shared 2nd place)
A true hack, live videos or Gifs inside Sketch. So if you ever been working in Sketch and thought “this page could definitely use more cat gifs?” Get this plugin! If not, still give it a spin, it’s kinda magical.
Download it at sketchgif.me!
🥈 Translate.me (shared 2nd place)
It’s super powerful to translate your design and see if it works in other languages. Translate.me simplifies this process. Translate any text layers, artboards and pages in over 100 languages. Powered by Google Translate.
Get it!
🥉 SVG Symbols
SVGSymbols aims to make Sketch symbols re-usable across platforms. It exports.svgsymbol files with additional metadata about the structure and semantics of the symbol. It keeps the overrides (text fields and image placeholders) editable elsewhere. For example in your styleguide or in Framer (using framer-svgsymbols).
See you next time?
I met a bunch of friendly, smart and cool people that are excited about design tools. It was an amazing event and we definitely felt this needs another sequel! Next year in Berlin again? Or London, Barcelona, SF? Who knows!
Interested in working with us? Get in touch via hello@designtoolsberlin.com.
We’d like to thank all our partners!
This event wouldn’t have been possible without the support of our main partners Sketch and IXDS. We also like to thank our other partners for providing licenses, promo codes, swag, food & drinks.
And of course to all the participants: Thanks a bunch 🙌
It wouldn’t have been possible without you! And we hope to see you again at one of our next events. Keep an eye out via Twitter @DesignToolsBerlin or our website www.designtoolsberlin.com.
Want to be the first to hear about our next event?
Sign up for the newsletter via news.designtoolsberlin.com.
