Figma
Integración con Figma: accede a archivos de diseño, extrae componentes, lee tokens y traduce diseños a código. Elimina la brecha entre diseño y desarrollo.
El plugin de Figma elimina la brecha entre diseño y desarrollo conectando Claude Code directamente con tus archivos de diseño de Figma. Accede al contexto de diseño, extrae información de componentes, recupera tokens de diseño y traduce diseños a código listo para producción con fidelidad de píxel perfecto.
Entre las funciones principales se incluyen: extracción de datos de diseño estructurados (maquetación, tipografía y colores) de frames de Figma, obtención de variables y tokens de diseño, mapeo de componentes de Figma con tu base de código existente mediante Code Connect, y captura de referencias visuales para validación. El plugin es compatible tanto con el servidor en la nube de Figma como con la aplicación de escritorio.
Cómo usarlo: Comparte una URL de Figma y pide a Claude que implemente el diseño. Usa /implement-design para traducir frames de Figma a código con el sistema de diseño de tu proyecto. Usa /create-design-system-rules para generar directrices personalizadas que reflejen las convenciones de desarrollo de tu equipo. Usa /code-connect-components para establecer correspondencias entre los componentes de Figma y las implementaciones de tu base de código.
Ejemplos de prompts: «Implementa este diseño de Figma: [pega la URL de Figma]», «Crea reglas del sistema de diseño para mi proyecto React», «Conecta mi componente Button con su equivalente en Figma», «Extrae las variables de color de este archivo de diseño».