How to Save Your Figma Site as Static HTML

Why Save Your Figma Site as Static HTML?

Have you ever designed a beautiful landing page in Figma sites and wanted to integrate it into your existing website? That's exactly what we needed to do for KidsCreateApp.com - we had a dynamic web application but wanted a polished, designer-crafted homepage created in Figma.

Rather than rebuilding the design from scratch in HTML/CSS, converting the Figma site to static HTML lets you seamlessly integrate professional designs into your existing web infrastructure. This approach preserves all the visual fidelity and interactions while giving you the flexibility to host it alongside your dynamic application.

The Complete Workflow

This guide walks through a reliable method to mirror your entire Figma site locally, identify missing assets, and fix broken images - all using command-line tools and VS Code.

Step 1: Download the Figma Site

The first step is to use wget to mirror the entire Figma site with all its dependencies:

wget --mirror --convert-links --adjust-extension --page-requisites --no-parent -P figma-site -nH https://your-site.figma.site/

(in my case it's https://linen-log-93627861.figma.site/)

Let's break down these flags:

• --mirror: Downloads the entire site recursively
• --convert-links: Converts links to work locally
• --adjust-extension: Adds proper file extensions (like .html)
• --page-requisites: Downloads CSS, images, and other assets
• --no-parent: Prevents crawling outside the specified domain
• -P figma-site: Saves files to a local figma-site directory
• -nH: Doesn't create hostname directories

For convenience, you can add this as an npm script in your package.json:

{
  "scripts": {
    "mirror-figma": "wget --mirror --convert-links --adjust-extension --page-requisites --no-parent -P figma-site -nH https://your-site.figma.site/"
  }
}

Step 2: Serve Locally with VS Code

Once downloaded, you'll want to serve the static files locally to test and identify issues:

1. Open the downloaded figma-site folder in VS Code
2. Install the "Live Server" or "Five Server" extension
3. Right-click on index.html and select "Open with Live Server"

This gives you a local development environment where you can inspect the site and identify any missing assets.

Step 3: Find Broken Images

Even with wget's comprehensive downloading, some images might not load properly. Here's a JavaScript snippet you can run in the browser console to identify broken images:

// Find all broken images on the page
const brokenImages = [...document.images]
  .filter(img => !img.complete || img.naturalWidth === 0)
  .map(img => img.src);

console.log('Broken images:', brokenImages);

// Get just the filenames for easier processing
const filenames = brokenImages.map(src => src.split('/').pop());
console.log('Filenames to download:', filenames);

This script checks all images on the page and returns URLs of any that failed to load.

Step 4: Download Missing Assets

Double check the path (v10 in my case, could be different for you)

Once you've identified broken images, create a script to download them directly from the Figma site:

#!/bin/bash

# Create directory if it doesn't exist
mkdir -p _assets/v10

# List of image files to download (update with your broken image filenames)
declare -a images=(
  "7382b62176045254700f2b48f0a32935eb73b3ae.png"
  "52340cefb415962ce8cd3f8ac9271034d1ba6c8c.png"
  # Add more filenames here as needed
)

# Base URL of the Figma site
FIGMA_SITE="https://your-site.figma.site"

# Download each image
for img in "${images[@]}"
do
  echo "Downloading $img..."
  curl -s "$FIGMA_SITE/_assets/v10/$img" --output "_assets/v10/$img"
  
  # Check if download was successful
  if [ -f "_assets/v10/$img" ] && [ -s "_assets/v10/$img" ]; then
    echo "Successfully downloaded $img"
  else
    echo "Failed to download $img or file is empty"
  fi
done

echo "Download process completed. Check files in _assets/v10/ directory."

Save this as download-missing-assets.sh, make it executable with chmod +x download-missing-assets.sh, and run it.

Social images

Sometimes social images (like og:image ) are not downloaded properly. You can manually download them by inspecting the page and finding the correct URLs.

---