---
title: When Designers Code and Engineers Design | &‌amp
description: Explore how AI and advanced tools are blurring the lines between designers and developers, creating new hybrid roles like the Design Engineer for faster, cohesive digital product development.
image: https://cdn-images-1.medium.com/max/1600/1*6qTInwnhrkPpTnofwDTjCw.jpeg
---

[Skip to content](https://insights.andamp.io/blog/when-designers-code-and-engineers-design#main-content)

[![andamp logo black (ampersand symbol)](https://insights.andamp.io/hubfs/logo_black.svg "andamp logo black (ampersand symbol)")](https://insights.andamp.io/?hsLang=en)

- [About Us](https://insights.andamp.io/about-us) 
    - [Career](https://insights.andamp.io/career)
    - [Code of Conduct](https://insights.andamp.io/code-of-conduct)
- [Blog](https://insights.andamp.io/blog)

# When Designers Code and Engineers Design

[![](https://insights.andamp.io/hubfs/acd9605a-71f1-4726-acf1-ff39400f4dfe%20(1)%20Copy.jpg)](https://insights.andamp.io/blog/author/katharina-bühn)

[Katharina Bühn](https://insights.andamp.io/blog/author/katharina-bühn)  29. Oktober 2025

### When Designers Code and Engineers Design

![](https://cdn-images-1.medium.com/max/1600/1*6qTInwnhrkPpTnofwDTjCw.jpeg)

Photo by [Hal Gatewood](https://unsplash.com/@halacious?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/a-close-up-of-a-piece-of-paper-xzzgY__zX8A?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

In May 2025 we had the opportunity to join the Figma Config in San Francisco. Just like everywhere at the moment, Artificial Intelligence (AI) and its impact on the tech industry came up in most talks. With tooling like Figma and builder.io, and the increasing integration of code-adjacent features into design platforms, the long-held boundaries between designers and developers are eroding. It seems when it comes to the separation of design and code, we are at a real fork-in-the-road moment: do we keep design and development sandboxed in their respective tools, hoping for clean handoffs, or do we build for a world where those lines don’t really matter anymore? This post explores that convergence from a historical, technical, and practical standpoint — and how AI and systematized design may redefine what it means to be “full-stack”.

## A Brief History of Separation

Before we start answering these questions, let’s pause and consider the roots of design and engineering.

Design is as old as humanity itself. Long before programming languages, humans shaped tools, built shelters, and created symbolic systems. From the symmetry of a hand axe to the spatial logic of ancient cities, design has always involved deliberate choices about form, function, and meaning. It’s a deeply human instinct — part aesthetic, part survival.

Software engineering, by contrast, is a much younger discipline. Its roots lie in the computational breakthroughs of the 19th and 20th centuries. Ada Lovelace envisioned algorithmic thinking in the 1840s; Alan Turing formalized the concept of the modern computer nearly a century later. Yet real-world software development only took off with the arrival of programmable machines in the postwar era.

In essence, design and development evolved in entirely different worlds — one grounded in sensory communication and human perception, the other in formal logic and machine precision.

The divide between designers and developers wasn’t just philosophical — it was pragmatic. You had deadlines. You had static mockups. You had Jira tickets labeled “needs padding.” One team delivered the vision; the other brought it to life.

That workflow wasn’t broken. It was just built in a time before live collaboration, before design tokens, before component libraries, and definitely before AI showed up with a clipboard offering to help.

The point is: we split roles to ship faster. But ironically, we now **merge** roles to ship faster. A shared knowledge base shortening communication channels and creating understanding.

## Different Training, Shared Mindset

Designers often arrive at their role through paths like visual design, psychology, communication, or product strategy. Their tools — Figma, Sketch, and motion prototyping platforms — support a focus on user experience, interaction, and clarity. Their process often involves iteration, empathy, and experimentation.

Developers may come from fields like computer science, engineering and mathematics. Their toolset includes IDEs, version control, build systems, and terminals — geared toward building, testing, and scaling software. Their work is often analytical, structured, and focused on technical feasibility.

Despite these different starting points, both roles share key foundations: creativity, abstraction, and systems thinking. Whether designing an interface or engineering its logic, both disciplines thrive on curiosity, collaboration, and a drive to improve how people interact with technology.

## The Evolving Roles: Is the Distinction Still Relevant?

![](https://cdn-images-1.medium.com/max/1600/1*qjuj92JbJ-G0f8n87prH_g.png)

*by* [*The Fountain Institute*](https://www.thefountaininstitute.com/blog/ux-memes-cure-soul)

Traditionally, the divide between designers and developers was shaped by specialization, tight project timelines, and distinct educational backgrounds. Each role operated within its own domain, with handovers marking the transition from concept to implementation. Today, however, these boundaries are becoming increasingly fluid.

The rise of advanced tools and AI is reshaping how we work. What once required manual effort is now being accelerated — or even reimagined — by automation. AI-powered assistants are evolving into partners, supporting both disciplines by handling repetitive tasks and enabling professionals to focus on strategic, high-level decision-making.

This shift invites a reassessment of the skills that define each role:

- **Technical expertise**, remains a core requirement.
- **An understanding of design and user experience** continues to provide substantial value across all stages of product development.
- **Analytical thinking and problem-solving** serve as a bridge between the two domains.

Consequently, the definition of a “full-stack” professional is shifting. Designers with logical mindsets are increasingly capable of coding, while developers may develop stronger design sensibilities.

The distinction between the roles is not disappearing — but it is evolving. This transformation opens up new opportunities for interdisciplinary collaboration and hybrid skill sets, enabling teams to deliver more cohesive and user-centered digital experiences.

A real life example of this comes from one of the talks at Config 2025 *Connecting code with craft* by Katie Langerman and Lukas Opperman. Here designers overhauled the naming conventions of the design system in code by leveraging Figma’s Code Connect on a running system. A tedious task developers would tend to shy away from thinking “it’s low prio, we’ll change it when we have time”. But with tight shipping deadlines, usually there is never time for a refactoring like this and so technical debt accumulates. Giving the designers, who are already deeply familiar with the design system the tools to facilitate code changes like this themselves, not only alleviates stress in current projects but also creates a shared vocabulary for future projects.

## The Rise of the Design Engineer

The web and app development market continues its robust expansion, with the global web development market projected to grow from USD 70.6 billion in 2024 to USD 141.49 billion by 2033 at a CAGR of 8.03%. However, this growth brings significant challenges that traditional organizational structures struggle to address effectively.

The current landscape presents several critical pain points:

- **Speed-to-Market Demands**: Clients increasingly expect faster, more cost-effective launches. The traditional handoff model — where designers create mockups that engineers then interpret and implement — introduces friction that modern markets won’t tolerate.
- **Experience Quality Gap**: Despite significant investments in design and development, many digital products deliver mediocre user experiences. This disconnect often stems from the translation layer between design vision and technical implementation.
- **Talent Scarcity and Cost:** Frontend engineers command premium salaries, and quality candidates remain scarce. Especially with AI powered technologies absorbing parts of low-level positions, it becomes more difficult to achieve expert-level experience. Companies find themselves in bidding wars for skilled developers, driving up project costs and timelines.

The inefficiency of divided workflows contains inherent problems. As noted by industry experts, “better collaboration often leads to better products,” yet the traditional design-to-development pipeline creates friction:

- **Redundant Work**: Engineers frequently spend considerable time reverse-engineering design decisions, essentially recreating work already completed during the design phase
- **Communication Overhead**: Multiple rounds of clarification, revision, and alignment consume valuable project time
- **Vision Dilution**: Original design intent often gets compromised during technical implementation due to miscommunication or technical constraints not considered during design

The emerging “Design Engineer” role addresses these challenges by combining design sensibility with technical implementation skills. As Lee Munroe explains in his recent Medium article, these professionals “work hands-on with design systems, tools like Storybook and React, as well as CSS, SCSS, Figma, and Chromatic to rapidly prototype and enhance UX.” This hybrid approach offers several advantages:

- **Eliminate Translation Layers**: By understanding both design principles and technical constraints, design engineers reduce the friction between conception and implementation
- **Accelerate Development**: Direct implementation from design concept eliminates multiple handoff stages
- **Maintain Design Integrity**: Technical decisions are made with design intent in mind, preserving the original user experience vision
- **Optimize for Both Domains**: Solutions consider both aesthetic appeal and technical performance from the outset

While some argue that engineers shouldn’t have final authority over design implementation, the convergence trend suggests otherwise. The Design Engineer represents more than a trendy job title — it’s an evolution responding to market demands for faster, better, and more cost-effective digital product development. As the industry faces increasing pressure to deliver superior user experiences efficiently, organizations that embrace this convergence will likely find themselves at a competitive advantage in an increasingly demanding marketplace.

## A Converging Trajectory

AI-powered design tools like Figma Make and Sites are game-changers, but they don’t eliminate the iterative nature of creative work. We still need multiple attempts to reach our goals. As one expert put it, “AI and code need to meet you where you are.” AI is a powerful kickstarter, but only when it honors how we actually work.

The core challenge lies in how designers and engineers think about iteration:

**Designers** see a Figma frame and copy-paste it, treating each copy as a variation of the original.

**Engineers** see code components as independent entities — when they copy code, they create entirely new components.

This raises a fundamental question: Should development tools follow traditional engineering patterns, or adapt to the fluid, iterative approach designers use in Figma?

This mental model divide explains why the “Design Engineer” role is essential. Organizations need professionals who can:

- Navigate both visual and code-based workflows
- Decide when components should be variants versus independent entities
- Bridge communication between design and engineering teams
- Optimize AI-powered tools for both paradigms

The Design Engineer doesn’t just understand both worlds — they actively translate between them. As AI continues reshaping our workflows, the future belongs to those who can think like a designer while building like an engineer.

### Core Skills Still Matter

This isn’t to say roles will merge completely. Specialized skills remain critical:

- Backend systems still require knowledge of distributed architecture and databases.
- Visual design still requires intuition and taste that can’t be faked with templates.
- And both require a capacity for abstraction that no AI can yet replace.

This converging trajectory might tempt some to dust off the old criticism of the **“full-stack developer”** being a “jack of all trades, master of none.” However, this critique misses the mark entirely in the age of AI. The goal isn’t to create generalists who lack depth; rather, the convergence of design and engineering is forging a *new definition* of full-stack — one rooted not in knowing every single technology, but in **mastering translation and integration**. Furthermore, the rise of these hybrid roles perfectly aligns with the modern trend of professionals switching careers more frequently, finding new avenues for their cross-disciplinary skills. This fluency across the stack empowers individuals to bridge the talent gaps that technology is rapidly creating. The roles of visual designer and specialized engineer will not merge into a single job title; instead, they will define a critical new zone for hybrid thinkers, the **Design Engineers**, whose unique skill set allows them to abstract, harmonize, and optimize the tools and processes that connect the two worlds, while switching between one and the other.

We hope [Daniela Duh](https://medium.com/u/ddaf9a1eda31)’s and my post sparked some ideas for you! If you’re facing a specific challenge, or just want to chat about what’s next, don’t be a stranger. **Hit us up at** [**&amp**](mailto:hello@andamp.io)**!** We love collaborating and showing how a full-stack team with design expertise can jump in to help make your projects a success.

[Design](https://insights.andamp.io/blog/tag/design) [Fullstack Development](https://insights.andamp.io/blog/tag/fullstack-development) [AI](https://insights.andamp.io/blog/tag/ai) [Design Engineering](https://insights.andamp.io/blog/tag/design-engineering)

## Read On

[![Figma](https://insights.andamp.io/hs-fs/hubfs/Figma.png?width=352&name=Figma.png)](https://insights.andamp.io/blog/code-at-the-click-of-a-button-will-figmas-codegen-make-developers-obsolete?hsLang=en)

### [Code at the Click of a Button: Will Figma’s Codegen Make Developers Obsolete?](https://insights.andamp.io/blog/code-at-the-click-of-a-button-will-figmas-codegen-make-developers-obsolete?hsLang=en)

 Are design-to-code tools like Figma’s codegen a game-changer or a developer’s nightmare? In this blog article, you can explore the potential of code generation, what it means for the future of development, and why developers are there to stay!

[![](https://miro.medium.com/v2/resize:fit:1400/0*PGOrk9R9ex2hFvfI)](https://insights.andamp.io/blog/designing-react-components-with-accessibility-in-mind?hsLang=en)

### [Designing React components with accessibility in mind](https://insights.andamp.io/blog/designing-react-components-with-accessibility-in-mind?hsLang=en)

 A guide on how to design react components with accessibility in mind to make content available to everyone.

[![Merging two tracks (source: unsplash)](https://miro.medium.com/v2/resize:fit:700/0*GsYYOzItkPc1PQNM)](https://insights.andamp.io/blog/mastering-git-a-senior-developers-guide-to-create-pull-requests-and-get-them-approved-fast?hsLang=en)

### [Mastering Git: A Senior Developer’s Guide to create Pull Requests and get them approved fast](https://insights.andamp.io/blog/mastering-git-a-senior-developers-guide-to-create-pull-requests-and-get-them-approved-fast?hsLang=en)

 In this blog post, the author shares essential tips and insights on how to get pull requests approved fast and ship software even faster.

[![logo_white](https://27222727.fs1.hubspotusercontent-eu1.net/hubfs/27222727/logo_white.svg "logo_white")](http:/?hsLang=en)

[Follow &andamp on LinkedIn](https://www.linkedin.com/company/andamp/) [Follow &andamp on Instagram](https://www.instagram.com/_andamp_)

## Our Services

- [Team as a Service](https://insights.andamp.io/team-as-a-service/)

## Sitemap

- [Blog](https://insights.andamp.io/blog)
- [Career](https://insights.andamp.io/career)
- [About Us](https://insights.andamp.io/about-us)
- [Code of Conduct](https://insights.andamp.io/code-of-conduct)
- [Our Diversity Journey](https://andamp.io/diversity-journey)

## Our Mission

 We offer a risk-free way to optimize customer experience and realise your business' potential through MVPs

## Case Studies

- [Notarity](https://insights.andamp.io/case-studies/notarity/)

## Location

 andamp GmbH  
 Währinger Straße 48/2. Hof  
 1090 Vienna, Austria

## Contact Us

[hello@andamp.io](mailto:hello@andamp.io)  We would love to hear about your ideas!

### Let's build your project!

This site is protected by reCAPTCHA and the Google [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms) apply.

® 2025 andamp GmbH [Legal Notice](https://insights.andamp.io/legal-notice/?hsLang=en) [Privacy Policy](https://insights.andamp.io/privacy-policy/?hsLang=en)

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Katharina Bühn",
    "url" : "https://insights.andamp.io/blog/author/katharina-bühn"
  },
  "dateModified" : "2025-10-29T12:00:00.325Z",
  "datePublished" : "2025-10-29T12:00:00.000Z",
  "headline" : "When Designers Code and Engineers Design",
  "image" : [ "https://cdn-images-1.medium.com/max/1600/1*6qTInwnhrkPpTnofwDTjCw.jpeg" ],
  "mainEntityOfPage" : {
    "@id" : "https://insights.andamp.io/blog/when-designers-code-and-engineers-design",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://insights.andamp.io/hubfs/andamp%20Full%20Logo%20Blue%20Light.svg"
    },
    "name" : "andamp GmbH"
  }
}
```