Figma UI kits vs building from scratch: real cost math

The math is lopsided: a competent designer needs 30–60 hours to build what a good $49 SaaS UI kit ships — a component library with variants, auto layout, tokens, and a dozen assembled example pages. At any defensible hourly rate that is a four-figure build cost against a two-figure purchase. Scratch still wins in specific situations, but the default assumption should be the kit, and the interesting question is which kit costs you less after you buy it.

The scratch build, itemized honestly

• Design tokens (color, type scale, spacing, radius, shadows): 4–8 hours to do properly with dark-mode variants.
• Core components with states and variants — buttons, inputs, selects, modals, tables, navigation: 20–35 hours. Variants and auto-layout edge cases are where the time goes.
• Example pages that prove the system composes: 6–12 hours.
• Documentation so anyone else (including future you) can use it: 4–6 hours, honestly usually skipped, at a cost paid later.

Call it 35–60 hours. At $50/hour that is $1,750–$3,000 of build before you have designed a single screen of your actual product. The kit compresses that to an afternoon of learning its structure.

The hidden costs of kits — because they exist

Kits are not free wins. You pay a learning tax (2–5 hours to internalize someone else's layer structure and naming), a sameness tax (popular kits make your product look like other products built on the same kit — real, but fixable with a token pass: swap the palette, type pair, and radius scale in an hour or two), and occasionally a quality tax if you bought badly: detached instances, fake auto layout, missing states. The quality tax is the one that can silently eat the entire savings, which is why kit selection matters more than kit price.

How to buy a kit that actually saves the hours

• Open the preview and click a button component: does it have hover, focus, disabled, loading variants — or is it a rectangle with text?
• Check for true auto layout by imagining a longer label: would the component grow, or overflow?
• Look for typed design tokens / Figma variables, not hard-coded hex values scattered across frames.
• Count the example pages. Sixty components without assembled pages means the composition problem — the hard part — is still yours.
• Confirm license terms cover client work and unlimited end products if you are an agency.
• Check the update date against Figma's feature cycle; a kit predating variables needs modernizing.

When scratch genuinely wins

Build from scratch when the design system IS the product (a design-led brand where distinctiveness is the moat), when you have unusual technical constraints (a canvas-heavy app, an embedded UI, strict WCAG AAA), or when a team needs the shared understanding that only building it together creates. A senior team building a long-lived product may rationally spend the 60 hours as an investment in ownership. A founder shipping an MVP, an agency on deadline, a solo designer with five clients — the kit wins, and it is not close.

The blended play most professionals actually run

Buy the kit, keep its skeleton, and re-skin its tokens. You inherit the 40 hours of variant plumbing and pay 3–4 hours for differentiation — the best cost-per-distinctiveness ratio available. That is also the honest frame for the whole decision: you are not choosing between $49 and $0; you are choosing between $49 plus a token pass, or thirty-plus hours of your launch runway. Kits on the Design Kits & Figma shelf ship with instant delivery and escrow protection, so a kit that turns out to be rectangles-with-text is a refund, not a lesson.