code-connect-components

Establece vínculos bidireccionales entre componentes de diseño de Figma e implementaciones de código usando Code Connect. Requiere conexión con el servidor MCP de Figma y componentes publicados en planes de Organización o Enterprise. Identifica automáticamente componentes no mapeados en selecciones de Figma, luego escanea tu base de código en busca de componentes de código coincidentes por nombre, estructura y props. Presenta los componentes coincidentes para tu revisión antes de crear los mapeos, permitiendo aceptación o rechazo selectivo. Soporta múltiples...

npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components

Descargar ZIP GitHub

Más skills de figma

video-interaction-mapper

Esta habilidad debe usarse cuando el usuario solicite analizar una grabación de pantalla de UI y mapear los estados de interacción en Figma. Activar para solicitudes como "poner video…

figma-code-connect

Crea y mantiene archivos de plantilla de Figma Code Connect que asignan componentes de Figma a fragmentos de código. Úsalo cuando el usuario mencione Code Connect, componente de Figma…

create-design-system-rules

Reglas personalizadas del sistema de diseño para una implementación consistente de Figma a código en tu proyecto. Genera convenciones específicas del proyecto para la organización de componentes, estilos, tokens de diseño y manejo de assets que guían a los agentes de IA para producir código consistente. Soporta tres formatos de archivos de reglas: CLAUDE.md para Claude Code, AGENTS.md para Codex CLI y .cursor/rules/figma-design-system.mdc para Cursor. Requiere conexión con el servidor MCP de Figma y análisis del código base para descubrir patrones existentes antes de las reglas...

figma-implement-motion

Traduce los movimientos y animaciones de Figma a código de aplicación listo para producción. Úsalo al implementar animaciones o movimientos desde un diseño de Figma — el usuario menciona…

Traducción de SwiftUI ↔ Figma. Úsalo siempre que el usuario mencione Swift, SwiftUI, iOS, iPhone o iPad — en CUALQUIER dirección — traduciendo un diseño de Figma a…

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

Esta habilidad ayuda a los agentes a usar la herramienta MCP use_figma de Figma en el contexto de Slides. Puede usarse junto con figma-use, que tiene contexto fundamental para usar el…

figma-use-figjam

Esta habilidad ayuda a los agentes a usar la herramienta MCP use_figma de Figma en el contexto de FigJam. Puede usarse junto con figma-use, que tiene el contexto fundamental para usar el…