Building a Visual Language

May 27th 2016

Since the design language and code are often shared, we can now build and release features on all native platforms at roughly the same time. Development is generally faster, since product engineers can focus more on writing the feature logic rather than the view code. Additionally, engineers and designers now share a common language.

I'm glad to see Airbnb sharing more of their design process and evolution. This post by Karri Saarinen is a great start. A few observations:

  • My favorite part of this entire post came in the last footnote, describing how the Airbnb design team uses git to version and maintain a master library of components. This could should be an entire series of posts on its own.
  • We did not get to see what didn't ship. From a process perspective, I think the post offers a good amount of value. But from a tactical perspective I wish that more literal work was shared so the community can understand why final solutions were chosen. It sounds like this was the first in a series of posts, so I'll keep my fingers crossed for future deep-dives into why they landed on certain components and styles.
  • If designs aren't mapped to code then a "system" is not a true system. Airbnb is investing in tools that map sketch files to production code; this is a step closer to the future of software design. Let's hope for a future where we can get a peek at how these tools work, and ideally open source them so that we can all build better software, faster.

We initially tried to create these components as symbols in Sketch, which resulted in a mess. Even now, our Sketch files are sometimes challenging to maintain. Moving forward, we hope to find better ways of maintaining and creating new components.

  • This one hits a bit too close to home. If anyone has figured out a better way to maintain Sketch files please please please write about it. I've gone all-in on symbols to the point where my files crash from bloat. I've gone all-in on layer groups to the point where it was impossible to maintain changes. I've gone all-in on component-files to the point where it was impossible to name, share and maintain the system. My next move is to just code everything. That way the end result will by default have proper reusability, version control, and collaborative iteration. Is this the best solution that exists right now?

Overall: this post is a start. And a good start, at that.

At the very least I hope it inspires more teams to keep sharing their challenges and processes to be better. I'd love to see more work that didn't ship and reasoning for the why. I'd love to see more of the tools that are being used to maintain Sketch files and map them to code shared and open sourced. But of course, I'm asking for a lot.

I believe we'll get there.

More Posts

Copyright © 2016