Skip to content

Things to note when translating design to code

Posted on:June 26, 2023 at 10:00 AM

So the designer shared with you beautiful UI designs on Figma/Invision and you goofed it up when coding. You spent a lot of coding the UI with HTML & CSS, React Native or insert your frontend stack but the result did not meet the designer’s expectations. Something about the final UI(and UX) you created doesn’t seem right.

Does this sound like a common occurrence? Here are a few things to note or a checklist that you can follow when translating design to code.

Table of contents

Open Table of contents


TL;DR? Here is a quick checklist for developers before raising a PR

White space and layout

The negative spaces and the alignment of the sections in the UI plays a very important role in showcasing quality. Overlapping elements, different border radiuses across cards, encroaching shadows and such inconsistencies are a big no-no.

Standardize a grid system for your product. Work with the designers to ensure that designs always follow a consistent grid layout. An 8x8px grid is commonly used. The margins and padding used will always follow multiples of 8px. This ensures consistency across different developers too.

There are various ways in which you can align the sections of the UI. Master the fundamentals of flexbox, grid and box model. I have found changing the background colour or adding a solid border to bounding boxes as an excellent way to debug the layout.


Do you know the difference between serif and sans-serif fonts? Unless you know such subtle differences, it is very easy for your eyes to miss the details when developing the UI.

Your eyes cannot see what the mind does not know.

Multiple such subtle differences add up and the final UI you develop will be way off from the original design.

A few key points to note when it comes to fonts are

And finally don’t just copy-paste text from the mockup. Ensure the spelling is right and grammar matches the context.


The common pitfalls I have encountered with junior developers are:


Different screens of your product might be developed by different UI developers. However, the information hierarchy and grid must be consistent across screens. There must be a common standard for the product. UI must not be developed as per the personal preference of an engineer. For example, if one developer adds 5 px margin to one screen and another one adds 8 px margin, the UI of the final product is bound to be a mess.


The colours and branding are what gives life to your UI. As a frontend developer, understand the basics of colour theory, and different ways in which colours can be represented (hex, rgba, hsla). The branding of most products might have primary, secondary and accent colours. These colours are best added to the root of the project in a theme file so that it can be reused by every developer. In addition, ensure that you get the colour codes for disabled states, success and error messages and selection state from the designer. Most of the UI tools like Figma, Invision and Adobe XD provide you with ways to pick the right colour. These tools also come with design-to-code snippets that provide exact variables. Always ensure that pick the colour from the original design.

Strive for pixel perfection

“Can you spot 5 differences between these images?”

It’s a game we all played when we were young. Developing UI is very similar. The only difference is that the level of detail you must have is enormously high. Evaluate the screen you created top to bottom and right to left, pixel by pixel. Check for subtle differences that you might encounter between the UI developed and the prototype/mockup from the designer.

Observe everyday

Most of the apps and services that have millions of users pour in tons of money for user research and identifying the best UI/UX. You use a handful of such apps daily. Open your favourite food delivery app (seriously, do it right now). Observe the precision in layout, the typography of headings and body text, how precise the shadows are and how the app behaves when content is loading.

When you sign up for a new service, observe how easy/difficult the onboarding process is. As a full-stack/frontend engineer, instead of just consuming content, always observe. Your experience of using everyday apps can become good learning for developing great UI/UX.

Learn by doing

Let us all be honest, we still Google how to centre a div. Some of these UI development skills are difficult to master, but you can make great progress learning by doing. Open Dribbble, Behance or Awwwards and:

A few other great options for learning are:

Such side projects can be good guinea pigs to learn UI development and get better at it.

Watch out for UX and micro-interactions

All hell breaks loose once your product hits production and real users.

If something has to fail, it will definitely fail in production.

A button that you have added to submit data will respond in 200ms when developing locally. Once it goes to production, it might depend on the user’s network and several other factors increasing the response time to a few seconds. For every UI, ask these 3 questions:

A good developer is NOT someone who completes a development task because you have been told to do so. A good developer is someone who understands and puts the user’s needs first. You might create jaw-dropping screens but still have very bad UX. The success of any product depends on having a solid UX.

One of the easiest ways to delight users is to use small functional animations and introduce a subtle motion in the UI. Such micro-interactions take out the boredom of bland UI and give users clues and visual feedback.

As a developer:

Work as a team

Recently, I saw a reel on Instagram (embedded below). Once the designers have finalized a prototype, and when the developer reverts with “No, it’s not technically feasible”, it reflects two things:

Designers and developers and subsequent downstream functions (like QA) must work together to finalize product screens. As a good developer, you must identify potential technical hurdles in developing certain UI and UX.

View this post on Instagram

A post shared by Daksh • mindset enhancer (@the.dakshjoshi)


Building pixel-perfect UI needs good attention to detail. It is always good to abstract the variables like grid sizes, colours, typography etc. into one common place. Focus on reusing these instead of using inline styles. If possible, choose a design system rather than building a standard in-house.

Mastering UI development requires practice. Strive to become a perfectionist when it comes to UI and UX.