A practical look at why learning basic coding skills like HTML and CSS can make UX and UI designers more effective collaborators, better communicators, and stronger contributors to the product development process.
The whole topic of should designers learn to code has two takes to it. On one side, there are some great designers who are good at coding and transitioning their vision from Figma to HTML. On the other side, many believe that specializing in particular skills makes them an invaluable asset.
Learning to code helps in understanding the basics of the UI/UX realm and makes it easier to collaborate with developers and bring them into the design process.
Let’s check how learning to code knowledge can help designers in building a better product and move their vision from Figma to HTML.
By understanding the tech stack, errors and miscommunication can be reduced between the design and implementation stages. As a designer, I don’t have to worry about handing out design to a developer fearing it could get “lost in translation” when I can hand out instructions on the tech stack which can be valuable.
Aaron Walter, Vice President of Design Education at InVision, stated in a Toptal Design Talks article:
“It’s not going to kill a designer if they knew a little bit about how to write some HTML and CSS, maybe a little bit of JavaScript.”
Here’s some insider’s scoop on a website’s design process.
With reduced errors comes a reduced time that it takes to implement the design, but a designer also needs the knowledge on speaking code to confidently communicate their creative vision of the design.
The discrepancy between a designer and developer can be broken down if they speak each other’s language. Designers who can speak “front-end” have a better understanding of what’s possible and what isn’t from a front-end perspective and make collaboration easier.
With some fundamental knowledge of CSS & HTML, you can design not just for the users, but also for the developers to bring fruition to your design.
By knowing the basics of CSS & HTML, a designer can hit the sweet spot of “shared understanding” where the person doesn’t have to be an expert coder but can understand a developer’s perspective.
Great designers understand that being familiar with technological terms like the CSS box model not only makes the designer impressive, but also boosts their career prospects.
With some knowledge of coding languages, designers can also explore tools like Figma to visually communicate their perspectives to the designers.
Figma is a design tool that enables free-form exploration with concepts like path, layer, and groups. You can use it to wireframe websites, prototype designs, and design mobile app interfaces.
Figma’s Auto Layout feature allows you to create designs that grow to fill or shrink to fit and adjust as the content changes. It brings the concept of the CSS box model to Figma and allows the designer to
Source: Figma
“Auto Layout is an absolute pain-remover. It solves so many issues and allows me to make way more generic components with basic controls, instead of new components for variations in content.” — Guilhem Gantois, UX Consultant, Microsoft
Understanding how to use Figma with some basics of CSS allows the designer to visually communicate, but there’s a lot more when it comes to working with developers on building a product.
A major part of a designer’s workflow involves collaborating with people, especially developers.This could involve discussing features, brainstorming product design, or feedback on prototypes. Productive collaboration is a key ingredient for success between the development and the design team.
Here are some of the ways how designers have been having productive collaboration with developers.
“We sit with all our developers and talk with them every day. We’re constantly working together as we design to gauge technical feasibility, timelines, capabilities and to stay up on the latest technological advancements. After designing, prototyping and testing solutions we’ll have a more official review with all the dev leads as a final sign off before it gets into development so everyone is on the same page.” - Ben Peck, Former Product Designer at Seismic Software
“ Developers expect clarity, thoroughness, and a coherent vision from me. So I have the responsibility to think through the problems and special cases before delivering user stories, wireframes or mockups.” - Gabor Lenard, Digital Product Designer, Zenvite
A designer is a creator who addresses the user and their needs. Working with developers is extremely important for rolling out a smooth and successful product. May it be Figma or whatever tool a designer may use, learning some basics of coding from HTML to CSS can improve the communication between both the parties and help the team to work in tandem properly.
Click here to learn more web development terminologies and Figma tips.
There is no single right answer, but learning the basics of coding offers meaningful advantages for most designers. Understanding HTML, CSS, and some foundational development concepts helps designers communicate more clearly with developers, reduce errors during handoff, ask smarter questions, and design with a realistic understanding of what is technically achievable. It does not mean becoming a full-stack developer, but a working knowledge of front-end fundamentals makes collaboration significantly more productive.
HTML and CSS are the most practical starting points for designers. HTML defines the structure of a web page while CSS controls how it looks and behaves visually. Together, they give designers a solid foundation for understanding how their designs translate into a browser. Some knowledge of JavaScript can also be useful, but even a basic grasp of HTML and CSS is enough to close many of the communication gaps that commonly arise between design and development teams.
When designers understand the tech stack their developers are working with, they can create handoff documentation that is more precise and actionable. This reduces the likelihood of design elements being misinterpreted or lost in translation during implementation. Rather than describing visual intent in abstract terms, a designer with coding knowledge can reference specific concepts like padding, margin, or the CSS box model, giving developers the clarity they need to build what was actually designed.
Speaking code does not mean writing production-level software. It means being fluent enough in development language to have informed conversations with engineers about what is possible, what will take longer to build, and why certain design decisions may need to be adjusted for technical reasons. This shared vocabulary breaks down one of the most common barriers in product teams and allows designers and developers to work as genuine collaborators rather than handing work off over a wall.
Figma is a design tool that incorporates concepts closely related to front-end development, particularly through features like Auto Layout, which mirrors the behavior of the CSS box model. By designing in Figma with an understanding of how CSS works, designers can create components that behave more predictably in development, communicate layout logic more clearly, and reduce the amount of back-and-forth required to get a design built accurately. It is one of the most practical ways for designers to apply coding knowledge without leaving their design environment.
