Skill UI

This workflow is designed for developers building design-to-code pipelines. It connects to Figma via API to extract core design tokens, including colors, typography styles, and spacing values. It converts these raw design assets into structured code formats, such as CSS custom properties, JSON tokens, and Tailwind configurations, ensuring design consistency across development environments.

This skill provides comprehensive guidance on optimizing complex integrations with the Figma API to minimize operational costs and prevent hitting rate limits. It covers architectural best practices, such as transitioning from inefficient polling to webhook-driven systems, batching multiple requests, and using parameters like `depth=1`. Essential for building scalable, cost-effective SaaS solutions.

A comprehensive skill for building enterprise-grade integrations with Figma. It covers the full OAuth 2.0 authorization code flow, token refreshing, and secure handling of user access tokens. It provides methods for managing team structures, listing projects, accessing components/styles, and utilizing advanced, enterprise-only features like the Variables API.

This guide provides a comprehensive walk-through of making the first REST API calls to Figma. Users learn how to fetch core file metadata (name, version, pages) and traverse the complex document structure (nodes, frames, components). It's ideal for developers starting a new Figma integration, setting up API connectivity tests, or understanding the fundamental relationships between design elements within a Figma file.

This guide provides comprehensive instructions on setting up and authenticating with the Figma REST API. It covers two primary authentication methods: Personal Access Tokens (PATs) for server-side scripting, and the OAuth 2.0 flow for building user-facing applications. Learn how to generate tokens, manage granular scopes, and securely integrate your code with Figma's design data.

This comprehensive skill provides a framework for load testing and capacity planning of Figma API integrations. Using tools like k6, it helps benchmark API throughput, identify rate limit ceilings (e.g., leaky bucket behavior), and analyze latency under high load. It also outlines advanced scaling strategies—such as request coalescing and staggering—to ensure reliable, high-volume application integration.

This guide provides a comprehensive setup for local development workflows for Figma plugins and external REST API integrations. It enables developers to build, test, and iterate rapidly using hot reloading, mocked API fixtures, and structured project templates. Essential for creating design-to-code pipelines and advanced Figma tooling.

Automate the complex process of migrating design systems, design tokens, and styles between multiple Figma files, or from external sources into Figma. This tool covers the full pipeline: inventorying assets, extracting raw style data (colors, typography, effects), transforming them into structured design tokens (e.g., JSON format), and finally writing them back into Figma variables using the Variables API. Ideal for maintaining consistency across large design libraries.

This skill guides the secure configuration of Figma API access across development, staging, and production environments. It details best practices for managing separate API tokens (PATs), file keys, and cache settings. The focus is on implementing robust environment guards and utilizing secret management solutions to prevent cross-environment data leakage and accidental operations.

Provides comprehensive monitoring, metrics tracking, and alerting for all Figma API interactions. It instruments client calls to track key metrics like request latency, error rates, rate limit status, and cache performance. This solution ensures robust operational visibility, allowing developers to maintain high availability and stability for Figma integrations in production environments.

Automated guardrails for enforcing security policies and coding standards across all Figma API integrations. This tool is essential for CI/CD pipelines, helping to prevent credential leaks (PATs), validate API scopes, enforce request best practices, and ensure stable, secure connectivity with Figma.

A comprehensive checklist for deploying and auditing Figma REST API integrations in a production environment. It covers critical best practices including secure authentication, robust error handling (backoff, retries), rate limit management, continuous monitoring setup, and secure webhook implementation, ensuring a stable and reliable product launch.