Figma

El plugin de Figma cierra la brecha entre diseño y desarrollo al conectar Claude Code directamente a tus archivos de diseño de Figma. Accede al contexto del diseño, extrae información de componentes, recupera tokens de diseño y traduce diseños en código listo para producción con fidelidad píxel a píxel.

Las funciones clave incluyen la extracción de datos de diseño estructurados (disposición, tipografía, colores) de marcos de Figma, la obtención de variables y tokens de diseño, el mapeo de componentes de Figma a tu base de código existente a través de Code Connect y la captura de referencias visuales para su validación. El plugin funciona tanto con el servidor en la nube de Figma como con la aplicación de escritorio.

Cómo usar: comparte una URL de Figma y pide a Claude que implemente el diseño. Utiliza /implement-design para traducir marcos de Figma a código utilizando el sistema de diseño de tu proyecto. Utiliza /create-design-system-rules para generar directrices personalizadas que codifiquen las convenciones de desarrollo de tu equipo. Utiliza /code-connect-components para establecer correspondencias entre los componentes de Figma y las implementaciones de tu base de código.

Instrucciones de ejemplo: "Implementa este diseño de Figma: [URL de Figma]", "Crea reglas del sistema de diseño para mi proyecto de React", "Conecta mi componente Button a su contraparte de Figma", "Extrae las variables de color de este archivo de diseño".