How to Export a Figma Design to HTML
Figma does not natively export HTML. Use Dev Mode, exported assets, and responsive semantic code to turn a design into a maintainable web page.
Short answer: Figma does not provide a native one-click HTML export. Its documented export formats are PNG, JPG, SVG, and PDF. The reliable process is to inspect the design in Dev Mode, export the required assets, then implement semantic, responsive HTML and CSS in your project. Code-generation plugins can create a first draft, but the result still needs engineering review.
This workflow gives you control over accessibility, responsive behavior, performance, maintainability, and integration with your existing components. It also works whether you are building plain HTML, a server-rendered site, or a framework application.
1. What Figma can and cannot export
Figma’s native export guidance covers PNG, JPG, SVG, and PDF. HTML is not listed as a native file-format export. In practice, “export Figma to HTML” means converting the design handoff into production code or using a code-generation plugin as a starting point.
| Need | Figma provides | What you implement |
|---|---|---|
| Visual reference | Frames, components, styles, variables, prototypes | Page structure and interactions |
| Images and icons | PNG, JPG, SVG, PDF exports; downloadable source assets in Dev Mode | Optimized files, filenames, alt text, loading behavior |
| Layout values | Dimensions, spacing, colors, typography, component properties | Responsive CSS rules and design tokens |
| Code hints | Autogenerated snippets for selected objects | Semantic HTML, maintainable CSS, JavaScript behavior |
2. Recommended Figma-to-HTML workflow
Step 1: Open the file in Dev Mode
Dev Mode is Figma’s developer-focused interface for inspecting and implementing designs. Open the file, switch to Dev Mode, and identify the page or frame you will build.
Step 2: Inspect the design hierarchy
Select the page, main frame, components, and child layers. Record:
- Layer and component names
- Frame dimensions and constraints
- Spacing, padding, and gaps
- Colors, gradients, borders, and shadows
- Font family, size, weight, line height, and letter spacing
- Variables, styles, and component properties
- Prototype states such as hover, focus, open, disabled, and error
- Desktop, tablet, and mobile frames if they exist
Use names and repeated patterns to identify likely HTML components. A frame named “Pricing card” may become an <article>; a repeated navigation group may become a reusable component.
Step 3: Read the Code section
Select an object to populate the Code section in the inspect panel. Treat the generated snippet as a measurement and syntax aid, not as a complete page. It may show CSS values while leaving semantics, responsive rules, content structure, and behavior to you.
Step 4: Export assets
Select one or more layers and configure Export. Choose the format based on how the asset will be used:
| Asset | Typical format | Implementation notes |
|---|---|---|
| Photographs and complex artwork | JPG or WebP generated by your image pipeline | Compress, size for the largest rendered width, and provide descriptive alt text when meaningful |
| Transparent illustrations | PNG or SVG | Prefer SVG for scalable vector artwork when it is safe and appropriate |
| Icons and simple logos | SVG | Give inline icons accessible labels or hide decorative icons from assistive technology |
| Animated content | GIF, MP4, or another web video format | Check controls, reduced-motion behavior, and file size |
| Print or handoff reference | Use as documentation or print output, not as the web layout itself |
Use usable filenames such as hero-dashboard.svg instead of layer IDs. Confirm that you have permission to ship every font, image, and icon.
Step 5: Build semantic HTML
Translate visual groups into meaningful structure. Do not reproduce every Figma layer as a generic <div>.
<header class="site-header">
<a class="brand" href="/" aria-label="Acme home">
<img src="/assets/brand-mark.svg" alt="" width="32" height="32">
</a>
<nav aria-label="Primary">
<ul>
<li><a href="/products">Products</a></li>
<li><a href="/pricing">Pricing</a></li>
</ul>
</nav>
<a class="button" href="/signup">Start free</a>
</header>
<main>
<section class="hero" aria-labelledby="hero-title">
<div class="hero__content">
<p class="eyebrow">Analytics for teams</p>
<h1 id="hero-title">Understand every customer journey</h1>
<p>Turn product data into decisions your team can act on.</p>
<div class="hero__actions">
<a class="button" href="/signup">Start free</a>
<a class="button button--secondary" href="/demo">Book a demo</a>
</div>
</div>
<img src="/assets/hero-dashboard.webp" alt="Analytics dashboard showing a rising conversion chart" width="720" height="540" loading="eager">
</section>
</main>Step 6: Convert fixed values into responsive CSS
A Figma frame is a set of visual snapshots. A website needs rules that work between those snapshots. Define a content width, fluid spacing, breakpoints, and component states.
:root {
--color-ink: #172033;
--color-muted: #5d6678;
--color-accent: #4255ff;
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2.5rem;
--content-max: 72rem;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--color-ink); font-family: Inter, system-ui, sans-serif; }
.site-header, .hero { width: min(100% - 2rem, var(--content-max)); margin-inline: auto; }
.site-header { display: flex; align-items: center; gap: var(--space-3); min-height: 4rem; }
.site-header nav { margin-inline: auto; }
.site-header ul { display: flex; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-4); padding-block: clamp(3rem, 9vw, 8rem); }
.hero h1 { max-width: 12ch; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 0.98; }
.hero img { width: 100%; height: auto; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding-inline: 1.1rem; border-radius: 999px; background: var(--color-accent); color: white; text-decoration: none; }
.button:focus-visible, a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (max-width: 48rem) {
.site-header nav { display: none; }
.hero { grid-template-columns: 1fr; }
}Step 7: Load fonts and map design tokens
Use the intended web fonts, then check the page again. Font metrics can change line wrapping, button widths, and vertical rhythm. Map Figma variables and styles to CSS custom properties or your framework’s token system instead of scattering literal values through every selector.
Step 8: Implement behavior and states
Prototype transitions do not automatically become production interactions. Implement keyboard navigation, focus states, form validation, menus, dialogs, loading states, error states, hover and active states, and reduced-motion behavior.
Step 9: Compare at target breakpoints
Render the page at each important Figma frame size and at intermediate widths. Check typography, spacing, image crops, overflow, contrast, focus visibility, keyboard order, and content that was absent from the mockup such as long names or validation messages.
3. Complete plain HTML example
The following small page demonstrates the handoff pattern. Replace the sample copy and exported assets with the values from your file.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Acme analytics</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="site-header">
<a class="brand" href="/"><img src="assets/brand-mark.svg" alt="Acme" width="32" height="32"></a>
<nav aria-label="Primary"><a href="/features">Features</a> <a href="/pricing">Pricing</a></nav>
<a class="button" href="/signup">Start free</a>
</header>
<main>
<section class="hero" aria-labelledby="title">
<div>
<p class="eyebrow">Analytics for teams</p>
<h1 id="title">Understand every customer journey</h1>
<p>Turn product data into decisions your team can act on.</p>
<a class="button" href="/signup">Start free</a>
</div>
<img src="assets/hero-dashboard.webp" alt="Analytics dashboard with conversion trends" width="720" height="540">
</section>
</main>
</body>
</html>4. Code-generation plugins
Plugins extend the native handoff. Figma’s own code-generation guidance names Anima for React or HTML with CSS, SCSS, or Tailwind snippets and Figma to Code for responsive website code. Generated output can reduce setup time, but review it before merging.
| Review area | Questions to ask |
|---|---|
| Fidelity | Does it match the reference at every target breakpoint and state? |
| Semantics | Are headings, landmarks, lists, buttons, links, and forms meaningful? |
| Accessibility | Can a keyboard and screen-reader user complete the same tasks? |
| Responsiveness | Are there layout rules between frames, or only fixed coordinates? |
| Maintainability | Are components, class names, CSS, and tokens understandable? |
| Assets | Are files optimized, licensed, correctly cropped, and given useful alt text? |
| Integration | Can the result use your framework, design system, routing, and tests? |
| Change management | Can a later Figma revision be compared and applied without replacing the page? |
5. Figma for VS Code and connected handoff
Figma for VS Code brings design inspection, comments and changes, and asset download or export into the editor. This can reduce context switching while you implement the page. Code Connect, plugins, and shared component libraries can also keep implementation context closer to the design system.
6. Accessibility checklist
- Use one clear
<h1>and a logical heading order. - Use landmarks such as
<header>,<nav>,<main>, and<footer>. - Use buttons for actions and links for navigation.
- Associate every form control with a visible label.
- Provide meaningful alt text for informative images and empty alt text for decorative ones.
- Preserve visible keyboard focus and a logical tab order.
- Check color contrast and do not communicate state with color alone.
- Honor
prefers-reduced-motionfor animated transitions. - Test long text, zoom, touch targets, and validation errors.
7. Performance and reliability
- Export images near their largest rendered dimensions and compress them in your build pipeline.
- Use responsive image sources when the same artwork appears at several sizes.
- Set width and height to reduce layout shifts.
- Lazy-load below-the-fold images; keep the primary hero asset eager when it is part of the first view.
- Prefer a small SVG for simple icons instead of a large raster export.
- Load only the font weights you use and use a sensible fallback stack.
- Avoid absolute positioning for page structure; reserve it for overlays and controlled artwork.
- Check behavior with slow networks, disabled JavaScript, blocked third-party assets, and missing images.
8. Common problems and fixes
| Problem | Likely cause | Fix |
|---|---|---|
| “Export to HTML” is missing | HTML is not a native Figma export format | Use Dev Mode and implement the handoff, or evaluate a code-generation plugin. |
| Everything is a positioned div | Generated code copied visual coordinates | Rewrite the structure with semantic elements and CSS Grid or Flexbox. |
| Mobile layout breaks | Desktop pixel values were copied without rules between frames | Define fluid widths, wrapping behavior, and explicit breakpoints. |
| Text wraps differently | The production font, weight, or line height differs | Load the correct web font and verify font metrics before adjusting spacing. |
| Images look blurry | The export is too small or being stretched | Export at an appropriate scale, use responsive sources, and preserve aspect ratio. |
| Icons have unexpected backgrounds | A raster export was used for a vector icon | Export SVG where suitable and inspect the SVG before shipping it. |
| Buttons do nothing | Prototype links were mistaken for implementation | Add real links or button handlers and define loading, success, and error states. |
| Screen readers announce noise | Decorative layers received labels or generic containers were used | Remove decorative content from the accessibility tree and add labels only where needed. |
| Updates are difficult to merge | Generated code replaced the whole page | Keep reusable components, tokens, and a documented mapping from Figma components. |
9. Validate the result
- Compare desktop, tablet, mobile, and intermediate widths.
- Test keyboard-only navigation from the address bar through the page.
- Inspect headings, landmarks, labels, focus, and alt text with an accessibility tool.
- Check image requests, font loading, layout shifts, and largest content on a slow connection.
- Test realistic content: long headings, translated strings, empty states, errors, and logged-out users.
- Review the diff when the Figma design changes instead of regenerating production code blindly.
10. Or skip the browser setup
If you need a rendered reference image of the finished page, ScreenshotNeo is a website screenshot API and MCP server. It accepts one GET request and returns a PNG, JPEG, WebP, or PDF.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);See the ScreenshotNeo API documentation for request options. Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing result. An MCP server lets AI agents take screenshots, inspect pages, and capture PDFs. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
11. Cost and workflow decisions
Manual implementation costs more engineering time up front but gives you control over semantics, responsive behavior, and long-term maintenance. A plugin may shorten the first draft while adding review and cleanup work. Keep the Figma file as the visual source of truth and the codebase as the source of truth for behavior, accessibility, and runtime performance.
FAQ
Can Figma export an entire website as HTML?
Not through its documented native export formats. Use Dev Mode and implement the design, or use a code-generation plugin for an initial draft.
Should I copy Figma’s generated CSS directly?
Use it to read measurements and values, then reorganize it into semantic components, tokens, and responsive rules.
Is a screenshot a substitute for HTML?
No. A screenshot cannot provide navigation, text semantics, keyboard access, forms, responsive behavior, or search-engine-readable content.
When should I use SVG instead of PNG?
Use SVG when the source is vector artwork and the SVG is suitable for your security and rendering requirements. Use raster formats for photographs or artwork that does not benefit from vector scaling.
How do I keep future Figma changes manageable?
Use shared components and tokens, document the mapping to code, and compare individual changes before updating the relevant implementation.
