The Grit

Behind the Scenes of the Sketch App & Sketch Cloud with Sketch Co-founder Emanuel Sá

Matous RoskovecMatous Roskovec

Hi Emanuel, thank you for finding the time to do this interview. Let’s start with who you are and what you do?

Hi, I'm Emanuel Sá, the Chief Design Officer and the Co-founder of Sketch. I'm based in Portugal, Porto. I spend most of my free time on my main hobby, reefing!

Do you think there is still anyone who doesn’t know Sketch? Just for fun - how would you describe it to a newbie?

Sketch is a digital design platform that combines a powerful, native Mac app with collaboration features in the cloud. The Mac app gives all the tools you need to take your ideas and create wireframes, mockups, prototypes, and even production-ready assets. On the Cloud side, we’ve built a whole set of collaboration tools that make it easy to share your work with teammates, get feedback, test ideas with prototype previews, and hand off designs to developers.

As the co-founder of Sketch could you share the founding story? How did you come up with it?

There was this general idea that the existent tools were not tailored for UI/UX design, pair it with a strong codebase that Sketch was, a strong design oriented developer, Pieter Omvlee, and Sketch is born, as the app it is today.

It took us 8 months to go from a vector engine to the app Sketch became recognised for, daily dogfooding was key for its development and success.

I think my role back then was doing "everything"! Haha, we were a two-man team for quite a while. I focused a lot of my time in design, but on such a tight "team", you really got to be versatile on what you bring to such product development.

Where did the need for the Sketch tool come from?

I founded Sketch in 2011 with Pieter Omvlee and at the time we had a really simple goal — we wanted to help people design better products. I was working as a designer at the time and Pieter was a developer working with other designers. We could see that design industry was underserved and designers and developers just weren't satisfied with the tools available to them.

We felt frustrated that there was no product that focused specifically on interface design and we wanted to change that. The goal was to build something that met our needs and was simple enough for anyone to use. All the other software that existing at the time was bloated and unintuitive with features no one was using and key tools hidden under layers of obscurity.

So we built Sketch, working remotely from our respective home offices in London and Porto, and funding the project with just our savings and other income. The first version was released in 2010 and we saw almost instant traction around Sketch. It was clear that designers were crying out for a specialist tool and they were glad to find a viable alternative for UI design.

When we released version 2 it was right around the time that companies became much more aware of ”design” and it started to get a proper seat at the table in many businesses. Companies started to invest in mobile apps and the rest is history really. Around this time Adobe decided to sunset Fireworks and the majority of those users found Sketch overnight.

Because Sketch was new and exciting all of the early marketing happened via word of mouth. Our users became evangelists, hosting events, creating content and promoting the tool — and the Sketch community started blowing up.

Did you use any tool as inspiration for Sketch?

I don't think there was any one tool that was the inspiration for Sketch. We knew what we wanted to build, and I wanted an app that would allow me to design. But one thing we liked to think about was "How would Apple design an app for designers?". Before the iPad, everything was done on the Mac, and naturally there were a lot of great Mac apps. Apple had a suite of tools called "Pro Apps", which included Final Cut, Logic, and Aperture, and then another group of apps called "iWork", which we still have with Keynote, Pages, and Numbers. We wanted to make an app that would feel like it was created by Apple, and can be easy for anyone familiar with the Mac to use. Pieter, being a developer was inspired by a lot of nice touches in Xcode too - another app from Apple.

Sketch of course wasn't the first or last tool of its kind to appear on the Mac. Acorn is a good example with some great graphics tools - but we wanted to target interface and web designers specifically.

Sketch is famous for its suite of plugins. How did you kickstart/motivate developers to build integrations and plugins for your tool?

This was something that sort of happened by chance without a grad plan or vision. It was before Sketch 2 launched that Pieter added a small scripting library into the app in about an afternoon to allow users to add their own basic commands into Sketch.

It was one of our earliest users, Ale Muñoz who reached out to us and expressed his joy at the fact we had support for extensions and was excited about its potential. He was able to begin experimenting and his work sparked the beginnings of a developer community as more users started making plugins.

Now Ale has now been a part of the Sketch team for over six years, but he isn't alone - we have a dedicated developer platform team who have some exciting things planned.

A lot of things like designing with data or smart constraints are concepts that have been known in web development for a long time but appeared in design tools like Sketch only recently. Which other technique/approach do you think will be a significant addition in Sketch?

One of the things that excited us that developers on our team take advantage of, is code linting. What a linter would do is analyse any code and flag specific discrepancies against the source code. One of these 'flags' could be highlighting a syntax error for example. This got us thinking — can designers take advantage of this? And we think so.

Designers are used to having style guides, and now design systems and of course inconsistencies can occur. But this usually means someone manually checking the work and reviewing it.

Either visual checks, such as making sure you're using the right components which have been defined already - or helping workflows by analysing your document to make sure you have good hygiene for team mates with named layers and groups. If we also think about defining rules related to accessibility, such as ensuring your document has readable text sizes, and good contrast, it's easy to see how powerful this tool can be for designers.

As design is becoming an integral part of software companies, more designers need to work together. This brings new workflows like versioning, merging, or dealing with conflicts. What do you think is the future of design collaboration? And how can Sketch help?

The way we work at Sketch isn't just designers collaborating together with other designers, they collaborate with developers, product teams, marketing—every department. We see it ourselves that designers can create their best work when different disciplines work together and this is what we want to support and encourage.

With Sketch Cloud, we're trying to "scratch our own itch" by building tools which will help us achieve that, whilst meeting the needs of all the other teams and companies we talk to on a daily basis. As you put it, design is still becoming an integral department of many companies and by providing the right set of features we can really help them share and present the importance of their work, whether that is to developers or content teams, all the way up to stakeholders and executives.

We noticed that Sketch UI and complex Symbol workflows are getting overhauled and simplified. What was the need for these changes? Why did you decide to develop them now and what’s coming next?

It's simple, we've seen thousands of Sketch documents, either internally, or from public resources, and we kept noticing a lot of common themes around Symbols.

People needed to create and maintain multiple variations of the same element. In seeing these, and listening to our user feedback, it was clear and obvious for us to optimise Symbols.

For example, we really think that Smart Layout helps reduce the number of Symbols you need to have in your document or Library. You might have a 'card' or alert in your UI which you would want as a Symbol. But if it contained a title and some body text, that text could be one line, or two lines, or more! You could already override text, but you would needed to create 'copies' of the Symbol to accommodate the different heights or widths needed. So we definitely hope that Smart Layout has helped simplify the number of components you needed to create and manage as much as it has helped us internally. There's still more changes and improvements around components planned for this year – all with that theme in mind.

What’s your personal take on web-based real-time collaboration? Does it make sense to you, or do you think, that designers shouldn’t touch each others’ pixels at the same time?

Let me just say it's something that is very interesting. I think a lot of designers can be unwilling to share and can be shy about their work – having an unfinished design in the open is quite different to something like Google Docs with only text. It's hard to design when there's someone standing over your shoulder, and we hear from designers it feels like that when they see other people in their document. I can see both sides of the argument – but as you can imagine we have our own opinions and ideas. More on that later!

Building a tool like Sketch isn’t easy. You must be getting tons of feedback and feature requests that somehow align with your internal view of the product. How do you prioritize feature development on your roadmap?

Indeed, we made a tool for designers, and naturally a lot of designers have thoughts and opinions! 🙂 Ever since the early days we understood the value and importance of feedback. But of course as the product grew, and became more popular, we would receive more and more messages and requests! This is great.

While we use Sketch ourselves, there are people who use it in entirely different ways, with different workflows, and have different needs. But we have a really great customer support team. They help us my making reports on the most common things they get emailed each week – whether that be things such as feature requests, feedback about specific features, and problems they might needed to diagnose which we can improve on.

We have our own ideas and direction that we want to take Sketch in, and we can validate that by seeing what our users are asking us. For example, one big issue people were telling us they had—which we shared—was the ability to manage and insert their Symbols. They had difficulty finding the Symbol they wanted to insert because they had well organised systems – they couldn't search for what they were looking for and previews were too small. If they wanted to manage these Symbols, they needed to go elsewhere in the app. We were being asked for a more efficient workflow and we came up with our components panel. Unfortunately, this was something we released to the world a little bit too early, but we spoke to a lot of users, and read a lot of feedback which resulted in us in changing our roadmap to be able to iterate on it sooner and make it better.

Btw, how many people work on Sketch now? How do you interact with them and how much can you impact where Sketch will go next?

It's crazy to think that when I first started to work with Pieter on Sketch we would grow now to be 90 people across 5 continents and 22 countries. I think I have done every role in the company apart from develop the app! I started off designing the app before hiring a designer to take over whilst I helped build and grow our customer support team, as well as marketing, hiring, sales, and other general operations. As we hired more people, I felt very confident to step back and let them grow these departments themselves. Of course on top of developing these teams there was a business to run with Pieter and I think we've done well. 🙂 We managed to find a great partner with Benchmark who can help us take the product to the next level.

Now, I'm back to doing what I love, and that is leading our amazing design team as Chief Design Officer. But you can't stop being a co-founder so I'm always available to help any team when they need advice.

Your Symbol Library is a good foundation for building and editing a Design System. Do you plan to progress in this area? How?

Design systems as we know them didn't exist when we first started building Sketch. I think Symbols, and of course Libraries really helped people buy in to the idea – and really, it's something that is still evolving and growing.

We believe that Libraries are a great place for design systems to begin. Not only as a place to experiment and design what those components will look like but also with sharing them with your team, so every designer can use them in their work. But we do know that your Sketch Library is not a design system - far from it.

There's a lot more roles and departments in your team than just designers who can benefit from it, and this is definitely and area we're very interested in exploring further this year. All under the theme of collaboration. Stay tuned.

What is Avocode?

It’s an all-in-one tool for teams that want to code and collaborate on UI design files 2x faster.

Design is irreversibly getting closer to code. Where do you think should be the truth - in design or code? In both?

Design isn't just how something looks, but it's obviously something that is very visual. Say I wanted to draw a blue rectangle. The only way, which is really accessible and easy to understand is to use the Rectangle tool, and change its colour to blue. Even my grandmother can to this with Sketch.

What she could not do, is to start defining properties in a code editor to draw the same rectangle. It's something that feels very unnatural to me. It's something that requires a bit of knowledge and understanding. When your mind is focussed on this, it's hard for the creative side of your brain to think more freely and openly and solve the problems that exist outside your code editor.

I don't believe that is the right question to ask – we have plenty of folks on the team who can write really good code, believe me. But the thing we feel is more important is an understanding of the technology. We're a Mac app for example, there's frameworks and technologies which go a little beyond the platform's UX - but it's some knowledge of these to know that you can propose designs that can be feasible or even possible to build - taking advantage of the system where possible.

Understanding code is a good skill for people to have, especially designers who don't need to be reliant on other developers – but I don't necessarily believe it makes them a better designer.

Many teams are using different design tools that unfortunately don’t communicate with each other. Do you see a need for a universal design file format, something like a PDF, that would have standardized contents that would be readable and editable in any design tool?

We're strong contributors to the design and development community by principle, it's really up to these communities to make this a need, and if valid, a priority. We're listening, always listening.

What do you think is the future of design tools?

It's interesting to me, that we see people support their favourite design tools like their favourite football teams. They don't like the other tools. Why? Because they're not the tool they support. 🙂

Back before Sketch, designers only had one choice of tool for the job, Photoshop and oh boy we hated it. It was a big, buggy app that wasn't even built for interface designers – but we could do our job. It just took a long time.

Forward to today and designers are spoiled for choice with so many great tools and options from different companies, with different approaches. All designed specifically for the designer.

To keep with the football theme, people think there's going to be one winner lifting the trophy and everyone else "loses". It's not something I see that way – people can use what they feel most comfortable with. It's something I've been saying ever since people were deciding to use Sketch instead of Photoshop.

At the same time, the design industry is something that has really grown. Good design, and a good experience isn't an afterthought or a luxury - it's a requirement for businesses today. The tools should be able to meet their needs and goals, and this is something that goes beyond design – it's something the entire product team will need to buy into, and this is why collaboration is so important. We need to help enable teams to work together.

It seems all design files are moving to the cloud. Do you think Dropbox and other storages will be redundant in the future?

Not just design files, but all sorts of other filetypes too. It's not for me to comment on Dropbox's business but I'm sure they have a good idea on the situation.

With us, and giving you the option to conveniently store your files on Cloud - it's not just personal storage, but a centralised place where your whole team can access. Not on your desktop folder, where you need to ask someone to upload it. I look at so many documents a day, I don't have the time to ask a designer "hey, where is this?". It's reducing a lot of friction and dependancy.

What do you think will be the most important thing to focus on as a designer in 2020?

Design is no longer a one-man job, it is a team job, and not just a team of designers, a team of all sorts of thinkers and makers, so to answer your question: make design accessible for everyone.

Bonus question: What’s your favorite way to eat an avocado?

1 avocado, 1 banana, 1 vanilla whey scoop, 200ml of almond milk and a tea spoon of peanut butter, blend it... enjoy!

Did you like this article? Spread the word!