After being in UI development for a couple of years, recently I got to explore a designing tool. There by I got to know the reason end products don't match the exact UX.

There is a process that UX designers follow. Starting with developing a component mock-up collections, defining definite set of colors/gradients, constraint alignments, resolutions and more. The UI developers also have to follow the same procedure from developing UI component library(or customizing the existing library according to design), create color constants and respectively.

Second, we should be able to read a design which means some of the css properties are not mapped with the same name in the design. For example, in figma - border is named as stroke with the properties "inside & outside" which we need to map as padding & margin. Though figma gives a css translations to these, some times they need to be re-verified and also we might not use the exact styles. For example, left, top properties are rarely used in development when we are using column layout.

Third, careful observations. Designers take a good amount of time in details. For example, just to see if the shadow settings are looking good. If we just copy the shadow color and ignore the opacity of the shadow, then it may give a totally different look.

Four, analysis of deviation from the CSS library. Design tools are very handy as we all know. Some text might have totally different style applied(may be font), Or may be a random color button has pitched in between. In any such cases, we should discuss again with the designers. May be, it was placed by mistake or may be it was not thought in terms of development constraints. When we discuss with the designers, they have better suggestions or they may even alter the design. So, it is good to not ignore the deviations and to settle with a random alternative. It will be visible in the end product.

Fifth, to focus on view part separately from logic The moment design is provided & there is a demand for estimation, we totally get into implementation details. Divide the estimations into view part(html/css/android look & feel) and logic part. If possible, develop it as two different phases. That convinces the entire team about the progress, also providing a good quality.

This is all I got to share for today. Thanks for reading