2017

Berlin Sketch Plugin Hackathon 2017 @IXDS

A recap of 2 days of hacking at our Berlin studio with an amazing bunch of people. Best weekend of the year!
Written by our Designer Roy van Rooijen, who organized the event with Design Tools Berlin.  You can read more from Roy on his Medium page. 

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

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.

Gerrit Kaiser: Design Tools at SoundCloud
Brainly: How to Sketch a Style Guide

 

Konrad Dzwinel from Brainly showing off his Sketch plugin experiments. What about rendering a website inside Sketch?

Konrad Dzwinel, Brainly
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.

Tim Pettersen, Atlassian
Sketch: Let’s Build a Keynote Killer

 

Sketch’s newest team member Mathieu Dutour live codes a keynote-like plugin and explains the ins and outs of doing that.

Mathieu Dutour, Sketch
Framer: Design, Develop, Collaborate, Deploy

 

Koen Bok talks about the history and future of Framer. Are they taking on Sketch as well?

Koen Bok, Framer
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.

Josh Brewer , Abstract
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!

The plugin presentations
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 .svgsymbol files. 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).

Get it here!

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.