Painting with Code: How Airbnb pushing the envelope means great things for us!

By James Lee
-
10 May 2017

One of our code ninja's shared this brilliant article with a few of our designers (shout out to you Buu), where he simply shared the URL and stated, "Bloody finally...".

Bloody finally was right!

Airbnb, a company never foreseen to be behind the eight ball when it comes to technology, has just released a React enabled Sketch plugin. The plugin will enable designers to bridge the gap between design and development and allow them to, in realtime and at scale, generate content for a vast array of content types and sizes, as well hook into whatever that the web can offer. Aside from it being a super cool concept, the extremely interesting thing for all of us working on Outfit was it's striking resemblance to our templating engine. It seems mainstream technology is finally catching on to the capabilities of code based design!

As Outfit is a template based brand/marketing system that allows clients to create and generate vast quantities of collateral from HTML/CSS/JS based templates, some of what Airbnb exemplified in the article were things that we have already implemented into our templates or things that are far from our minds. Most notably the example of using CSS's powerful Flexbox functionality for dynamically updating layouts is something that is already a staple of Outfit templates and a core benefit of Outfit from day one. Reusability and template fluidity is a must for us at Outfit.

Screen Shot 2017-05-08 at 12.37.47 pm.png

Caption: Automatically testing flexible layout components on multiple screen sizes, Source: Airbnb

One thing that really interested us, was their use of Google's Translate API to automatically localise the language of a particular ad. While it's common knowledge that Google Translate can, at times, produce colourful translations to even the simplest of phrases, from an efficiency standpoint it can mean that translation teams at least have a starting point where only content refinements are needed.

Screen Shot 2017-05-08 at 12.37.12 pm.png

Caption: Using the Google Translate API to automatically translate text into multiple languages, Source: Airbnb

While Airbnb is only just catching on to the capabilities of code in modern design practices, at Outfit, we don't see this as a time to sound the alarm bells - it can only mean a greater conversation around products like our own. Which is great news in our book - so thank-you Airbnb and keep pushing the boundaries for the smaller guys!

If you haven't already, do yourself a favour and read the original article by Airbnb Design Technologist,  Jon Gold here.

Share

Choosing fonts for different channels

How to choose an accessible font