Skill UI

A comprehensive guide to the three primary architecture patterns for integrating with Figma: CLI scripts, Webhook services, and dedicated plugins. This resource helps developers select the optimal pattern (REST vs. Plugin API) based on whether the use case requires real-time event handling, local automation, or in-editor component interaction. Ideal for planning robust Figma-connected applications like design token synchronization or linting.

Automate the critical workflows of design systems by integrating Figma directly into your CI/CD pipelines. This tool allows you to automatically sync design tokens on a schedule, export assets upon pull requests, and validate design system consistency, ensuring design-code parity and preventing manual errors during deployment.

A comprehensive guide for diagnosing and resolving common errors encountered when integrating with the Figma REST API or Figma Plugin API. It covers status codes (403, 429, 404), token management, rate limiting, and plugin-specific runtime issues, ensuring robust and stable API development.

This skill provides a comprehensive workflow to export images, icons, and assets directly from Figma files using the REST API. It enables users to render specific frames or components as high-quality PNG, SVG, JPG, or PDF files. Ideal for building automated asset pipelines, generating documentation previews, or batch exporting large icon libraries.

This skill provides comprehensive methods for interacting with the Figma API. It covers retrieving and managing comments, accessing version history, and handling sensitive user data. Emphasis is placed on implementing robust privacy controls, PII redaction, data classification, and ensuring compliance with regulations like GDPR/CCPA.

A comprehensive diagnostic tool designed to collect all necessary evidence for troubleshooting persistent Figma REST API issues or preparing detailed support tickets. It automatically tests connectivity, checks rate limit status, captures environment information, and redacts sensitive data, providing a clean, actionable archive for developers and QA teams.

This skill provides comprehensive instructions and code examples for deploying Figma-powered applications, such as webhook receivers and design token APIs, to various production platforms including Vercel, Google Cloud Run, and Fly.io. It covers best practices for secret management, setting up robust webhooks, and implementing health checks to ensure reliable operation in a production environment.

This comprehensive guide details the ten most common mistakes and anti-patterns encountered when integrating with the Figma REST and Plugin APIs. It covers critical topics such as preventing oversized data fetches, managing rate limits, securing tokens, handling color format conversions, and optimizing data sync using webhooks instead of polling. Essential for code reviews and onboarding. Use when reviewing Figma code, onboarding new developers, or auditing an existing Figma integration.

A comprehensive guide to optimizing performance when integrating with the Figma REST API. Techniques cover aggressive response caching (LRU), reducing payload size using depth parameters, batching multiple node fetches, and implementing webhook-driven cache invalidation. Essential for handling large, complex Figma files efficiently.

A collection of production-ready patterns for interacting with the Figma REST API and Plugin API. It provides type safety, robust error handling, and reusable abstractions for tasks like building client wrappers, extracting design tokens, and traversing complex node trees. Essential for building scalable, enterprise-grade Figma integrations.

This guide manages critical migrations for the Figma REST API, addressing scope deprecations (e.g., migrating 'files:read' to granular scopes) and upgrading from Webhooks V1 to V2. It is essential for developers updating existing integrations to ensure compatibility with the latest API standards and security features.

This integration automates the critical process of converting design assets from Figma into production-ready code using Anima. It establishes a full CI/CD pipeline via GitHub Actions, enabling scheduled or manual component generation. Use this when automating design system handoffs, maintaining code synchronization with design changes, or implementing robust, reliable development workflows.