# figma → html
Figma to HTML, hand-audited.
Send a Figma file. Ship semantic HTML5, mobile-first CSS (Flexbox or Grid), responsive from 320 to 1920, WCAG 2.2 AA. Cross-browser QA on Chrome, Safari, Firefox, Edge. AI-assisted first pass where auto-layout is clean, hand-code where it is not.
What you get.
- Semantic HTML5: header, nav, main, article, section, aside, footer used correctly, not divitis.
- Mobile-first CSS with Flexbox or Grid. No inline styles unless dynamic. BEM or utility-first class names, your call.
- Responsive breakpoints at 320, 768, 1024, 1280, 1920. Fluid typography with clamp() where the design allows.
- WCAG 2.2 AA: keyboard navigation, focus states, colour contrast checked, alt text on every image, forms labelled.
- Cross-browser tested on Chrome, Safari, Firefox, Edge (last two versions). No jQuery, no build step required.
- Assets optimised: SVG inline where used more than twice, images in AVIF with WebP fallback, lazy loading below the fold.
Real code output.
A real example of what ships. Not a rendered marketing screenshot; the actual source in your repo.
<section class="hero" aria-labelledby="hero-title">
<div class="hero__container">
<p class="hero__eyebrow">design to code</p>
<h1 id="hero-title" class="hero__title">Figma to HTML, hand-audited.</h1>
<p class="hero__lede">Send a Figma. Ship semantic HTML.</p>
<a href="/quote/" class="btn btn--primary">Get a quote</a>
</div>
</section>Tools we use.
Locofy Pro handles the first-pass layout when the Figma has strong auto-layout. Anima where component boundaries are clean. Hand-code from scratch when the design uses non-standard interactions or a custom design system.
Turnaround.
| Scope | Turnaround |
|---|---|
| Single page | 72h |
| 5-page site | 7d |
| Landing page rush | 24h at 1.5x |
Pricing.
Single HTML page from $249. 5-page site bundle from $1,190. See /pricing/ for the full table.
FAQ.
Do you use Tailwind or vanilla CSS?
Your call. Default is vanilla CSS with modern features (custom properties, container queries where supported, logical properties). Tailwind is a +0 flag; we config it against your design tokens if you have them.
What about images and SVG?
Images exported at 1x, 2x, and 3x if the design ships them. AVIF primary with WebP fallback, PNG last. SVG inlined for icons used more than twice, sprite sheet otherwise.
Do you handle web fonts?
Yes. Self-hosted with font-display:swap. Google Fonts allowed if you already use them. WOFF2 only. Preload the two files used above the fold.
Which browsers do you test?
Chrome, Safari, Firefox, Edge, last two versions each. iOS Safari and Android Chrome on real devices at 375 and 412 widths.
Do you deploy or hand over?
Both. Git repo (yours or ours). Deploy to Vercel, Netlify, Cloudflare Pages, or your own infra for +$149. Post-ship code review call included.
What if the AI first-pass output is bad?
We rewrite from scratch. Locofy quality varies wildly by input file. If auto-layout is a mess, the first pass is discarded and we hand-code. You pay the same price either way.
Send a Figma link.
Two-line brief, one Figma URL, one email. Quote back inside 24 hours weekdays. If you have a stack constraint (React version, Tailwind config, existing design tokens), say so up front.