Figma

Figma is a community skill for integrating with the Figma design platform through its REST API, enabling automated design token extraction, component inspection, and design-to-code workflow synchronization.

What Is This?

Overview

Figma provides integration patterns for accessing Figma files programmatically through the Figma REST API. It covers file and node inspection, image export, design token extraction from styles and variables, comment management, and component library access. The skill enables developers to bridge the gap between design tools and development workflows by automating data extraction from Figma files directly.

Who Should Use This

This skill serves frontend developers who need to extract design specifications from Figma files, design system teams synchronizing tokens between Figma and code, and teams building automated pipelines that convert Figma designs into production assets or documentation.

Why Use It?

Problems It Solves

Manually copying colors, spacing values, and typography settings from Figma into code introduces transcription errors. Design updates require developers to re-inspect files and update values by hand. Exporting assets individually through the Figma UI does not scale when a project contains dozens of icons or illustrations. Design system documentation drifts from actual Figma source files when updates happen in only one location.

Core Highlights

Node traversal reads the complete structure of any Figma file including frames, groups, and component instances. Style extraction pulls color palettes, typography scales, and effect definitions into structured data. Image export generates assets at specified scales and formats from any node in the document. Webhook support notifies external systems when Figma files change, enabling automatic synchronization pipelines.

How to Use It?

Basic Usage

import httpx
from dataclasses import dataclass

@dataclass
class FigmaClient:
    token: str
    base_url: str = "https://api.figma.com/v1"

    def get_file(self, file_key: str) -> dict:
        resp = httpx.get(
            f"{self.base_url}/files/{file_key}",
            headers={"X-Figma-Token": self.token}
        )
        resp.raise_for_status()
        return resp.json()

    def get_images(self, file_key: str, node_ids: list[str],
                   fmt: str = "png", scale: int = 2) -> dict:
        resp = httpx.get(
            f"{self.base_url}/images/{file_key}",
            headers={"X-Figma-Token": self.token},
            params={"ids": ",".join(node_ids), "format": fmt, "scale": scale}
        )
        return resp.json()["images"]

    def get_styles(self, file_key: str) -> list[dict]:
        data = self.get_file(file_key)
        return list(data.get("styles", {}).values())

Real-World Examples

class DesignTokenExtractor:
    def __init__(self, client: FigmaClient):
        self.client = client

    def extract_colors(self, file_key: str) -> dict:
        data = self.client.get_file(file_key)
        colors = {}
        self._walk_nodes(data["document"], colors)
        return colors

    def _walk_nodes(self, node: dict, colors: dict):
        if node.get("type") == "RECTANGLE" and "fills" in node:
            for fill in node["fills"]:
                if fill.get("type") == "SOLID":
                    c = fill["color"]
                    r, g, b = int(c["r"]*255), int(c["g"]*255), int(c["b"]*255)
                    hex_val = f"#{r:02x}{g:02x}{b:02x}"
                    name = node.get("name", "unnamed")
                    colors[name] = hex_val
        for child in node.get("children", []):
            self._walk_nodes(child, colors)

client = FigmaClient(token="your-token")
extractor = DesignTokenExtractor(client)
tokens = extractor.extract_colors("file-key-here")
for name, value in tokens.items():
    print(f"  --color-{name}: {value};")

Advanced Tips

Cache Figma API responses locally with version tracking to avoid redundant requests for unchanged files. Use the Figma Variables API for design token extraction when available, as variables provide more structured data than raw node inspection. Batch node ID requests in image export calls to reduce the number of API round trips.

When to Use It?

Use Cases

Automate design token synchronization between Figma design systems and CSS custom properties. Build asset export pipelines that generate optimized images from Figma components on each design update. Create design review bots that comment on Figma files when component usage deviates from guidelines.

Related Topics

Design token standards, CSS custom property systems, design system automation, component library management, and design-to-code conversion tools.

Important Notes

Requirements

A Figma account with API access enabled, a personal access token or OAuth application credentials, and file keys for the Figma documents being accessed programmatically.

Usage Recommendations

Do: respect Figma API rate limits by implementing request throttling and caching responses where file versions have not changed. Use node IDs for precise element targeting rather than searching by name across the entire document tree.

Don't: store Figma access tokens in client-side code or public repositories. Fetch entire file structures repeatedly when only specific nodes are needed. Ignore API versioning which may affect response formats between releases.

Limitations

The REST API provides read-only access to file contents and cannot modify designs programmatically. Complex components with variants produce deeply nested node structures that require careful traversal logic. API rate limits restrict high-frequency polling for real-time change detection.