Figma to Production: The Ultimate Image Export Workflow for Design Systems

In the era of modern design systems, developers and designers align on color variables, typography scales, and component layouts. Yet, when it comes to image assets, the handoff pipeline remains surprisingly messy.

Designers often export visual elements directly from Figma without compression, resulting in generic names like Group 4322.png or unnamed-hero-export.png. These files find their way into production code, bloating git repositories and degrading page speed metrics.

Establishing a structured, automated image handoff pipeline is essential for keeping design systems clean. Here is how to construct a Figma-to-production image workflow that guarantees optimal performance.

---

1. The Three Golden Rules of Figma Asset Export

Before hitting the "Export" button in Figma, establish these rules with your design team:

A. Never Export Nested Layers Directly

Always wrap assets in a structured Frame before exporting. Exporting individual shapes or groups directly can result in unpredictable bounding boxes and clipping.

• Best Practice: Create a standard bounding box (e.g., 24x24px for icons, 800x600px for illustrations) and fit the artwork inside it. This guarantees consistent canvas dimensions when imported into code.

B. Use Kebab-Case Naming Structures

Figma allows spaces and uppercase letters in frame names, but web environments prefer clean URLs and system paths.

• Avoid: Hero Illustration V2 (Draft).png
• Preferred: hero-illustration-v2.png

C. Standardize Output Formats in Figma

• Icons & Flat Graphics: Export as SVG.
• Photographs & Realistic Textures: Export as WebP (or PNG if transparency is required and WebP is not an option).
• Interface Assets: Do not export at @3x or @4x resolutions by default unless creating responsive image sets. Export at @1x and let development build scripts handle scaling.

---

2. Automating the Optimization Pipeline

Once assets are exported from Figma and placed into your code repository, they should not go straight to production. Instead, run them through an automated build step.

Below is an automated Node.js build pipeline utilizing Sharp (for rasters) and SVGO (for SVGs):

// scripts/optimize-assets.js
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');
const { optimize } = require('svgo');

const INPUT_DIR = './src/assets/raw';
const OUTPUT_DIR = './public/images';

fs.readdirSync(INPUT_DIR).forEach(async file => {
  const inputPath = path.join(INPUT_DIR, file);
  const ext = path.extname(file).toLowerCase();

  if (ext === '.svg') {
    const rawSvg = fs.readFileSync(inputPath, 'utf8');
    const result = optimize(rawSvg, {
      path: inputPath,
      multipass: true,
      plugins: [
        'preset-default',
        { name: 'removeViewBox', active: false },
        { name: 'cleanupIds', active: true },
      ],
    });
    fs.writeFileSync(path.join(OUTPUT_DIR, file), result.data);
    console.log(`Optimized SVG: ${file}`);
  } else if (['.png', '.jpg', '.jpeg', '.webp'].includes(ext)) {
    const filename = path.basename(file, ext);

    // Generate WebP
    await sharp(inputPath)
      .webp({ quality: 80 })
      .toFile(path.join(OUTPUT_DIR, `${filename}.webp`));

    // Generate AVIF
    await sharp(inputPath)
      .avif({ quality: 75 })
      .toFile(path.join(OUTPUT_DIR, `${filename}.avif`));

    console.log(`Processed Raster: ${filename} (WebP & AVIF generated)`);
  }
});

To integrate this workflow into your project, add the script to your build lifecycle in package.json:

{
  "scripts": {
    "optimize-assets": "node scripts/optimize-assets.js",
    "prebuild": "npm run optimize-assets"
  }
}

---

3. Aligning Images with Design System Tokens

For advanced systems, treat images as component layout properties rather than raw URL files.

Define aspect ratio tokens to ensure layout stability:

:root {
  --ratio-square: 1 / 1;
  --ratio-video: 16 / 9;
  --ratio-portrait: 4 / 5;
}

.card-thumbnail {
  aspect-ratio: var(--ratio-square);
  object-fit: cover;
}

By constraining images via aspect-ratio tokens, you ensure that even if a designer exports an image with a slightly incorrect crop, the layout will remain consistent and free from visual shifts.

---

4. Handoff Checklist for Teams

• Design: Check that vector paths are flattened in Figma to minimize SVG DOM nodes.
• Design: Remove invisible/hidden layers inside Figma frames prior to exporting.
• Development: Configure a Git hook (e.g., using Husky) to prevent committing raw, uncompressed files.
• Development: Use <picture> elements in code to deliver the automated AVIF/WebP formats generated during the build.