Majority of those I look up to are design engineers.

I call them “unicorns.” The hybrid designer/designer who can kern type and sort functions. The people who can turn their ideas to life.

But, calling them “unicorns” maybe comes from my lack of understanding of the field. I mean - What about the full-stack developers?

Thus, I did some research, and in this article, I want to share what I learned about design engineering.

To preface, this article is built on the works of more qualified people. Here are the works:

• What is a UX Engineer? User Experience Engineer Role Explained
• Design Engineering Handbook | InVision
• #1 What is a UX Engineer? | Code & Pixels
• 010 - UX Engineering, Prototyping, and Tooling with Adekunle Oduye of Plaid (shameless plug)
• 1 Year of Design Engineering @PicCollage (Mandarin)
• 2 Years of Design Engineering @PiCollage (Mandarin)

What is design engineering?

It all started with a seemingly simple question:

Should designers code?

Well, my answer is a classic

No. BUT…

I believe it’s helpful to at least understand the basics of front-end development.

Cool. But what if I do want to learn how to code as a designer?

Well, that’s where design engineering comes in. Now, there are different titles, including

• Design Engineer
• Design Technologist
• UX Engineer
• UI Engineer

For simplicity, we’ll use “design engineer” in this article.

In short, design engineers specialize in the intersection of design and engineering.

Duh?

Okay, my bad. Let’s delve a bit deeper.

The power of a design engineer is that they understand how design & engineering work. Or, in other terms, what both sides care about when building.

Then, with that knowledge, what can they do?

What does a design engineer do?

Here are the types of work of a design engineer:

1. Contribute prototypes, wireframes, and design mockups
2. Set up individual workflows & organizational structure
3. Set up a design system, document patterns, build UI components, and write usage documentation
4. Establish and maintain a local dev environment
5. Set up testing

I’m sure there’s more, but this is a general list to start with.

And I’ll like to elaborate a bit on the first three points:

Contribute prototypes, wireframes, and design mockups

Design engineers are skilled at both design & front-end development. Thus, they’re able to contribute wireframes as well as front-end code.

Now, prototyping is a huge part of being a design engineer, especially if you’re in a product team. I’ll go over that later.

Set up individual workflows & organizational structure

Lichin Lin’s Mandarin article gives us a good peek into this.

To keep it short, here is a list of things he did when he joined:

1. Propose a transition plan to switch from Sketch to Figma.
2. Proposed a new product development process for PicCollage
3. Created a Figma plugin to imitate app features

All these efforts have a main goal: Improve collaboration between cross-functional team members

Set up a design system

It is also common for a design engineer to work within a design system. This includes tasks such as

• Maintaining a design system
• Perform workflow audits & updates
• Build UI components
• Write usage documentation

This is what my mentor Mike Mai does as a design technologist.

Key concepts

Now, we have a very basic understanding of design engineering. But, are there any important concepts that are good to know?

Yes! Let’s go over them!

Prototyping

As I mentioned briefly, prototyping is a huge part of a design engineer. Let’s delve deeper into this.

There are three main methods of prototyping.

Low-fidelity paper prototype

If you’re a designer, you’ve done this before. This is the simplest way. All you need are a pen, paper, and tape.

Static prototype

Static prototypes are clickable, static mockups that show the experience of features or workflow. Some example tools to create this include Figma, Sketch, and InVision.

Interactive prototype

This is where design engineers and designers differ.

The interactive prototype simulates the end experience. These are built-in codes and incorporate mock or production data. The purpose is to solidify the interaction design, validate solutions, and discover edge cases that the previous methods might not catch.

A good example is how the founder of Cron Calendar - Raphael Schaad - prototypes right after sketching. He explains it at 7:24 in this video.

Now, in terms of types of data to use, there are three kinds:

1. A mix of code & static assets (images)
2. Mock data - static mock data/data from an API
3. Prototype with real data (this is especially helpful if you’re building visualization)

Cool, what are the different ways to build an interactive prototype then?

Great question! Adekunle in the Design Engineering Handbook provided a clear structure:

1. Pick a framework - Gatsby, Next.js, Astro, etc
2. Incorporate a pattern library - Semantic UI, Chakra UI, etc
3. Import data - static, mock, or real
4. Start prototype - Can use Git to help branch one idea to another
5. Deploy the site - Netlify, Vercel, etc

Now, we understand the different methods. But, you may ask:

How can I know which method to use?

Well, it depends on where in the process you are, what you want to prototype, and what you want to learn from it.

Another good metric is one’s confidence in the concept, as mentioned by Adekunle in the Design Engineering Handbook.

The more confidence you have in the concept, the more advanced method you use.

Tooling

Now we understand the different types of prototyping.

But, there’s another important element of prototyping:

Speed

As a design engineer, it’s crucial to rapidly prototype, learn fast, and apply the findings to the solutions.

But how can you prototype quickly?

Well, that’s where tooling comes in.

Tooling is what it sounds like. It’s the intentional use of tools to prototype ideas fast and come up with innovative solutions.

For example, the mix of Gatsby, Semantic UI, Git, and Netlify can be one’s tooling set. Everybody may have different tooling. What matters is the speed and efficiency of prototyping.

Required skills for a design engineer

Now, let’s delve into the skills required to be a design engineer. I’ll also attach resources/methods that may help you get these skills.

Technical skills

Front end development

This includes understanding HTML, CSS, and JavaScript. It’s also helpful to learn JavaScript frameworks such as React (the most popular), Svelte, or Vue.

Then, you can learn front-end frameworks such as Gatsby, data importation, Git, and site deployment (Netlify, Vercel, etc)

If you want to go even further, Google’s UX Engineer job description recommends learning scripting languages (Python or Ruby), Java, and C/C++. But, focus on mastering the elements listed in the previous paragraph.

CSS specialization

Being a design engineer requires in-depth knowledge of CSS. This would mean understanding CSS pre-processing frameworks (Sass or Less).

UX/UI Design

This is a mix of design-related skills. There’s a lot to learn here. I’ll recommend:

• “Pillars of Product Design”
• Slack x ADPList: Designing for the real world

Documentation

Documentation is a huge part of design engineering. Storybook is a popular tool to help engineers build, test, and display UI components.

Accessibility

A design engineer needs to understand accessibility guidelines. A product should account for all users. I’ll write an article about this in the future. But here are some extremely helpful resources:

• Web Accessibility
• WCAG Overview
• What is accessibility? (MDN Web Docs)

Responsive Design

Design needs to be responsive. When designers only mock-up mobile, tablet, and desktop, it’s important to be able to solve the gaps between these screen sizes.

Soft skills

Empathy

If you’re a designer, you’ve probably heard this term 847392138 times.

In short, be a real human being and genuinely care about who you’re designing for. Not just your users, but also your teammates as well.

Communication & collaboration

Design engineers can speak with users, designers, developers, product owners, and stakeholders. Thus, it’s important to know what different members care about. To get started, I’ll recommend reading:

• How to Work with PMs (Julie Zhuo)
• How to Work with Designers (Julie Zhuo)
• How to Work with Engineers (Julie Zhuo)

Since design engineers often work on documentation, being good at writing is also an underrated skill.

UX Principles

It can be helpful to understand the psychological aspect of UX. Here are some useful resources:

• Laws of UX
• 🧠 The Psychology of Design (Growth Design)
• UX glossary (Built for Mars)

My plan

As you can tell, there’s a lot to learn about design engineering. But this is the brink of the iceberg.

At this moment, I want to become a design engineer. To be completely honest, I’m not attracted to the design system side. But, I’m very attracted to the thought that I can build any idea I have.

I want to become a builder.

I want to build products. I want to build things in the digital space.

It’s so damn cool 😭

Still, I need to level up my design skills as well. But I’ll be working on more front-end development projects.

Last week, I followed Figma’s tutorial to create my first-ever demo plugin. It was a super cool experience.

Here is a list of things I want to build in the future. The goal here is to build up gradually:

• Simple blog article about Cyberpunk Edgerunner
• Re-create Google.com
• Create a Figma plugin
• Re-create my portfolio (HTML, CSS, JS, Sass)
• A side project

Also, as I’m building, I will be starting a new series called Devlog: [Name]. In it, I’ll share what I’m learning, my progress, and any project showcase.

This is a salute to one of my favorite YouTube genres: game dev logs. Shout out to ThinMatrix, Flow Studio, Pixel Architect, DevDuck, and all the indie game developers out there.

Helpful resources

Lastly, I want to share resources about design engineering that I haven’t mentioned. Here are a few:

Code & Pixels

Design engineering podcast hosted by Adekunle Oduye (Design Engineer - Tech Lead @Plaid) & Kelly Harrop (Sr. Software Engineer @Intuit) | Link

Sara Soueidan

Inclusive design engineer, author, speaker, and trainer. She has published a ton of useful articles about design engineering. They’re a bit advanced for me, but I’ll read them once I’m more fluent | Link

Mike Mai

My mentor at Pegasystems + brought me into the world of design engineering | Link

Conclusion

There’s a lot to learn as a young designer.

And that’s exciting!!!

I will continue to use this blog to document my journey and learnings. Maybe things will change. Or not. Regardless, I want to stay intentional, curious, and introspective.

And that’s a wrap!

Thank you for being awesome and reading this far! :)

If you have any questions, feel free to reach out on LinkedIn, Twitter, or by email. Will love to set up a casual call and chat!

‍