Design Engineer: What It Is and 3 Steps to Start

A design engineer designs an interface and then builds it for real, in code. In five minutes you'll know what the role does, why companies want it, and how to take your first steps this week, even if today you only know Figma (the most popular tool for drawing interfaces) or only know code.

This guide is built on public writing about the role, all linked, and on how we work at Studio Futuro.

What It Is

It's a designer who learned to code, or a developer with real design taste. Either way, one person owns how a product looks, how it moves and how it works. It's not a unicorn. It's someone who stopped waiting for the handoff.

Why It Matters

In most teams a designer draws the screens and a developer builds them. The moment the work passes from one to the other is called the handoff. That's where quality gets lost.

A drawing is not a product. It doesn't show what happens when the screen is narrow, when a list is empty, or when you press a button and wait. So the designer makes more drawings, one for every case.

If you've ever commissioned a website, you know the scene. The approved mockup looked great, and the live site is "almost the same": different spacing, a missing animation, a menu that acts oddly on a phone. Often nobody made a mistake. Something got lost in the handover.

Jim Nielsen, a designer and developer, made this point back in 2022 in The Case for Design Engineers. He describes a responsive design process (one design that adapts to phone, tablet and desktop) that can need up to 60 explanatory files for every round of changes. A design engineer skips them, because the next person in line is themselves. Nothing gets lost in translation, because there is no translation.

In part II (2024), Jim looks at a tiny detail: a divider you drag to resize two panels. Where exactly does the drag start? Does it snap? How big is the target? A static drawing can't tell you. In part III he adds that the creative process is not an assembly line: new ideas show up while you build.

Designers feel the same pull. Marcel, a product designer, wrote Becoming a Design Engineer in 2024. After two years of learning to code, moving rectangles on a canvas started to feel like a crutch. Instead of drawing an "Empty State" frame, he built small prototypes in SwiftUI (Apple's tool for building app screens in code), where the empty state shows up on its own when the list is empty. He also admits the fear, the impostor syndrome. If you feel it too, you're in good company.

What a Design Engineer Cares About

Vercel, the company behind the Next.js web framework, has a whole design engineering team. Their post Design Engineering at Vercel lists what the job cares about. In plain words:

• Interactions that feel good: how a button reacts, how a menu opens, the hints that tell you what you can do.
• Reusable components: building blocks like a button or a card, built once and used everywhere.
• Speed: a beautiful page that loads slowly stops feeling beautiful.
• Every browser: the same result in Chrome, Safari and Firefox.
• Touch and mouse: it works with a finger on a phone and a pointer on a laptop.
• User preferences: dark mode, or "reduce motion" for people who feel sick with too much animation.
• Accessibility: it works with screen readers that read the page aloud.

Designer, Developer, Design Engineer

• Product designer: asks what the product should be and how it should feel. The work usually stops at the handoff.
• Front-end developer: asks how to build it so it works everywhere. The work usually starts at the handoff.
• Design engineer: asks how to make it feel right in the real product. For them, the handoff mostly disappears.

None is better than the others. The design engineer lives in the space between.

The role isn't new. What's new is how many companies ask for it. Ioana Adriana Teleanu, who writes about design careers, defines it in her Bootcamp guide as a designer who can implement their own solutions. In a second piece she reads 2026 job posts from companies like Anthropic, Vercel, Cursor and Linear. The summary: they want someone who has taste and can ship. AI tools make it much easier to turn an idea into working code.

How We Work at Studio Futuro

Alek Dobrohotov, founder of Studio Futuro, calls himself a Design Engineer on alekdob.com. The method: start from design (the experience, the interface, how it moves), then build all the way to production code, with AI as the development team. That way the details reach the finished product intact.

It comes from 14 years of doing both jobs: in 2012 he was an Apple Specialist in Rome and, at the same time, art director and web developer at a small studio. It's also how we run the studio's projects, like the Kyron website, designed and built by the same team.

How to Do It

You don't need a new job title. Vercel says it plainly: there's no fixed toolset for a design engineer, and no best background. Start small.

1. Rebuild one button in code, with four states: normal, hover (the mouse is over it and it darkens slightly), pressed (it shrinks just a little) and keyboard focus (a clear outline for people who move with the Tab key).
2. Respect "reduce motion": add one rule that turns the transition off when the person has switched it on. You can try all of this for free in an online editor like CodePen.
3. Learn one motion idea, enter and exit: a box that fades in while sliding up a few pixels, and does the reverse on the way out. In React, the free Motion library handles this with its AnimatePresence component.
4. Study one polished website for 10 minutes: open it on your phone and write down three details you'd never have put in a static mockup. Teleanu quotes design engineer Paco Coursey: copy and re-implement work you admire until you can proudly create for yourself.

Ready to copy, for Claude, ChatGPT or your coding agent:

Try It Small

Paste the prompt, open the file in the browser, hover, click, then press Tab. If you see four different states and an outline on Tab, you just did design work in code. Count how many decisions hid in one button: that's the job.

Watch Out For

• The title matters little: many people already do this work without calling it that, like the freelancer who designs a site and then puts it online.
• It's the frontier, not the whole market: Teleanu notes it herself, many companies still work the classic way.
• Short, subtle motion: good animation explains what happened. It never makes people wait.
• Check the AI's code: it gives you a base, but states, accessibility and speed are on you.

If you run a business, the practical question is one: on your next digital project, who takes care of the details between the drawing and the code? If the answer is "nobody in particular", that's where quality gets lost. If you want to do this work yourself, the next step is what to put in your first design engineer portfolio.

This article is adapted from a guide Alek first published on Medium.

In short: A design engineer designs and builds the same interface, so the details survive intact from the drawing to the real product.