Common Design Oversights Developers Should Know About

When a designer hands off a Figma file to a developer, it’s not uncommon for unexpected issues to surface—especially when real users encounter the product in the wild. Below are some recurring “hiccups” we’ve seen when turning designs into functioning features. Addressing these early can save frustration (and late-night bug hunts) down the road.

1. Users Will Always Upload All Sorts of Image Dimensions

In Figma, it’s tempting to design a carousel or placeholder with a fixed aspect ratio—say 16:9 or 1:1. Yet once in production, actual users upload images in all shapes and sizes. If you hard-code a single width/height or stretch an image to fit a box, you’ll quickly see photos that look squished, stretched, or oddly cropped.

Why it happens:
Designers often have a specific use-case in mind (e.g., a banner image, a profile picture) but forget that real content rarely conforms. When a developer simply sets object-fit: cover or contain without fallback rules, the user’s image can end up misaligned or missing critical content (like a face being cut off in a profile photo).

How to avoid it:

• Set intelligent aspect-ratio constraints (e.g., CSS aspect-ratio: 16 / 9;) and allow for letterboxing/pillarboxing.

• Offer client-side cropping tools so users can adjust before upload.

• Test with “outlier” images (very tall, very wide, low resolution) to ensure nothing breaks.

2. It’s Easy to Mess Up Contrast and Font Sizes

A text color that looks crisp on a designer’s MacBook Pro can disappear on a less color-accurate display—especially when using light grays on warm backgrounds. In some demos, you might see shadows or subtle hues perfectly in Figma, but a Windows laptop or gaming monitor renders them nearly invisible. Similarly, font sizes that feel “just right” on desktop can be illegible on smaller screens or low-resolution displays.

Common pitfalls:

• Contrast ratios fail Google Lighthouse (aim for at least 4.5:1 for normal text).

• Font sizes drop below 16px on body text, making copy hard to read on mobile.

• Custom type scales that don’t adapt to responsive breakpoints.

How to avoid it:

• Run contrast checks in your browser using tools like WebAIM Contrast Checker or Lighthouse’s accessibility audit.

• Use a standard typographic scale—for example, the TypeScale guidelines or the default Tailwind CSS font sizes (Tailwind Font Size). This ensures consistency across headings, body text, and captions.

• Preview on multiple devices (macOS, Windows, Android phones, iPhones) to catch display-specific issues.

3. Custom Logos and Icon Templates

A set of bespoke logos and icons looks great—until a user asks to add a new category or upload a logo that wasn’t part of the original pack. Designers might deliver a handful of SVG icons, but when the product grows and a “new feature” needs a new icon, developers scramble for a matching style.

Why it happens:

• Designers rarely anticipate every possible category or workflow.

• Users want to personalize or extend beyond mockups (for example, uploading their own “partner logo”).

How to avoid it:

• Provide editable icon/logo templates (Figma components or Illustrator files) that developers and content managers can duplicate and recolor.

• Stick to a simple, consistent icon style (line weight, corner radius, color palette) so new icons blend seamlessly.

• Consider an icon font or SVG sprite system where new symbols can be dropped in without disrupting the existing set.

4. Avoid Lottie Files (When Possible)

Lottie animations are extremely powerful for adding interactivity, but they can become an “unoptimized mess” if not handled carefully. Large JSON payloads, missing fallbacks, or reliance on too many custom After Effects plugins can lead to long load times, janky playback, or crashes on older devices.

Common pitfalls:

• Large Lottie JSONs that take seconds to download, blocking the UI.

• Animations that rely on features not fully supported in Lottie’s rendering engine—causing missing shapes or glitched motion.

• No fallback for users with reduced motion or disabled animation.

How to avoid it:

• Export minimal Lottie files—remove hidden layers, trim unused frames, and optimize vector paths.

• Test on low-end devices to ensure the animation stays smooth.

• Provide a static PNG or GIF fallback for environments where Lottie is unavailable.

• Consider CSS animations or lightweight SVG animations for very simple transitions (like a rotating loader or a pulsating button).

5. Unordered or Deeply Nested Layers

When Figma files contain layers on top of layers on top of layers, it becomes painful for developers to inspect and extract properties (margins, font sizes, spacing). Even something as simple as measuring the gap between paragraphs can turn into a scavenger hunt if designers hit Enter multiple times or nest text blocks inside invisible frames.

Why it happens:

• Designers rely on “quick hacks” like adding blank lines for spacing instead of using proper Auto Layout or constraints.

• Deep nesting (frames inside frames) to mirror a complicated layout visually, but it complicates CSS/HTML extraction.

How to avoid it:

• Use Figma’s Auto Layout for spacing, padding, and alignment instead of manually adding blank lines.

• Limit layer depth by grouping related elements under a single frame with clear names (e.g., Header → Logo, Header → Nav).

• Adopt consistent naming conventions so developers can quickly locate Button/Primary/Default instead of digging through Group → Frame → Component → Vector chains.

• Document layout specs in Figma (using plugins or the Inspect panel) so devs don’t guess margins or font sizes.

Wrapping Up

By keeping these five design oversights in mind, you’ll close the gap between Figma mockups and production code—saving both designers and developers countless hours of frustration.

1. Expect all kinds of image uploads—define aspect ratios and cropping tools.

2. Maintain proper contrast and a standardized type scale to ensure legibility across devices.

3. Provide editable icon/logo templates so new assets always fit your brand’s style.

4. Use Lottie wisely—optimize JSON files, test performance, and offer static fallbacks.

5. Avoid deep nesting and manual spacing hacks—leverage Auto Layout, clear naming, and minimal layers.

Solve these upfront, and your next designer–developer handoff will be smoother, faster, and less prone to “What the heck did they build here?” moments.

Credits:

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

• “Chill Guy” meme courtesy of Know Your Meme

• “Roboto Studio”—the unofficial space where we do all these design–dev experiments.