React Course for Designers, Anyone?

Linton Ye
Last Updated:

Introduction

Should designers code? This is an eternal question.

I believe designers and developers should both learn a bit about the profession of the other side. Armed with a holistic understanding of how design and engineering fit together to create great products, we will become better designers and better developers.

As a developer who's benefited from learning design, I'm convinced that designers want to learn some coding as well. That is why I got so excited about creating a React course tailored for designers.

Wait a second. Am I just thinking in the vacuum though? I decided to ask Designer News. The result? I was totally blown away! The post has been the top story for more than a day and stayed on the front page for more than a week. Shortly after the post, 13 designers booked a call with me and wished to offer help. Wow! 13 real people were willing to spare 30 minutes out of their busy schedules to talk to a complete stranger -- me. There must be something that resonates with them!

My Interview Calendar

[ My calendar got quickly filled up by meeting requests ]

This post is a report of the interviews that I've done so far. Hopefully you will be inspired to learn some React as well after reading about your peers' opinions.

If you feel generous to help me shape the course too, I'm really excited to talk to you! Please schedule a call with me here! I will keep this post updated with your new thoughts and opinions.

I've asked quite a few questions and got great responses. They fall in the following 5 categories:

  • Interviewee background
  • Should designers code?
  • Why do you want to learn React?
  • What do you want to learn about React?
  • How do you learn coding?

The main body of this post consists of quotes that I found interesting and my comments. Let's now dive in!

Interviewee background

Most interviewees are UX/UI designers working on mobile or web projects. A few of them said they have an engineering background but decided to pursue design as a career.

Tools

Nearly everyone I talked to uses Sketch for prototyping. After Effects and InVision are also frequently mentioned. To my surprise, nearly half of the interviewees use Framer which requires coding to take advantage of its full capability.

I also learned about a couple of tools that are popular but I've never heard of. They are Principle for prototyping and Zeplin for design hand-off.

Programming experience

Two interviewees have experience in full-stack development alongside design. But the majority of people I've talked to don't have much coding experience. They have various experience in HTML and CSS, and are somewhat familiar with JavaScript.

Encouragingly, quite a few of them have tried some coding bootcamps or online tutorials to try to learn Swift, React etc.

Should designers code?

What I found is that designers, at least those who I've talked to, are actually quite motivated to code. This doesn't mean that they want to build everything on their own. But they are well aware of the benefits of involving coding into their workflow and want to learn more about technology.

Below are discussions that touch down the core problem of designer-developer collaboration, the benefits for a designers to understand technology and its implication on creativity.

More interestingly, some designers use coding, notably Framer, to do design itself. I believe this trend will have a profound impact on how UI design is done.

Designer-developer collaboration

Before the interviews, I have an assumption that there is a communication gap between designers and developers. I'm trying to bridge this gap by helping designers understand a bit more about how a developer's job is like.

It's interesting to hear designers talking about their own pain points.

Designers and developers speak different languages, the jargons are different.

Design and engineering uses different part of the brain.

Designers are very aware that working with engineers is super important and there is a lot of motivation on the designer’s side to make that relationship (with developers) as good as possible. But motivation isn’t always enough if you don’t understand anything about the coding side. It’s very easy, especially as a junior designer, to propose things that are annoyingly completely out of scope, ridiculous and have no bearing on reality. Even if you are very motivated to work as well as possible with engineers, that can be frustrating because there’s so much that you don’t understand about what their job is like. So I think it is a problem and there’s a lot of energy behind solving it right now, which is great.

As a designer, when you create an animation, you'll have to pass it over to a developer to implement it. But the developer might be busy with other things and probably don’t have a chance to implement it for a couple of months. The animation will just sit there. It may be pretty but until it is implemented in the app and distributed to people, your value isn’t quite there.

Designers for the most part have no understanding of code but are interested in contributing their designs into the apps they’re working on though limited by the the dev resources.

The communication problem (between designers and developers) is often caused by the lack of empathy for the other person, a developer would think that the designer is just doing the modification of the UI, a designer would think the developer is just writing code and not thinking about the vision and UX.

When a designer understands technology...

Benefits:

Once you have an holistic view of how design and engineering interacts, there is no doubt about how it will help the team to reach better / more efficient way to achieve the goals.

I don’t write code, but I can understand the developer saying we are using HTML5 and CSS3. I know certain attributes that the language has, for example, transparency and gradient. I know that I don’t have to give assets for all these things that can be directly implemented in the code. If you are aware of certain capability of the technology, the communication becomes easier.

If your designer have the technology background, you can create mockups that are based on reality, not something that’s functionally wrong or broken.

...the time you spend on learning a new thing, versus the time you’ll save in the future by using the new knowledge. In the short term, it makes sense to stick on what you are really good at. But skills that you are already good at are hard to make better. If you start something new, it won’t take as much time to grow it to a useful level. At the end you’ll have this amount of Sketch skill and this amount of coding skill. This is a lot more powerful.

Implications:

When you are bound by a tool (coding), it hampers your creativity, because you start thinking in terms of the capability of the tool. For me, my favorite starting point is still pen and paper.

Using coding to design

I’ve been using coding to do most of my design. Because once you’ve done design in code, I just realized it’s really easy to change and swap the order, randomize photos inside a layout. Even though it has some learning curve, but once you start making some concepts, suddenly it starts saving a lot of time.

Direct benefit is copy and paste. When you start a new project, it often has some similarity to what you’ve worked on previously. If you use code, you can copy and paste, you can change the variables so everything is changed all at once. You can change a value globally.

I use Framer which uses CoffeeScript. Technically it’s not the code that a developer can copy and paste, but still it’s really easier for them to read, compared to just looking at a video and guess what needs to be done.

No matter they like it or not, designers are now aware that coding is one of the options for design.

Why do you want to learn React?

The most popular motivation is that they are working on a project that uses React (either ReactJS1 or React Native). They want to know how to work with developers better, and they want to have more direct influence on the project.

Interestingly, many people are not really aware of (or care about) the difference between React Native and ReactJS. I told them that the good news is React as a concept is the same. Once you learn one of the two, it's straightforward to pick up the other.

We just hired a React Native developer. I’m interested in learning how to work with React Native developers because I haven’t done so before.

(My company uses React) I feel helpless a lot when I want to make changes. All our engineers are in India and Russia. (the designer is in the US) A lot of times there are small style changes. I would love to be able to go and just make it myself. I can’t at the moment. Sometimes I have ideas that I’d like to build on my own, my portfolio included, but I just don’t have the skill set.

I want to take time to learn a new skill because It will further my career. It’d be great if I’m able to call my project manager or engineer about something that’s said to be impossible in React Native, and I can say, well, actually it is possible. It kinda helps. You can have a really interesting conversation if you know something about the technology. For example, I’d want to use shadows blurred in my design. (But the developer told me) that’s not possible because we are using this library in React Native, and we’d have to update the library and have to this and that. I was like, well, Is it really the truth? I’ve seen apps that have blurred shadows.

It seems more and more people are using ReactJS. What I’m looking is to understand a bit more how it works, what options are, what it can or cannot do. Not necessarily building a complete app on my own. But when you are working with a client, it’d be good to know the language a bit better.

There are also some really interesting discussions about including React into their design workflow:

We have Sketch style guides that we keep in sync with our designers. The engineers have style guides in React Storybook. But Ideally we should only have a single source of truth we can all just draw from. For me, I’d like to learn enough about React that I can make small changes to the React Storybook and then push out to the rest of designers in Sketch.

I heard the React Sketch app from Airbnb. That’s something that actually motivated me to start thinking, maybe I should learn some React. With Framer, the only way to save a picture is to take a screenshot. If the developer wants something I draw with code, I have to trace back to Sketch or PhotoShop, which is annoying. But if there is an option to convert code into images (in Sketch), I have options. I can export it PNG, JPG, SVG. I think that’s really cool for most designers. It’s good for documentation as well.

What do you want to learn about React?

There seems a consensus that designers want to learn about React in terms of what it can and cannot do at a high level. Meanwhile, a few interviewees have expressed the interest to learn how to build a full app since they want to build their own ideas.

Would like to know about the technology in terms of capability and technical boundary, but not specifically deep dive into code.

What I want to learn is not necessarily how to write apps myself, but be able to collaborate with the developer on a higher level, say, to know what his constraints are, what he can do, so I can provide him with documents and files that are easier for him to use.

It’s important for designers to know what constraints are, what can’t be done in React Native, but can in Swift or Objective-C. .. Not necessarily how the thing is made, but what can be made. What are the differences between platforms. For the designers, the things that they need to perform their jobs the best they can.

I just figured that the deliverables (required by RN) are different from what I’m used to. I would have issues with SVG because React Native doesn’t like SVG files.

I want to be able to edit it (the code), but not necessarily interested in coding the whole thing by myself. There’s somebody whose job is to do that…. In web development, I can always go into the file and find what’s not working the way I wanted, and change it. It’s helpful to send him (the developer) a code snippet for the drop shadow, or hex code, so he doesn’t have to tweak the thing himself.

I want to learn to build a full app, just to get my hands dirty.

In my case, I'm interested in learning how to structure my code, and things like Redux and Mobx.

How do you learn coding?

Designers are really motivated in learning coding as self-improvement. They've taken online courses on sites such as Code School, CodeAcademy, Lynda, went to workshops, attended webinars etc. I'm proud of you, my friends!

Here are just a couple of examples:

I’ve gone through all Apple’s Swift classes, SkillShare classes and learn with a full-stack developer friend.

After learning Framer, I tried some other languages. I’m learning Swift these days. One thing I realized was that compared to prototyping, the actual programming languages, such as Swift and Java, are more strict about how you write code. I found that’s too much for what I want. I just want to use code to configure the design without doing too much labor intensive work that I used to do with Sketch or PhotoShop.

Conclusion

I am thrilled! I think many designers are motivated to learn coding. React is one of their favorite topics.

Acknowledgements

I'd like to thank everyone who spent your precious time to chat with me, made a comment or upvoted my post. Your insights will really have a huge influence on the course. Together, let's create something truly useful for designers!

My special thanks to these fantastic folks (sorted by last name):

Footnotes:

  1. It seems Facebook has never officially used the name "ReactJS" or "React.js". It's just "React".↩
Visits: 0
Discuss on Twitter

I hope you find this article useful!

One of my 2021 goals is to write more posts that are useful, interactive and entertaining. Want to receive early previews of future posts? Sign up below. No spam, unsubscribe anytime.