Boilerplates & Other Tools

Facebook’s Design Assistants United Under One Roof

October 23rd, 2015

It’s slowly but constantly becoming a trend that big platforms provide their design tools and other helpers to the community. Twitter has stood out the most lately by making Recess available to the public while Bootstrap is probably their most popular publication to date. Facebook has now expanded their helper tools and united them under one roof.


Facebook: Device Mockups, GUI Kit, Origami and Design Articles

On the website Facebook Design Resources, all contributions published by the developers from Menlo Park so far can be found.


Among them is, of course, the prototyping tool Origami, which we have already presented earlier this year. Origami is a very well documented open-source framework for the creation of design prototypes. The novices can get help in many different ways – there are code examples, video tutorials and detailed documentation.

It’s important to know that Origami can only run with the Quartz Composer and thus, is only available for Max OS X. Additionally, only users registered as Apple developers can use it. Although Origami exports code for iOS, Android and the web, the framework is only available to Apple coders. If you want to try your prototypes, this can only be done comfortably on iOS as only on that platform, the dedicated free app called Origami Live is available. Get it through the iTunes App Store.


The blue giant’s designers publish detailed articles on design decisions and processes, but also on other relevant topics like tips to get through a job interview successfully. Their Medium channel Facebook Design is well worth a visit.


Newcomer in the Portfolio: iOS9 Kit and Device Hands

The really solid design assistants iOS9 GUI Kit for the iPhone and a dozen of so-called Device Hands were newly added to the assortment. Each of the Device Hands shows the same photo of a hand with only the skin colour and the smartphones held being different from image to image.


The images can be used in the applications Origami and Framer, but can also be used as a mockup support in Photoshop, Sketch or whatever your favourite editor may be. Via license agreement, Facebook limits the use of the mockups that can be shared with the public. The Device Hands are only to be used to support mockups and presentations, yet have to be removed in the final product.

The same license applies to the iOS9 GUI Kit. The GUI elements are available as Sketch and PSD. Famous designers like Geoff Teehan, who has already put out several comprehensive GUI kits for iOS with his previous agency Teehan-Lax, are responsible for the contributions.

The GUI kits are available in two variants for both editors. Facebook iOS 9 Light contains a subset of the complete pool and is said to be fast and slim and suitable for 95% of all possible use cases. The version without the Light extension contains elements from almost all areas of the operating system they create in Cupertino.


What to Expect Next from Menlo Park?

It will be interesting to see how the assortment of the Facebook Design Resources will develop in the future. Apparently, Menlo Park still has a lot to offer, as otherwise they probably would not have created a solid roof for their helpers. The Californians can not be criticized regarding quality. In how far you want to rely on Facebook, in general, is of course dependant on your personal perception and whether you like the concept of Facebook as a whole. Most of the time, professional designers don’t have a choice anyways. As Shia LeBeouf puts it: „Just Do It”!


Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Two decades ago he started writing for several online publications, some well, some lesser known. You can meet him over on Google+.