The Design Engineer: A new career path for juniors ready to bridge design and code?
A unique breed is emerging: a hybrid that integrates design and coding expertise to create production-ready solutions.
This article was originally posted on the positionRelative
The debate about whether designers should code is old news — and frankly, outdated. The emergence of the Design Engineer role is a testament to that. This hybrid role has existed for years, quietly shaping teams in companies like Notion, Vercel, and others, often under different titles. Traditionally, these were just “designers,” but they stood out because of their ability to code and contribute production-ready solutions.
These individuals broke away from the standard “designers know code but don’t code” mentality. They actively delivered production-ready code in specific areas, prototyped complex interactions in code, or laid a solid foundation for engineers to build upon.
In 2024, the Design Engineer role became widely recognized, with companies officially embracing the title. Tom Scott, a leading design recruiter, recently listed Design Engineers among the most in-demand roles. Job boards like Design Engineer.io have popped up, dedicated exclusively to this emerging position.
Interestingly, many of these roles seem tailored to experienced professionals. Yet, the skill set is still new, and the talent pool isn’t as saturated as traditional design or engineering roles. This creates a unique opportunity for juniors who have the right foundation, mindset, or adaptability to carve a path into this space.
What is a Design Engineer?
Before exploring how juniors can break into this field, let’s define the role. Design Engineers are hybrids: professionals who work at the intersection of design and development, bridging the gap between the two.
David Luhr’s article succinctly describes the role as “design work with code.” While simple, this definition underscores its essence. A Design Engineer:
Contributes to the codebase: Unlike traditional designers, Design Engineers write production-ready code.
Makes design decisions: Unlike traditional engineers, they also handle non-technical design aspects.
They work end-to-end, which involves:
Designing user interfaces and focusing on visual aspects.
Crafting interaction-heavy experiences.
Prototyping in code.
Shipping polished, production-ready front-end implementations.
To succeed in this role, you need:
1. Exceptional Visual and UI Skills
To excel as a Design Engineer, your UI work must go beyond the basics taught in courses or bootcamps. The expectation is to deliver polished, production-ready designs that align with the standards of companies like Linear, Vercel, or Clerk. While you don’t need to match their style, you should aim for similar attention to detail and balance.
Clean and Balanced Layouts: Master fundamental design principles like alignment, spacing, and hierarchy. Use tools like Figma’s Auto Layout to create scalable, consistent designs, and ensure you understand responsive design principles.
Typography and Visual Hierarchy: Strong typography is essential. Learn how to create a clear hierarchy, balance font sizes, and ensure readability across devices. Study typographic scales and experiment with tools like Type Scale to refine your skills.
Interaction-Ready Design: Focus on more than static screens — anticipate hover states, active states, and micro-interactions. Understanding these dynamic elements ensures a smoother transition when your designs move into code.
2. Front-End Coding Expertise
To turn your designs into production-ready interfaces, you’ll need a solid understanding of front-end development:
Core Languages: HTML, CSS, and JavaScript are must-haves.
Modern Frameworks: Familiarize yourself with React, Next.js, and styling solutions like Tailwind CSS or libraries such as shadcn.
Responsive Design: Learn to create layouts that adapt seamlessly across screen sizes using CSS Grid or Flexbox.
3. Motion and Interaction Design Knowledge
Motion often defines how users experience an interface, making interaction design a valuable skill for Design Engineers:
Timing and Feedback: Master principles like easing and duration to create smooth transitions that enhance usability.
Practical Tools: Experiment with Figma’s Smart Animate or dive deeper with CSS animations and libraries like Framer Motion.
A solid foundation in motion can elevate your designs, but it’s not always required — it’s a great differentiator when applied effectively.
While specific requirements vary by company or product, these skills form the foundation of a Design Engineer’s toolkit.
Why This Role is a Steep but Rewarding Path
At first glance, the Design Engineer role might appear daunting, especially for juniors. The reality is that this path requires deep expertise in at least one domain — design or development — before building proficiency in the other. However, for those willing to put in the work, it can be a fulfilling and unique career.
1. Build on Existing Strengths
This role is particularly suited to individuals with strong foundations in one field:
Developers with an interest in design: If you already have front-end coding expertise (e.g., React, TypeScript, or Next.js), start learning about design principles, interaction design, and UI craftsmanship.
Designers with a knack for technical problem-solving: Designers who excel in visual/UI design can explore coding fundamentals like HTML, CSS, and JavaScript, then gradually dive into frameworks like Tailwind CSS or component libraries such as shadcn.
2. Leverage AI for Acceleration
The learning curve to become a Design Engineer is steep, but leveraging AI tools can significantly accelerate your journey. These tools are not just productivity enhancers but essential companions for learning and experimentation:
For coding: AI tools like GitHub Copilot or Cursor can help you write better code, debug more efficiently, and learn advanced concepts by generating explanations and examples.
For design: Generative AI tools can assist in exploring visual concepts or automating repetitive tasks, giving you more time to refine and polish your work.
Future-proofing your skills: As AI continues to reshape the developer and designer landscape, becoming proficient in using these tools ensures you stay ahead of the curve.
A word of caution here though. I do honestly believe that this can be an excellent fit for people early in their career and we will see the experience levels start to vary in this field very soon. However this role demands high standards. If you just learned the fundamentals of design and have not worked with code at all before, this is likely not the optimal for you right now. Instead focus on mastering one half of it before approaching the next. There is nothing wrong in learning the fundamentals of the other already but focus will get you further than riding two tracks at the same time if both is new to you.
How Juniors Can Break Into the Design Engineer Role
1. Build Your Skills
Regardless of your starting point, developing the right skills is critical. Focus on:
Polishing weak areas: If coding is your weak spot, start by learning HTML, CSS, and JavaScript, then move into React or Next.js. If design is your weakness, master tools like Figma and build your visual design skills. Ideally you bring the basic knowledge here already. Also make sure to utilize AI as a help here. Many designers have accelerated their coding learning curve by making use of ChatGPT, Claude or Cursor to teach and enable them to ship code.
Crafting polished projects: Create small, interaction-heavy components to showcase your ability to merge design and code seamlessly. You can for example use Framer to experiment and play at the intersection by using code components inside the visual builder or play around in VS Code and build your own little playground. Post these on platforms like LinkedIn, Post.cv, or BlueSky to attract attention of other designers.
2. Curate a Hybrid Portfolio
Your portfolio should showcase your ability to bridge the gap between design and code. Include:
Small interaction patterns or micro-projects that demonstrate specific skills.
Two to three larger case studies of shipped or fictional projects. If working alone, document how you would collaborate in a real-world setting.
An impressive portfolio website that exemplifies your ability to create functional, visually engaging digital experiences.
3. Master the Right Tools
Tools are something we are going to see a lot of movement in over the next few years in this area as design and code gradually continue to blur. For now a Design Engineer’s tool stack might look like this:
Design Tools: Figma for UI/UX design, emphasizing interaction-ready designs with clear annotations.
Development Tools: VS Code, GitHub, and frameworks like Tailwind and Next.js.
AI Assistance: Use coding assistants like Cursor or GitHub Copilot to accelerate your workflow and learn on the job.
There are emerging tools like Jux that are already operating at the intersection of design and code but they do require a firm grasp of both design and development. Similar to how Figma’s Code Connect integrates designs into codebases, Jux helps teams (or individuals) streamline their processes of translating design to code with one source of truth.
4. Network and Learn from Others
Engage with professionals in the field:
Reach out to Design Engineers on LinkedIn or ADPList for informational interviews.
Join communities or create your own to connect with like-minded individuals and drive conversations about the role.
The Role’s Availability and Salary Potential
While this role isn’t about chasing a paycheck, it’s worth noting that Design Engineers tend to earn more than their design or engineering counterparts.
US salaries range from $120k to over $250k, with some senior roles crossing $300k.
Other markets (Europe, Asia) are still developing but represent opportunities for early adopters to gain an edge. I’d anticipate a rise in these roles for these markets in 2025.
Conclusion: The Path Ahead
The Design Engineer role is demanding, requiring a unique blend of skills across two disciplines. However, for juniors with the right background and determination, it offers a chance to stand out in the competitive design and development job markets.
If you’re a junior with a knack for either visual design or coding, this could be your opportunity to break into an exciting, evolving role that combines the best of both worlds. Dive in, start learning, and explore how you can shape the future of design engineering.