Exporting Every Asset From a Figma Project — All Formats, One Command

The Problem

Here's a conversation that happens in every startup, every week:

"Hey, can you export the icons?" "Which ones?" "All of them. SVG and PNG." "What sizes?" "1x, 2x, and 3x." "Okay, give me 45 minutes."

Then the developer realizes they also need PDFs for the docs site. Another round trip. The designer exports again. Names half the files differently this time. The build breaks.

At PyratzLabs, we run 31 AI agents across 8 teams. Our design team ships assets to three frontend projects, a docs site, and a marketing pipeline. The old way — manual exports from Figma — was costing us about 3 hours a week. Not in export time. In coordination time. The Slack messages, the "which version is latest," the re-exports when naming conventions drift.

That's dead time. And dead time compounds.

The Solution

We built a Figma export pipeline into our Design team's agent, Jack. One command. Every component in the file. Every format. Organized by page and frame with deterministic naming conventions. Output drops straight into the frontend build pipeline.

No Slack thread. No "can you re-export." No naming drift.

The Process (with code/config snippets)

The pipeline uses the Figma REST API. The agent authenticates, traverses the file tree, identifies exportable components, and batches the export requests.

Here's the core config Jack uses:

# figma-export-config.yaml
figma:
  file_key: "YOUR_FIGMA_FILE_KEY"
  access_token: "${FIGMA_ACCESS_TOKEN}"

export:
  formats:
    - format: svg
      scale: 1
    - format: png
      scale: 1
    - format: png
      scale: 2
      suffix: "@2x"
    - format: png
      scale: 3
      suffix: "@3x"
    - format: pdf
      scale: 1

  output_dir: "./assets/design"
  naming: "kebab-case"
  organize_by: "page/frame"

  filters:
    component_types: ["COMPONENT", "COMPONENT_SET"]
    skip_hidden: true
    skip_pages: ["_archive", "_drafts"]

The agent's workflow:

# Simplified extraction logic
def export_figma_assets(config):
    # 1. Fetch file structure
    file_data = figma_api.get_file(config.file_key)

    # 2. Traverse and collect exportable nodes
    components = []
    for page in file_data.document.children:
        if page.name in config.skip_pages:
            continue
        for node in walk_tree(page):
            if node.type in config.component_types and node.visible:
                components.append({
                    "id": node.id,
                    "name": to_kebab_case(node.name),
                    "page": to_kebab_case(page.name),
                    "frame": to_kebab_case(node.parent.name)
                })

    # 3. Batch export requests (Figma API supports batch)
    for fmt in config.formats:
        image_urls = figma_api.get_images(
            file_key=config.file_key,
            ids=[c["id"] for c in components],
            format=fmt.format,
            scale=fmt.scale
        )

        # 4. Download and organize
        for component in components:
            url = image_urls[component["id"]]
            path = f"{config.output_dir}/{component['page']}/{component['frame']}"
            filename = f"{component['name']}{fmt.suffix or ''}.{fmt.format}"
            download(url, f"{path}/{filename}")

    return len(components)

The key insight: Figma's API lets you batch image export requests. Instead of exporting one-by-one (which would hit rate limits), we send all component IDs in a single request per format. The API returns signed URLs. We download in parallel.

The output structure looks like this:

assets/design/
├── icons/
│   ├── navigation/
│   │   ├── arrow-left.svg
│   │   ├── arrow-left.png
│   │   ├── arrow-left@2x.png
│   │   ├── arrow-left@3x.png
│   │   ├── arrow-left.pdf
│   │   ├── arrow-right.svg
│   │   └── ...
│   └── actions/
│       ├── edit.svg
│       └── ...
├── illustrations/
│   └── onboarding/
│       ├── welcome-hero.svg
│       └── ...
└── manifest.json   ← component index with metadata

The manifest.json is critical. It's an auto-generated index of every exported asset with its dimensions, original Figma node ID, and export timestamp. Frontend build tools can consume it directly.

The Results

The time savings aren't just in the export. It's the elimination of coordination overhead. Designers design. Developers pull from the pipeline. Nobody pings anyone.

Try It Yourself

Point any Mr.Chief agent at a Figma file with a personal access token. The Figma skill handles authentication, traversal, batch export, and file organization. Add it to a CI trigger and your assets update every time the Figma file changes.

The config above is production-ready. Swap your file key and token. Run it.

The best design ops feel like nothing happened. Assets just appear, named correctly, in the right folder, at the right scale. That's the point.