Name: Figma Design to Code
Author: Figma

Figma Design to Code

Implementa frames de Figma como código de producción con el servidor MCP oficial de Figma.

Oficial del fabricantede FigmaVerificado el 18 de octubre de 2026

Instala Figma Design to Code gratis

Deja tu email y los pasos de instalación se abren aquí mismo: un prompt para pegar en tu herramienta de IA. Sirve para las 149 skills.

La skill oficial de Figma para convertir un diseño de Figma en código con su servidor MCP. Le indica a Claude cómo obtener el contexto de diseño correcto, mapearlo a tus componentes y verificar el resultado contra el frame original.

Para quién es

Desarrolladores frontend
Diseñadores que programan
Equipos de producto

Prompts para probar

Cuando la skill esté instalada, pide el resultado con tus palabras. Tu herramienta de IA usa la skill sola.

Prompt 1

Implementa este frame de Figma como un componente de React: <figma link>

Prompt 2

Construye la página de precios desde nuestro archivo de Figma usando nuestros componentes de botón existentes

Prompt 3

Convierte esta pantalla móvil de Figma a SwiftUI

Cómo instalarla

Las skills siguen el estándar abierto Agent Skills, así que esta no depende de una sola empresa. Elige la herramienta de IA que usas. ¿No lo tienes claro? La primera pestaña cubre la mayoría en un solo paso.

Lo más fácil: pega esto en tu herramienta de IA

Instala esta skill para que funcione en todos mis proyectos: ejecuta `npx skills add https://github.com/figma/mcp-server-guide/tree/main/skills/figma-design-to-code -g -y` en mi terminal. Si falta Node.js, dime primero cómo instalarlo. Cuando termines, confirma que la skill quedó instalada y dime cómo empezar a usarla.

O hazlo tú mismo:

Un solo comando instala la skill en las herramientas de IA de tu computadora. Detecta las que tienes y te pregunta en cuáles añadirla: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode y más de 60 más.

$npx skills add https://github.com/figma/mcp-server-guide/tree/main/skills/figma-design-to-code -g

Necesitas tener Node.js instalado (gratis, en nodejs.org). La opción -g hace que la skill esté disponible en todos tus proyectos.

Bueno saber: El plugin de Figma incluye más skills, como escribir en el lienzo, sistemas de diseño, FigJam y Slides.

Desbloquea los pasos de instalación

Gratis. Deja tu email una vez para abrir los pasos de instalación de las 149 skills y recibir cada mes las mejores skills nuevas.

Cómo lo verificamos

Confirmamos la skill en su fuente original el 18 de octubre de 2026: el SKILL.md está donde debe estar, los archivos se actualizaron en el último año y la licencia permite usarla. Todavía no la hemos probado en una tarea.