Creating a Design System for Words With Friends

Greg Hill | Associate Experience Design Director

Image for post
Image for post

I’ve been interested in creating a design system for Words With Friends since Airbnb began publishing articles on their system way back in the day. The engineering team recently decided to change our code base from Native iOS and Android to React Native so I felt like now was the time to push for a Design System like theirs. I attended a presentation at Slack Headquarters about their system that left me more educated, motivated, and with a plan to get funding for the project. The thing that was immediately clear was that I needed to get an engineer or two onboard. As I dug in I also realized I knew less about the capabilities of Sketch and its plugins than I would have liked to admit at the time. There was a lot of work ahead, but I was excited and I knew what I wanted to accomplish.

3 Goals for our Design System

  • Increased velocity

We decided that if we wanted to get buy-in we should focus on the first goal so that’s where we started. I also knew that some of the best engineers, and designers for that matter, want to work on the cool, new thing. Finding talented, passionate people to collaborate with was not difficult and getting buy-in was pretty easy once the benefits were laid out for the major stakeholders. For those struggling with getting their project funded here are some of the many other benefits for creating a design system. We’ve found they increase quality, make on-boarding / knowledge transfer easier, reduce unique declarations/components, make sharing ideas easier, give more people the ability to design / prototype / code, and are helpful for PR / recruiting.

Perhaps it would help if I defined what I’m talking about a little more. A design system is really just a formal process and the documentation associated with that process. For us it came in three parts outlined below.

Image for post
Image for post
  • Design. The workflow should allow designers to update/save from sketch and make their work available to the engineers as close to instantly as possible.

What was involved

Converting all of our files to Sketch and creating a robust library of symbols / components was the first step. For Words With Friends it was a total of 54 screens, 600+ components, and still counting. I needed to do an audit of the existing working files and design specs to get a sense of where we were. Our files were a mess, scattered in pieces of photoshop and sketch files. It turns out I basically needed to create all of this from scratch since the files were not set up in a way to create a library. A past employee had taken a stab at creating the libraries, but they weren’t created in collaboration with engineering. If you want your Design System to be something both disciplines find useful, frequent communication between Engineering and Design is essential. Make sure to include them in setting rules for naming layers, files, and file/folder structure as well. Big shout out to Peter Turner and Himanshu Masand for their hard work, input and can-do attitude. Creating a design system is definitely a team effort and it was great working with such talented, passionate people. Find people who are equally as invested and motivated as you are to make it happen. While it was easy to get buy-in for the system, we still had a limited window of time to execute it. Some things could wait, but we needed to build the foundation as we made the transition from Native to React Native. Pete was a rock star here, he built the system in a way that was easily scalable. I’ve outlined what we accomplished in Milestone 1 below. This was all done in little more than a month’s time for the most part by Pete and I, but with constant discussion/collaboration with the other engineers and designers — some of whom I call out later.

Milestone 1

  • Created Sketch libraries for existing screens and features.
Image for post
Image for post
Here’s a peek into the main symbol library and structure of the components. For a game with over 50 screens there are 600+ so organization is key.

A big part of this project was documentation. Since this was to be used by engineers and designers in multiple locations it was important that the documentation spoke for itself and that people could use it without much guidance. Here is the link to version 1 of the Sketch Process documentation and the guidelines for naming files.

Image for post
Image for post
Our short term solution for missing data (text wrapping, responsive layout rules, etc.)

Basic Workflow

Since efficiency was an important goal we wanted to limit the amount of time designers spent preparing files / assets /specs for engineering, as well as the amount of time engineering spent implementing, and polishing UI. For both disciplines it was important to make things quicker and easier. We experimented with a lot of software — Zeplin, Fractal, Sketch, Measure, Craft, etc — but ultimately the solution we landed on was to take the data straight from Sketch itself. Zeplin is being used in the short term to document some additional specs. Here’s the designer and engineering workflow.

Image for post
Image for post
Design Pipeline


  • Design as usual in Sketch.
Image for post
Image for post
Engineering Pipeline


  • Pull libraries from design repo.

What’s next?

This is just the beginning for Words With Friends. We’ll continue to refine the process as we use it and as new team members join the team. We also want to increase the capabilities and eventually export more complex code such as entire React components that we can use in game. It would be cool to build some prototyping tools as well, maybe even bringing code back into sketch so that prototypes use real data. Design, Engineering and other disciplines will continue to collaborate and discuss their needs and abilities. This process should evolve to suit those needs and pursue the goals that we started with. Efficiency, quality and communication can always be improved. For the design team this system allows us to focus on the big design decisions. The ideas, strategies and experiences that our players will love, not the minor details that can be distract from what’s important.


Peter Turner | Principal Software Engineer

Himanshu Masand | Senior Software Engineer

John Bacon | Principal Software Engineer

Neha Belwalkar | Experience Designer

Brian Tse | Lead Experience Designer

Zynga Engineering

Engineers connecting the world through games.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store