Skill UI

This guide provides a reference architecture for automating the design-to-code workflow. It outlines the complete pipeline—from Figma design input to structured React/Vue output—detailing components like Figma API integration, code generation, and crucial post-processing steps (token mapping, normalization). Ideal for establishing scalable design systems and managing large-scale design handoffs in a professional environment.

This guide assists developers in upgrading the Anima SDK versions and managing associated API changes. It covers migrating from manual Figma plugin workflows to automated SDK-based code generation, ensuring seamless integration of the latest design system features into development projects.

This skill demonstrates how to create an event-driven pipeline using Figma's Webhooks. It listens for design file changes and automatically triggers Anima to regenerate production-ready code components (e.g., React/TypeScript/Tailwind). Ideal for integrating continuous design updates into CI/CD workflows.

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.

A comprehensive runbook for rapid incident response to Figma REST API failures. It guides users through quick triage (checking status, authentication, rate limits), decision-making based on error codes (403, 429, 500), applying immediate mitigation strategies (token rotation, fallback modes), and completing thorough postmortem documentation.

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.