What carries over
| What you did as a UI developer | Where it shows up now |
|---|---|
| Matched spacing and type to the design | Turn spacing and type into tokens |
| Reused CSS classes across pages | Build shared components |
| Handled browser quirks | Test components across browsers and states |
| Talked to designers about edge cases | Agree component rules with designers |
What is new
- Naming design tokens for colour, type and spacing.
- Writing components with every state: hover, focus, error, empty.
- Documenting each component so others can use it.
Try it: Token or One-off
A short exercise you can do on this page.
Token or One-off
Your first proof in 30 days
Build five components from one real design with tokens, states and a short usage note. Share it as a public repo and a single demo page.
Your 30/60/90 quests
XP: learning 20 · proof 60 · outreach 40. Ranks: Wayfinder → Builder → Pathmaker. Progress stays in your browser only.
Worries, answered
I am not a designer. You do not need to design; you need to build what designers define, carefully.
Design systems sound like big-company work. Small teams use simple ones too; five good components are a real start.
Pay, honestly
We haven't verified pay data for this move. Design engineering sits between design and engineering teams, so ask which team you would report to and what you would own.
Your realistic 90 days
You worked as a UI developer. This plan moves you toward design engineer work in 90 days, using what you already do.
Assumes 2–3 hours a day alongside job applications, a laptop and a phone, and free plans only. Every step has a smaller version and a way to pause. Use them. It runs in three blocks of 30 days, each ending with a signal that you're on track. A signal is not a promise of a job or income.
Your first 7 days
| Day | Task | Done when |
|---|---|---|
| 1 | Pick one design file you know well | Design picked |
| 2 | List its colours, type sizes and spacing | Values listed |
| 3 | Name them as tokens | Tokens named |
| 4 | Read the Figma Dev Mode guide | 3 notes |
| 5 | Build one button with every state | Button done |
| 6 | Build one card using the tokens | Card done |
| 7 | Save 10 postings | 10 links |
Days 1–30: Five-component kit
| Step | Time | Done when | Smaller version | If you need to pause |
|---|---|---|---|---|
| Publish five tokenised components with states and usage notes | about 8 hours over 3 weeks | repo + demo | Two components. | Stop at the end of the step you're on and write two lines about where you stopped. Pick it up from those notes later. |
| Show your proof to 5 people who hire for this role | about 1 hour | 5 messages | Show it to 2 people who hire for this role. | Optional. If reaching out feels like too much this week, skip it and put the time into your proof. |
Signal by day 30: Your five components share one set of tokens, and one of the 5 people you showed them to asks a follow-up question.
Days 31–60: Applications
| Step | Time | Done when | Smaller version | If you need to pause |
|---|---|---|---|---|
| Turn your proof into a one-page case and CV line | about 8 hours | case + CV | CV line only. | Put it on hold while interviews take up your time, then come back to it. |
| Apply to 10 design engineer roles | about 5 hours | 10 logged | Apply to 5 roles. | Stop sending for now. Keep a list of who you've contacted so you can follow up later without doubling up. |
Signal by day 60: A screening call.
Days 61–90: Interviews for design engineer roles
| Step | Time | Done when | Smaller version | If you need to pause |
|---|---|---|---|---|
| Practise a 2-minute story of why you are moving | about 2 hours | 2 practice runs | 1 run. | Optional. Skip it if the week is full; nothing later depends on it. |
| Ask 3 former colleagues for referrals | about 2 hours | 3 asks | Just one instead of 3. | Stop sending for now. Keep a list of who you've contacted so you can follow up later without doubling up. |
Signal by day 90: A second round or a paid trial.
Other worries
Age, a career gap, no degree, English, family pressure and savings are covered on the route page and the role page.
One search that fits your background
The full set of search strings for this move is on the route page. These strings work on LinkedIn, Naukri and foundit; Instahyre and Cutshort are worth a weekly look too. Add your old job title to any of them with AND, so your searches surface roles that want both skills.
Job-hunt moves that matter for this route
- Show your component kit with states and tokens.
- Tell one story of a design detail you caught before launch.
- Look at product companies and SaaS firms that run their own design system.
Fake-job traps
Watch for 'developer internships' or 'live project training' that charge a registration, laptop or certificate fee, 'test tasks' that ask you to build a full product for free, and anyone asking for an OTP, UPI PIN, a deposit or remote access to your bank before you start. Real employers never charge you to hire you. Use official domains only. Report in India at cybercrime.gov.in or call 1930; in the US, ReportFraud.ftc.gov.
Back to UI Developer · About the Design Engineer route · Development hub
Quick quiz: does this path fit?
Answer each, then press Check. Every answer explains itself.
Make your Path Card
A shareable reminder of where you're heading. The day count starts the first time you open this page; quest XP comes from your log above.
Scam check before you apply anywhere
- Real job and gig platforms are free to join. Never pay a "joining" or "training" fee.
- Never share an OTP or UPI PIN — no genuine employer needs them.
- Use official domains only; type the address yourself.
- India: report at cybercrime.gov.in or call 1930.
- US: report at ReportFraud.ftc.gov.
Small steps, every day.
Each quest has a smaller version for hard weeks, and a pause button. Nothing is lost.
Keep exploring
Sources
Checked 27 Oct 2026. We opened every link below ourselves. Search volumes on this site come from OpenSEO keyword research (Oct 2026).
| What we checked | Where |
|---|---|
| MDN: CSS grid layout | developer.mozilla.org |
| Figma Help: guide to Dev Mode | help.figma.com |