A SwiftUI guide
What is design engineering?
Design engineering is designing an interface and building it in code yourself, so nothing gets lost between the design and the app people use.
Not to be confused with engineering design, the mechanical product process. In software, design engineering means designing an interface and building it in code.
What a design engineer does. They own the gap between the mockup and the app.
Most products are made in two passes. A designer draws the interface, then an engineer rebuilds it in code. Every handoff loses something: a spring that felt right in a prototype comes out stiff, a shadow gets approximated, an edge case nobody drew ships as whatever the framework does by default.
A design engineer works in the gap between those passes. Day to day:
Design the interaction
Not only the static screen: what moves, how fast, and what happens when you interrupt it.
Prototype in real code
So an idea is judged by how it feels in the hand, not how it looks in a mockup.
Build the production version
To the same standard as the rest of the codebase: accessible, performant, maintainable.
Tune the feel
Timing curves, haptics, materials, the half pixel that makes an edge look crisp.
Look after the shared pieces
Components and tokens that designers can specify and engineers can trust.
On iOS teams the role often has no special name at all. It is the engineer everyone asks when something “doesn’t feel right”, or the designer whose prototypes end up in the app. The test isn’t the title: it’s whether the shipped version is as good as the idea was.
Three roles, one interface. Look at what each one hands off.
Product designer
- Owns
- The problem, the flows, the visual design and the specs.
- Hands off
- Mockups and prototypes, to engineering.
iOS engineer
- Owns
- Architecture, data, performance and shipping.
- Hands off
- Questions about intent, back to design.
Design engineer
- Owns
- The interface itself, from idea to production code.
- Hands off
- Very little: the design and the build are the same work.
Each handoff is a place where a decision gets re-made by someone who wasn’t there when it was first made. A design engineer removes the handoff where feel matters most.
Design engineering on Apple platforms. What a mockup can’t show you.
Most writing about design engineering is about the web. Native apps raise the stakes, because so much of what makes an iPhone app feel right never appears in a static design.
.spring(duration:bounce:)Motion that responds
SwiftUI animations are springs that can be interrupted mid-flight. Whether a sheet feels heavy or playful lives in two numbers.
.sensoryFeedbackTouch and haptics
Press states, drag thresholds and haptics are part of the design, not polish added later.
.glassEffect()Materials and Liquid Glass
Blur, vibrancy and glass react to whatever sits behind them, so they can only be judged running on a device.
.symbolEffectType and symbols that adapt
Dynamic Type and SF Symbols change with each person’s settings. A layout that works at one text size isn’t finished.
.numericText()Small transitions, real craft
A number that rolls instead of snapping is a one-line decision only someone thinking about design and code tends to make.
Why SwiftUI fits
Views are declarative and previews update as you type, so the gap between an idea and a running version is minutes. The code is close enough to the design that one person can hold both.
Human Interface Guidelines
The workflow. From a blank canvas to SwiftUI, in five steps.
Design it from scratch
Decide what it is for and how it should feel before you decide how it looks.
Break it into layers
Name every fill, stroke, blur and shadow. If you can’t name a layer, you can’t rebuild it.
Rebuild it in SwiftUI
Layer by layer. Match the structure, not just the screenshot, so the code stays readable.
Tune the feel on a device
Springs, press states, haptics and accessibility settings, in the hand rather than a preview.
Write down the decisions
The numbers matter less than why you chose them.
Why teams want design engineers. The details people notice first are the hardest to hand off.
The weight of a sheet, the snap of a toggle, the way a list settles after a fling. Teams that care about those details find it cheaper to have one person own them end to end than to describe them across a handoff. For one company’s view of the role, Vercel has written about how its design engineers work.
The prototype is the first draft
Not a throwaway, so good ideas reach people sooner.
Feel gets decided once
By the person who chose it, instead of being re-guessed in review.
Reviews happen on a device
Where questions about motion and touch can actually be answered.
How to become a design engineer. Start on one side, then build the other on purpose.
If you’re a designer
Learn enough SwiftUI to build your own work
Views and modifiers, stacks, state and animation. Then rebuild one screen you’ve designed until the running version matches, including how it moves. You’ll learn more from one stubborn detail than from ten tutorials.
If you’re an engineer
Collect moments, then take them apart
Keep a folder of moments in apps that made you smile. Slow them down in a screen recording, guess the timing, rebuild them. Then design one of your own from a blank canvas before you open Xcode.
Practise on real details
Questions. The short answers.
Is design engineer a real job title?
Yes, and it is increasingly common in job listings at product companies. The same work is also done under other names, or with no special name at all. What defines it is the outcome: one person taking an interface from idea to production code without losing the details.
Is design engineering the same as engineering design?
No. Engineering design is the step-by-step process engineers use to design physical products and systems, in fields like mechanical or civil engineering. In software, design engineering means designing an interface and building it in code yourself, so the details survive from idea to app.
What does a design engineer do in iOS apps?
In iOS apps, a design engineer designs the interface and builds it in SwiftUI: layout, motion, touch and haptics, materials like Liquid Glass, and every state of the screen, tuned on a real device. This is different from a hardware product design engineer at Apple, who designs the physical iPhone in CAD.
Is design engineering the same as front-end development?
They overlap, but the emphasis differs. Front-end development covers everything that runs in the client, including data and architecture. Design engineering focuses on the interface itself: how it looks, moves and feels, and the decisions that make it right. It is also not limited to the web; on Apple platforms the same work is done in SwiftUI.
Do I need to know Figma to be a design engineer?
No. Figma is a common place to explore ideas, but design engineering is about the decisions, not the tool. Many design engineers sketch in a design tool, others design directly in code. With SwiftUI previews, designing in Xcode is a real option.
Can a designer learn SwiftUI?
Yes. SwiftUI is declarative: you describe what the interface should be, and the framework works out how to draw it. That maps closely to how designers already think about layers and layout. Start by rebuilding one of your own designs.
What should I build first?
One small, self-contained detail, such as a button, a toggle or a counter, designed from scratch and built until the running version matches the design, including its motion and its states. Small details teach the whole loop without the overhead of an app.