a lot of people have been asking me how to become a design engineer, I am still learning it myself, but here's my experience and thought process so far.
first, what does a design engineer actually do? it depends on the company, but generally:
→ if someone hands you a figma file, you should be able to copy it exactly.
→ the other big part is design taste, probably the most important skill, even without a figma file, you should be able to build something on your own that looks good, has strong ux, and works for everyone, that's basically what the job comes down to.
how do you actually get there:
→ start by copying figma files exactly, get comfortable translating design into code 1:1.
→ then work on your design taste, this one takes time, you're not getting good at it in a day or two.
→ look at design every single day, study what other people are making and try to understand why they made those choices, the more you consume, the faster you'll spot good vs bad design.
→ follow other design engineers, especially as a beginner, don't be afraid to copy their work, copying is practice, do it a lot until you start developing your own taste.
→ once you've copied enough, start iterating, copy ten hero sections, then mix and remix them, this is one of the best ways to build your own style.
→ at the end of it, you're chasing balance, something that works well for everyone, not just something that looks nice to you, this is honestly the hardest part, and i'm still working on it myself, when someone lands on your site, it should just feel easy and clear.
a few things that help along the way:
→ know figma and how to design, you don't need it, but it helps a lot, at my current job i handle both design and frontend, and it makes the whole process much faster.
→ learn responsive design, your work needs to hold up across all screen sizes.
→ learn the 8-point spacing system (or 4-point), your layouts will instantly look more consistent.
→ learn color theory, simple rule, stick to 3 colors max outside of neutrals.
→ learn motion, animations bring life to a website, but balance is key, too much hurts more than it helps.
→ learn svg animations, small thing, but a solid plus.
→ learn how to build a design system, invaluable for bigger projects and makes you way faster.
→ when you're learning something new, do it manually two or three times first so you actually understand it, then turn it into a reusable "skill" you can hand off to ai, this way you're not just blindly prompting, and it's fast and reusable everywhere.
resources i'd recommend:
– design: @AnshMehraaa (learned most of my design from him)
– design engineering: @mannupaaji (shifted to design engineering because of him, best decision i made)
– refactoring ui by adam wathan and steve schoger (solid guide, worth going through)
important reminder:
In this market, being visible matters, post your work even if it's not perfect, share the journey, people connect with progress, and you'll have a record of how far you've come.
At the end of the day, being a design engineer is about the work, building products that look good, feel great, and are usable by everyone, you don't have to be a motion expert, lock yourself into next.js, or tie yourself to one specific stack, it's not about tools, it's a mindset, you can do web, mobile, or anything else, it's about what you build and how you build it.
still figuring a lot out myself, but this is the path so far.
i'll break down my actual project process in a separate post, let me know if that's something you'd want to see.
@MurtuzaSh37756@Dev__Owais Learn everything in frontend and then implement, or learning concepts and making mini projects with them helps better. This portfolio has too many concepts to grasp onto to start building with thousands of lines of code. Hence learning newer concepts and practicing is better.