# Figma File Generate (`scrapeai/figma-file-generate`) Actor

Extracts structured data from Figma files including component names, frames, text layers, colors, and design metadata using the Figma API. Perfect for design audits, documentation, or converting design tokens to code.

- **URL**: https://apify.com/scrapeai/figma-file-generate.md
- **Developed by:** [ScrapeAI](https://apify.com/scrapeai) (community)
- **Categories:** Automation, Developer tools, Other
- **Stats:** 2 total users, 1 monthly users, 100.0% runs succeeded, 0 bookmarks
- **User rating**: 5.00 out of 5 stars

## Pricing

$5.00/month + usage

To use this Actor, you pay a monthly rental fee to the developer. The rent is subtracted from your prepaid usage every month. You also pay for the Apify platform usage, which gets cheaper the higher Apify subscription plan you have.

Learn more: https://docs.apify.com/actors/running/actors-in-store.md#rental-actors

## What's an Apify Actor?

Actors are web data automations that power AI and operations. They run on the Apify platform to scrape websites, process data, connect APIs, and automate workflows.
In Batch mode, an Actor accepts a well-defined JSON input, performs an action which can take anything from a few seconds to a few hours,
and optionally produces a well-defined JSON output, datasets with results, or files in key-value store.
In Standby mode, an Actor provides a web server which can be used as a website, API, or an MCP server.
Actors are written with capital "A".

## How to integrate an Actor?

If asked about integration, you help developers integrate Actors into their projects.
You adapt to their stack and deliver integrations that are safe, well-documented, and production-ready.
The best way to integrate Actors is as follows.

- **AI agents and MCP clients** — the [Apify MCP server](https://docs.apify.com/integrations/mcp.md) at `https://mcp.apify.com` (remote, streamable HTTP, OAuth on first use).
- **Agentic workflows and local Actor development** — [Agent Skills](https://apify.com/.well-known/agent-skills/index.json) with the [Apify CLI](https://docs.apify.com/cli/docs.md): `npm install -g apify-cli`, then `apify login`.
- **JavaScript/TypeScript projects** — the official [JS/TS client](https://docs.apify.com/api/client/js/docs.md): `npm install apify-client`.
- **Python projects** — the official [Python client](https://docs.apify.com/api/client/python/docs.md): `pip install apify-client`.
- **Any other language** — the [REST API](https://docs.apify.com/api/v2.md).

For usage examples, see the [API](#api) section below.

For more details, see Apify documentation as [Markdown index](https://docs.apify.com/llms.txt) and [Markdown full-text](https://docs.apify.com/llms-full.txt).

# README

🧠 HTML to Figma Converter

This Apify actor takes a list of URLs and converts HTML pages to Figma design files.
It extracts HTML content and converts it to Figma format using html-to-figma library. You can define proxy settings and optional selector waiting.

✅ Use Cases

🎨 Convert websites to Figma designs

📐 Extract UI components from web pages

🔄 Migrate existing websites to Figma projects

� Generate design systems from live websites

📥 Input Configuration

You can customize the actor using the following input fields:

```json
{
  "requestListSources": [
    {
      "url": "https://apify.com/"
    }
  ],
  "proxyConfiguration": {
    "useApifyProxy": true
  },
  "handlePageTimeoutSecs": 60,
  "maxRequestRetries": 1,
  "useChrome": false,
  "keyValueStoreId": "default"
}
```

🧾 Fields Explained
Field	Type	Description
requestListSources	array	Required. Array of URLs to download. Each item can have optional userData with waitForSelector
proxyConfiguration	object	Proxy settings - choose no proxy, Apify Proxy, or custom proxy URLs
handlePageTimeoutSecs	integer	Optional. Maximum time to spend processing one page (default: 60)
maxRequestRetries	integer	Optional. How many retries before giving up (default: 1)
useChrome	boolean	Optional. Use real Chrome browser instead of Chromium (default: false)
keyValueStoreId	string	Optional. ID of the key-value store to save Figma files. Use "default" or a custom store ID (default: "default")

📤 Output

The actor returns a dataset containing Figma file information for each URL.
Each record includes the original URL, final URL (after redirects), page title, and link to the generated Figma file.

🧩 Sample Output

```json
[
  {
    "url": "https://apify.com/",
    "loadedUrl": "https://apify.com/",
    "title": "Apify: Full-stack web scraping and data extraction platform",
    "figmaUrl": "https://api.apify.com/v2/key-value-stores/default/records/a9bc5ea2-45d0-490e-8839-9d65968f88dc.fig"
  }
]
```

🔒 Proxy Configuration

This actor supports flexible proxy configuration:

No proxy (default)

Apify Proxy for residential IPs

Custom proxy URLs

Default proxy settings:

```json
{
  "useApifyProxy": true
}
```

🚀 How to Use

Open the actor in Apify Console

Click "Try actor" or create a new task

Add URLs to the requestListSources array

Configure proxy settings if needed

Run the actor

Download Figma file data in JSON, CSV, or XML format

⚙️ Advanced Input Example

```json
{
  "requestListSources": [
    {
      "url": "https://example.com/",
      "userData": {
        "waitForSelector": ".content-loaded"
      }
    },
    {
      "url": "https://another-site.com/"
    }
  ],
  "proxyConfiguration": {
    "useApifyProxy": true,
    "apifyProxyGroups": ["RESIDENTIAL"]
  },
  "handlePageTimeoutSecs": 120,
  "maxRequestRetries": 3,
  "useChrome": true
}
```

🛠️ Tech Stack

🧩 Apify SDK
— for actor and data handling

🕷️ Crawlee
— for robust crawling and scraping

🌐 Puppeteer
— for browser automation and rendering dynamic content

🎨 html-to-figma
— for converting HTML to Figma design files

⚙️ Node.js — fast, scalable backend environment

# Actor input Schema

## `requestListSources` (type: `array`):

URLs to start with

## `proxyConfiguration` (type: `object`):

Choose to use no proxy, Apify Proxy, or provide custom proxy URLs.

## `handlePageTimeoutSecs` (type: `integer`):

Maximum time the scraper will spend processing one page.

## `maxRequestRetries` (type: `integer`):

How many retries before giving up.

## `useChrome` (type: `boolean`):

The scraper will use a real Chrome browser instead of a Chromium masking as Chrome. Using this option may help with bypassing certain anti-scraping protections, but risks that the scraper will be unstable or not work at all.

## `keyValueStoreId` (type: `string`):

ID of the key-value store to save Figma files. If empty, uses the default store. For custom stores, use the store ID (e.g., 'elRO7w6tzplDjZpAp').

## Actor input object example

```json
{
  "requestListSources": [
    {
      "url": "https://example.com/"
    }
  ],
  "proxyConfiguration": {
    "useApifyProxy": true,
    "apifyProxyGroups": [
      "RESIDENTIAL"
    ],
    "apifyProxyCountry": "IN"
  },
  "handlePageTimeoutSecs": 120,
  "maxRequestRetries": 1,
  "useChrome": false,
  "keyValueStoreId": ""
}
```

# API

You can run this Actor programmatically using our API. Below are code examples in JavaScript, Python, and CLI, as well as the OpenAPI specification and MCP server setup.

## JavaScript example

```javascript
import { ApifyClient } from 'apify-client';

// Initialize the ApifyClient with your Apify API token
// Replace the '<YOUR_API_TOKEN>' with your token
const client = new ApifyClient({
    token: '<YOUR_API_TOKEN>',
});

// Prepare Actor input
const input = {
    "requestListSources": [
        {
            "url": "https://example.com/"
        }
    ]
};

// Run the Actor and wait for it to finish
const run = await client.actor("scrapeai/figma-file-generate").call(input);

// Fetch and print Actor results from the run's dataset (if any)
console.log('Results from dataset');
console.log(`💾 Check your data here: https://console.apify.com/storage/datasets/${run.defaultDatasetId}`);
const { items } = await client.dataset(run.defaultDatasetId).listItems();
items.forEach((item) => {
    console.dir(item);
});

// 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/js/docs

```

## Python example

```python
from apify_client import ApifyClient

# Initialize the ApifyClient with your Apify API token
# Replace '<YOUR_API_TOKEN>' with your token.
client = ApifyClient("<YOUR_API_TOKEN>")

# Prepare the Actor input
run_input = { "requestListSources": [{ "url": "https://example.com/" }] }

# Run the Actor and wait for it to finish
run = client.actor("scrapeai/figma-file-generate").call(run_input=run_input)

# Fetch and print Actor results from the run's dataset (if there are any)
print(f"💾 Check your data here: https://console.apify.com/storage/datasets/{run.default_dataset_id}")
for item in client.dataset(run.default_dataset_id).iterate_items():
    print(item)

# 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/python/docs/quick-start

```

## CLI example

```bash
echo '{
  "requestListSources": [
    {
      "url": "https://example.com/"
    }
  ]
}' |
apify call scrapeai/figma-file-generate --silent --output-dataset

```

## MCP server setup

```json
{
    "mcpServers": {
        "apify": {
            "type": "http",
            "url": "https://mcp.apify.com/?tools=fetch-actor-details,scrapeai/figma-file-generate"
        }
    }
}

```

The hosted server signs you in with OAuth on first connect, so no API token belongs in this config. Clients without OAuth support can send an `Authorization: Bearer <APIFY_API_TOKEN>` header instead, using a token from API & Integrations in Apify Console (https://console.apify.com/settings/integrations).

## OpenAPI specification

Download the OpenAPI definition: https://api.apify.com/v2/actors/GhKNywNOCuwVOksFd/builds/qdRpudkEhhoghMhrU/openapi.json