Skills de Figma

mcp-server-guide/skills/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...

mcp-server-guide/skills/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...

mcp-server-guide/skills/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…

mcp-server-guide/skills/figma-code-connect-components

Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.

mcp-server-guide/skills/figma-create-design-system-rules

Genera reglas personalizadas del sistema de diseño para la base de código del usuario. Se usa cuando el usuario dice "crear reglas del sistema de diseño", "generar reglas para mi proyecto", "configurar reglas de diseño", "personalizar pautas del sistema de diseño" o desea establecer convenciones específicas del proyecto para flujos de trabajo de Figma a código. Requiere conexión con el servidor MCP de Figma.

mcp-server-guide/skills/figma-create-new-file

Crear un nuevo archivo en blanco de Figma. Úsalo cuando el usuario quiera crear un nuevo diseño de Figma o archivo de FigJam, o cuando necesites un nuevo archivo antes de llamar a use_figma. Gestiona la resolución del plan mediante whoami si es necesario. Uso — /figma-create-new-file [editorType] [fileName] (ej. /figma-create-new-file figjam My Whiteboard)

mcp-server-guide/skills/figma-design-to-code

Usa esta habilidad al implementar un diseño de Figma como código (diseño → código) — la dirección de lectura DESDE Figma. Disparadores: 'implementa este diseño de Figma', 'construye esto…

mcp-server-guide/skills/figma-generate-design

Usa esta habilidad junto con figma-use cuando la tarea implique traducir una página de aplicación, vista o diseño de varias secciones a Figma. Disparadores: 'escribir en Figma', 'crear en Figma desde código', 'enviar página a Figma', 'tomar esta app/página y construirla en Figma', 'crear una pantalla', 'construir una página de aterrizaje en Figma', 'actualizar la pantalla de Figma para que coincida con el código'. Esta es la habilidad de flujo de trabajo preferida cada vez que el usuario quiera construir o actualizar una página, pantalla o vista completa en Figma desde código o una descripción. Descubre componentes, variables y estilos del sistema de diseño mediante search_design_system, los importa y ensambla pantallas de forma incremental sección por sección usando tokens del sistema de diseño en lugar de valores fijos.

mcp-server-guide/skills/figma-generate-diagram

MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. Routes to type-specific guidance (generic flowchart, architecture…

mcp-server-guide/skills/figma-generate-library

Const

mcp-server-guide/skills/figma-implement-design

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

mcp-server-guide/skills/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…

mcp-server-guide/skills/figma-swiftui

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…

mcp-server-guide/skills/figma-use

We need to translate the given text from English to Spanish. The text is a description of a prerequisite for using a skill called "figma-use". The instruction says to preserve the name "figma-use" but only if it appears in the source text. The source text does not contain "figma-use" explicitly; it says "this skill" and "figma" appears in "use_figma" and "Figma file context". We should preserve "use_figma" as a technical term. Also preserve URLs, numbers, etc. No extra commentary. The text is a warning/instruction. Translate naturally to Spanish, keeping the same tone. Ensure "MANDATORY prerequisite" is translated appropriately. "invoke this skill" -> "invocar esta habilidad". "use_figma" stays as is. "JavaScript" stays. "Figma" stays. "auto-layout" might be kept as is or translated? It's a Figma feature, often kept in English. I'll keep "auto-layout". "fills" -> "rellenos".

mcp-server-guide/skills/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…

mcp-server-guide/skills/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…

mcp-server-guide/skills/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…

mcp-server-guide/workflow-skills/generate-project-plan

Genera un tablero de plan de proyecto en FigJam a partir de un PRD y el contexto del código base. Flujo interactivo: investigación → propuesta de secciones → investigación profunda por sección → por sección…

mcp-server-guide/skills/implement-design

Traduce diseños de Figma a código listo para producción con fidelidad visual perfecta a nivel de píxel. Requiere conexión al servidor MCP de Figma y una URL de Figma con clave de archivo e ID de nodo para extraer contexto de diseño, capturas de pantalla y recursos. Flujo de trabajo estructurado en siete pasos: analizar URL, obtener contexto de diseño, capturar referencia visual, descargar recursos, traducir a convenciones del proyecto, lograr paridad 1:1 y validar contra Figma. Prioriza la reutilización del sistema de diseño sobre la duplicación; mapea tokens de Figma al diseño del proyecto...

mcp-server-guide/workflow-skills/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…