7 UX Mistakes Founders Make in Figma Before Development

Founders who do their own design make the same seven mistakes in Figma — over and over, across every vertical, every stage, every funding level. This isn't a talent problem. It's a feedback problem. Nobody catches these issues before the code gets written.

Here's what to look for in your own mockups, and why fixing them now is so much cheaper than fixing them in production.

Mistake 1: Visual hierarchy that fights itself

The most common mistake: three or four elements competing for the same level of visual importance. Two headlines at the same size. An orange CTA button next to an orange badge next to an orange border. A hero section where the supporting tagline is bigger than the primary headline.

Users scan pages in an F or Z pattern and need one dominant element to anchor them. If everything is important, nothing is.

How to catch it: Squint at your design until it blurs. One element should remain visually dominant. If you can't tell what to look at first, neither can your users.

Mistake 2: Body text that fails contrast

Founders love dark slate-on-dark-slate color schemes. They look elegant in Figma's design environment, but on actual screens — especially older monitors, high-ambient-light environments, and mobile screens outdoors — that #94A3B8 text on #1E293B background becomes unreadable.

WCAG AA requires a contrast ratio of 4.5:1 for body text. That medium slate (#94A3B8) on dark slate (#1E293B) hits 3.9:1. Fail.

How to catch it: Use a contrast checker plugin in Figma. Every body text element must pass WCAG AA. Headlines can pass AA at 3:1. If you're designing dark UI, bump your body text to #CBD5E1 or lighter.

Mistake 3: Touch targets too small for mobile

In Figma on a desktop at 100% zoom, everything looks fine. A 28px button seems clickable. An icon with a 16px hit area looks intentional. On an iPhone 13 with a human finger, a 28px button is a frustration-inducing miss.

Apple's Human Interface Guidelines specify 44×44pt minimum for touch targets. Google's Material Design says 48×48dp. Most founder-designed mockups have interactive elements at 24–32px.

How to catch it: Create a Figma frame at 390×844 (iPhone 14 size) and place a 44×44 rectangle over each interactive element. If the rectangle covers important adjacent content or isn't covering the element, your touch target is too small.

Mistake 4: Typography scale without a system

Founders eyeball font sizes. The result: 8–12 different font sizes across a single screen, no clear scale, inconsistent line heights, and a design that looks "off" without anyone being able to articulate why.

A type scale (8, 12, 14, 16, 20, 24, 32, 48px) creates visual rhythm and makes your design look intentional. Arbitrary sizing (13px here, 15px there, 22px for that heading) destroys it.

Mistake 5: Spacing that isn't systematic

Related to the type scale problem: founders drag elements to where they "look right" instead of using a spacing system. The result is margins of 13px, 17px, 23px scattered throughout a design that was aiming for 16px and 24px everywhere.

Developers either faithfully implement your arbitrary spacing (creating unmaintainable CSS) or round everything to the nearest grid unit (making your design look different from what you built).

How to catch it: Turn on the 8px grid in Figma (View → Grids) and check that all your spacing values are multiples of 8 (or 4 for tighter components). Non-multiples almost always look fine in Figma and wrong in the browser.

Mistake 6: No empty / loading / error states

Figma mockups always show the happy path: the user has data, the product works, everything loaded. Developers implement the happy path. Then users encounter an empty dashboard, a failed API call, or a form validation error — and there's no design for any of it.

These states get designed ad-hoc in code, usually in a rush, and they're almost always worse than the happy path design. They're also where users decide whether your product feels trustworthy.

How to catch it: For every screen in your mockup, ask: what does this look like with no data? What does it look like while loading? What does it look like after an error? Add frames for each.

Mistake 7: CTA placement based on aesthetics, not conversion

Founders place CTAs where they look balanced and visually pleasing. Conversion optimization research places CTAs where they're seen and clicked.

Specific patterns that reduce CTA performance in mockups:

• Centering the CTA below a large block of text that many users won't read
• Using a ghost button (outline only, no fill) for the primary action because it "looks lighter"
• Placing two CTAs of equal visual weight ("Start Free" and "Learn More" at the same size and color)
• Putting the primary CTA below the fold on mobile because it felt more natural in the desktop layout

How to catch it: Check your mobile frame (375px width) and confirm the primary CTA is visible without scrolling. Make it filled, high-contrast, and the only primary-weight button on the screen.

How to run a pre-development design audit

Before you hand any mockup to a developer, run through this checklist:

• Squint test: one dominant element per section
• Contrast test: all text passes WCAG AA
• Touch test: all interactive elements ≥ 44px
• Type scale: max 6 distinct font sizes using a system
• Spacing: all values multiples of 4 or 8
• Empty states: designed for every data-driven component
• CTA: visible above fold on mobile, filled, single primary action

Better yet: export your screens and run them through an AI design review tool. You'll get a structured score across these dimensions plus issues you didn't think to check — in under a minute.

The real cost of not fixing these now

Each of these seven mistakes has a fix time in Figma of under 30 minutes. After development, the same fix requires frontend rework, QA, and a deploy. After launch, add the cost of every user who bounced or didn't convert during the time the bug existed.

The math is simple. Get the feedback now, fix it in Figma, and give developers a mockup they can implement confidently — one where every spacing value, every touch target, and every state is already designed.