Teaching designers how to code with Design+Code creator Meng To
The Grit

Teaching designers how to code with Design+Code creator Meng To

Matous RoskovecMatous Roskovec

Hello Meng, let’s start with what did you begin with? Design or code?

Definitely design. Design is something I’ve always done. Ever since I was young, I was fascinated with computers. During the dot-com bubble, there weren’t a lot complex UIs. You would usually start with a simple website. Open Photoshop and design pixel-perfect mockups and code that in HTML. The concept of UI design was not as prominent as it is today. It was mostly graphic designers doing banners, forum signatures, web design or print.

How did you go about learning a particular programming language? Most people start with a project, like a portfolio, and then they somehow figure out how to code it. Was it the same for you?

Yes. I like to learn by practicing and solving problems. The biggest challenge was being alone. When we have an idea in our head, most of the time we’re going to be alone with the power to execute it. It’s very rare that you’re going to have someone, like an engineer who’s ready to turn your concepts into code.

At first, it was fairly easy. But it got exponentially harder when I created a community website for designers called Shadowness where people could upload their graphic designs. A little bit like Dribbble, but years before its inception. I had to learn PHP and MySQL. I did everything including managing a dedicated server, building the database and coding from scratch.

 Design+Code learning platform

This is very interesting. You were learning from the Internet because you didn’t have anyone else. Would you say this works for everyone?

I firmly believe that you should rely on yourself as much as possible. Not because you don’t need other people and definitely not because you don’t want to work with engineers, but because you want to work better with them. When you’re on your own, you get crucial insights on how to connect design and code. Next time you talk to an engineer you know precisely what to ask.

Of course, you will reach a point where you cannot get past your limitations, unless you’re willing to dedicate a lot of time to learn that craft. Sometimes it’s a good idea to take a vacation to deal with a massive project that requires not just design, but also code and shipping. Creating a MVP is feasible during a weekend, but it’s better if you a whole week to really push the envelope. Through that process, you will learn exactly what you’re missing, what your weaknesses are and what tech stack makes sense. With those insights, you can collaborate better with engineers later on.

I believe that in order to be efficient, to create an MVP in the shortest amount of time possible, you have to cut any communication problem and you have to do everything by yourself at the beginning.

How would you say people should combine learning a skill on their own with school education? How do you connect the stuff you’re supposed to learn with the things you want to learn?

For me, it was very clear when I was about 18 that traditional schools were pretty much useless. When you work in tech, the schools are at least five years behind. Even today, it’s uncommon for schools to teach you Figma, Adobe XD, Framer, or Sketch. Sketch has been around for more than eight years. In my opinion, using the latest and greatest tool is essential to an aspiring designer because that’s how you can be exceptional in the marketplace, without years of experience.

It’s not good to wait for a tool to be prominent. At that moment, it will already become a dinosaur. If you want to be a UI designer and you’re still learning Photoshop, I got bad news for you: most of the market is not looking for Photoshop designers anymore. So you’re losing a lot of time, and you’re not getting the proper insight on how to take your career to fruition.

When I was 18, I decided to do a sabbatical year and get a job. I already had a strong portfolio, so that gave me an edge. As a designer, your portfolio is everything. A lot of people are going to tell you that going to school is probably the most important thing. To me, that’s bullshit. I speak as someone who’s been hiring a lot of designers. The secret is that I don’t even look at their degree anymore. I care very little about their experience. I go directly to their portfolio and I look at their work. Within 10 seconds, I can tell if they’re adequately trained for the tasks that I’m willing to give them. Designers need to focus on producing work that can be public and demonstrated during the interview process.

How do you think designers should set the base of their income?

At first, you shouldn’t worry too much about how much you’re charging. You should worry more about the quality of your work. Quality dictates the value to which people are willing to pay for. If your design quality is not good, you cannot charge much because you’re not making a huge impact.

How much is your work going to impact the business of your client? It’s fun to create a beautiful UI that’s on the front page of Dribbble, but is that going to be real and sustainable? Is that something that people will pay a lot of money for? If the answer is yes, then you can charge double or triple what you normally charge.

It’s important to understand that even if people are super talented, they won’t necessarily make a lot of money because the work that they produce is not necessarily valuable to businesses.

Someone can charge $100 an hour, but barely produce any work within that hour. Therefore the client is not going to be happy with results versus money spent. But if you produce outstanding work and you’re five times faster than someone who is charging $20 an hour, then your client is going to be very happy paying you that $100 an hour.

Speed, efficiency and quality will impact your ability to make more money. Understanding that process will take you far. It will eventually afford you to be an entrepreneur or a manager; someone who can hire people and manage a team, someone who can turn a concept or a side project into a business that’s sustainable and solve problems.

How can designers find time to progress their skill while having multiple ongoing projects? How can they balance paid work and artistic progress?

The first few years of a designer is going to be a lot about grinding. It’s going to be about finding your style and mimicking people you admire. And you should be shameless about it. Be humble, truthful, and earnest about who you’re trying to channel. At the beginning, you’re going to do it at the surface level.

A lot of aspiring designers go to Dribbble, Behance or Twitter to seek inspirations. As you progress you’re going to learn more about the principles and craftsmanship: the techniques involved, the tools used, the creative process, whether or not you should use grids, etc. And so that’s the second step.

The third step is when you start finding your style. You develop strong values as an artist and you are in control of your lifestyle. How do you sound surround yourself with great products and great talents? How do you criticize everything that you see and how do you go beyond your personal heroes to their heroes and find the roots of their inspirations.

Let’s say you admire someone. Well that person also admires someone else. For example, Dieter Rams is pretty huge in the industry. His iconic designs and 10 Principles of Good Design were great inspirations to Jony Ive and the products built at Apple.

So how do you balance between work and creativity? First, I think that you have to accept that the first two years are going to be just grinding and practicing as much as you can to understand the value of good design. You shouldn’t look back at your old work and say “wow, this was amazing.” If you don’t hate your previous work, then you’re doing something wrong because that’s part of evolving. You should constantly be trying to find ways to improve and say: “I should have done better than this.”

I think that’s how you progress and that’s how you become more artistic. By artistic I mean finding individuality and understanding what makes your design a little less homogenic.

At the same time, it’s OK to emulate a little, even as an experienced designer. In some disciplines, it’s quite important to do that because you have to respect specific standards that users have come to expect. You can’t just create without referencing. For example, when you’re designing for iOS, you’ll have to respect the Human Guidelines by Apple. When you’re designing for Android, you have to read a pretty lengthy guide about Material Design. You have to build on top of that foundation. Once understood, you can bring more personality and work on the things that make your product special.

Side project that I designed and coded: Angle mockups

Speaking of inspiration, let’s talk about learning and your primary resources you used to learn about design and code.

I learn everything on Google and YouTube. Video is becoming the primary medium for learning. YouTube offers access to all this education material without a paywall. The issue is, just like Google, it’s a hit-or-miss. Most videos talk about extremely specific topics and assume that you have lot of previous experience. It’s not well-curated or end-to-end.

When I wrote my first design book, I curated everything. I taught every step, from using colors, typography to using Sketch which was new back then. Eventually, I covered a wide range of design tools and platforms like Figma, Framer X, Swift, React, React Native and soon Flutter. I’m also planning a course on Cinema 4D.

Learning Cinema 4D

Unlike on YouTube, it’s a very consistent learning experience and it’s all about the best tools. I speak to designers like me. I had to learn all of these tools so I needed to be very efficient at learning. The number of times that I went to someone to ask for help can be counted with the fingers in my hand. Typically, I start with the documentations. Then, I search on YouTube to learn some basics. As I learn, I take notes in Notion. I piece everything together by building a real product that I want to use.

That process usually lasts for 2–3 weeks. I document everything straight to the visual and code. Like this, virtually anyone can come in and learn what I just learned. They don’t need to know much, but some design or code experience helps. This factor determines if it will take you three days or three weeks to finish the course.

Would you say knowing how to make an app in React Native is enough to teach others about React Native?

Absolutely. I think it’s vital to have a beginner’s mind regardless of your level of knowledge of a particular craft. But don’t get me wrong, teaching is very different from, let’s say, mentorship or specializing in a job. Teaching is all about translating something extremely technical to something digestible. For that to happen, you need to have a beginner’s mind.

You don’t need a ton of experience in the specific topic, but you need experience teaching similar topics. Before I started the course, I almost knew nothing about React Native. But I had some knowledge of React.js and Xcode. Everything you’re learning should be a small jump from previous experience. Before React, I knew Swift. And before Swift, I knew jQuery.

40,000 people paid for my courses and I was a total beginner for 90% of the topics I taught. You’re gonna be fine. You don’t need to be an expert in this field to start teaching.

You mentioned that designers don’t need to know much to start your course, but still, there is some baseline. How can people get to this baseline as fast a possible?

With anything that’s extremely hard to learn, you need a hook. You need to break it down into bite sizes. If your goal is to learn React Native, your hook can be how to create a layout, or animate SVGs or prototype transitions.

I think that’s why Design+Code is so unique. We try to make it so that at every point in the course, designers, who are known to be visual creatures, will want to learn. Things like: how to style a layout, how to deal with constraints, how to update assets, or how to create nice animations, etc.

I had to design and code an iOS app for 3 months. Then I taught it.

Let’s talk about the time before you made the Sketch and Xcode course. What motivated to go from being a freelancer to becoming a teacher?

I hate freelancing and I hate working for other people. I don’t say that because I want to discourage anyone from freelancing. Just like any job, freelancing has its ups and downs. But eventually, you can’t avoid wanting to create your own stuff. It’s inevitable because as humans, we have incredibly creative minds. That’s what sets us apart from robots.

It’s essential to work for someone else to get the proper mentorship, if you want stability in your life, you want money, you need experience and you need to grind. That’s all really important. For me, this part took roughly 15 years. After that, I just hated working for someone else. I was thinking, how do I take all my experience and create something that could pay like a job.

Around five years ago, Sketch wasn’t prominent in the marketplace. I was one of the first to write about Sketch. People knew me as “The Sketch guy”.

That’s how I got the bulk of my followers at the beginning. Also, I learned how to use Xcode for prototyping. A lot of designers think of prototyping as creating really advanced animations — but they are rarely translatable to code. As a designer who codes and who likes to be time-efficient, I want to be able to take a design and get it into the final code us as quickly as possible.

Knowing HTML was not enough for mobile apps. If you’re going to build an iOS app, you have to use a Storyboard. You have to use constraints. You have to use all these tools, which have been in Xcode for years, but only recently became available in the design tools.

It’s important to look at code as a way to see what’s going to come to design tools in the future. So if you want to be ahead of the curve then why wait?

Join 30K+ designers & developers by subscribing
to our monthly newsletter

So how did you move from the Design+Code book to a course and how do you manage to keep it up to date?

I wrote Design+Code as a book, because I was alone and I didn’t know if it would be successful. I sold it as a one-time purchase. You know, to make some money so I can avoid freelancing for a few months.

When I launched, I made $10,000 in the first 24 hours. It was entirely self-published and sold at $50 a copy. In a way, I was offering knowledge that could otherwise be purchased at school for tens of thousands of dollars for a much longer period of time.

First version of Design+Code focused on Sketch and Xcode. I launched only with a pre-order page.

It started as a book, but the website eventually became a learning platform. The one-time payment was not a sustainable. I kept updating the book whenever there was a major update for Sketch or Xcode.

Spent 2 months building a React Native app. Then I taught it from step 1.

This was during my 2-year travel, but I wanted to settle in Canada and become a parent. At some point, I took a long break to take care of my new family and the funds were diminishing. When I came back, I thought what if I increased the amount of content and cover even more topics?

So I put together a team. We had 3 courses. With the team, we introduced 15 new courses. We have a subscription now, but 5 times the amount of courses. For the same price paid per year, people get more value and better support.

In the case of Figma, how did you pick this tool as a next course and how did you go about creating it? Did anyone help you?

I heavily rely on my team to take care of customer support and advancing the website so I can have complete focus on creating courses. In the case of Figma, I knew that I couldn’t just create a basic Figma course.

Figma is, in my opinion, very different to Sketch. It has so many tools in one application, like real-time collaboration, prototyping, cloud storage, versioning and handoff. It’s the perfect design tool for new designers because it’s free and works on Windows. We wanted to find a topic for the course that would get a lot of demand, and that topic was Design Systems. A lot of designers were scratching their head around that. How do you even start? How do you connect different components and make them available across your team? How do you translate that to code? How do you keep everything organized? It turns out to be a good decision because the Figma course is one of our most popular.

After creating a course on design systems, where do you think companies should keep the “truth” — in design or code? How do you avoid, having two design systems instead of one?

I can safely say is that we haven’t solved this problem yet. It’s a hard problem. I believe that the current tools are still maturing and they’re still figuring out how to connect the design file to the design system, then to the code.

Typically in any company you would have two design systems instead of one source of truth: one more connected to the design tool and one more code-heavy like NPM packages. We’re still figuring out how to communicate between both platforms. I don’t think we’re going to solve that within the next two to three years.

This problem is similar to Android versus iOS. How do we have a single codebase for both platforms? React Native and Google’s Flutter are trying to solve this, and I believe Apple will soon come up with their solution as well. Once we can solve that, design systems will do a much better job at connecting design and code.

Course wallpapers made in Cinema 4D

What do you think is the best design to code workflow available?

I try to get to the code as soon as possible. I often skip wireframing because I like to remove steps. I always try to get to the MVP stage in the shortest amount of time possible. At the beginning, your product concept is very fragile. So if you come up with something extremely complicated, you won’t get anything done. A project usually starts with a few bullet points written in Notes or Notion.

Then I move to the design tool and start designing the UI. The act of crafting the UI gives you so much insight as to what is possible and what is not. You gain even more insights while coding because the constraints are greater. That’s why I like to code quickly, involving the least amount of people possible.

It’s only after you have a rough prototype that you can efficiently bring people together. Then, they can work on the UX to solve the experience issues and start designing multiple iterations. But at the very beginning of a project, it’s usually one person with enough experience and enough ideas. If you quickly build a prototype in code, you’ll know not only how much design is necessary, but also how much engineering.

The time is almost up, so before we wrap up, what would you advise to aspiring designers?

First of all, don’t take too many projects. It’s important to know what you’re capable of doing and how much work you’re willing to do. The state of mind is critical, so listen to your body and try to observe how much motivation you have for the project. And don’t worry too much; this will also become handy when you become a parent.

If you notice that you’re distracted a lot, learn how to prioritize. Give yourself deadlines. Writing things down helps because it’s the easiest way to get your feet wet.

Treat your time like gold. When you go and ask for help, know that people’s time is precious and so is your time. If you keep asking questions every five seconds, you’re permanently depriving yourself of learning. You’re not learning to depend on yourself, you’re learning to depend on others.

Don’t launch too early. Launch only when it feels right and when you know that this is something that nobody has done well before. Launch when you know your product is solving a real problem. It’s also important not to launch too late. Give yourself a deadline. If it’s a really complex project where you have multiple people, three to six months makes sense. If you’re alone, one month should be enough. If you’re fast and efficient, and you know exactly how to market, then I would say two weeks is enough.

Don’t work for free. It’s not sustainable. The age of free products like Facebook, YouTube and Flickr is over. People always pay with something in the end, like their privacy. Why not sell a product from day one? We’re now back to businesses that have been around for centuries. We’re talking about food, books and tools that solve daily work problems.

Do what you love. Follow your passion. Gain the skills that you always wanted to learn.

Get the mentors that you always admired and work with them. Pick their brain, be patient and allow yourself to trust them and to listen to their advice. You have to listen with your heart and not with your mind. If you listen with your mind, it won’t stick because it’s like a hard drive that’s overflowing. If you let their advice touch your soul, then there is a special place for that. Also, respect your mentor’s time.

Everything should be a learning experience. Everything you do. Whenever you do a task, you should be asking yourself, am I learning something? Is this going to be useful to me later in my career? Everything that you do has to be around that: learn to learn better, and learn with your heart.

Thank you. It’s time for our bonus question: When was the last time you ate avocado and how was it made? I love avocados and the last time I had that was in a sushi. But to be honest, after going to Japan, it’s hard to eat sushi that has avocado in it.

Want to stay in touch with Meng? Find him on Twitter, LinkedIn, Dribbble, Medium or have a look at his website.

Did you like this article? Spread the word!

What is Avocode?

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