Development issues that designers need to know about

Having seen a chunk of figma designs, both amazing and average, there are some hiccups that come along the way when bringing your designs to life. Here are some of those that may help refine those gaps before jumping on a call with the devs asking what in god's name have they implemented.

Users will always use all sorts of image dimensions

Often times we have come across instances where a user needs to use an image of different dimensions than the one on figma and thus ends up looking squished / stretched / cropped. We would often design something keeping a certain purpose in mind but it ends up being used for all other sorts of scenarios and ends up looking different than intended. This often happens when building carousels.

It's easy to mess up the contrast and font sizes

There have been many instances where the colors and font sizes look okay in the design but end up failing the contrast test from google's lighthouse scores. This often happens with light grey-ish colors and warm backgrounds. It does go for a premium look but ends up being invisible on lesser color accurate displays. Trust me I have seen shadows not being visible on a gaming laptop but all fine on a mac.

Check your contrast with this tool if necessary
https://webaim.org/articles/contrast/devtools

As for font sizes, there have been prototypes where they get just 2-4 landing page screens. Now this can be blamed on the "paid to do just this job" but it makes it hard to scale it texts consistently across all devices and components. Even if you are not paid to do a full blown design system, using just a pre-defined type scale will help both of us keep things consistent. Feel free to use this https://typescale.com/ or better yet, use standard tailwind type sizes https://tailwindcss.com/docs/font-size

Custom logos and icons templates

Custom icons and logos are amazing until the editor / user needs to add a new category which was not designed for. Logos generally are used in black and white or outline formats so the popular ones will mostly have a publicly available svg to slap on, but if the user has a more niche requirement then it's best to drop a template of sorts for them to make new logos and icons on their own. All of this just to keep things consistent 🤧

Avoid Lottie Files

Yeah. No. Not this unoptimized mess. Please no.

Unordered / deeply nested items

A layer on top of a layer on top of a layer on top of a layer... oh there it is finally. Now I can download the image, and let's inspect the font sizes and the gap between each text... oh wait they

used next line (hitting enter key twice) to space the text out from each other

now how am I supposed to define the space between each paragraph.

Well, I'm just a chill guy so let me wing it if that's the case. Hope this run down helps you wowing your dev colleagues.

Credits:
Cover Photo by Miguel Á. Padriñán: https://www.pexels.com/photo/close-up-shot-of-keyboard-buttons-2882516/

Chill guy meme from know your meme

Roboto Studio cause that's where we do all these shenanigans.