Ilustración 11. Qué se necesita para trabajar
Claude Code se puede conectar directamente a Figma y, con su ayuda, construir un sistema de diseño completo desde cero: variables, tokens, componentes y pantallas terminadas. En esta guía desglosaremos todo el proceso paso a paso, desde la instalación hasta la pantalla final de inicio de sesión.
Antes de comenzar, asegúrese de tener:
- La aplicación de escritorio Claude Code — una app con tres modos: Chat, Code y Agentic.
- Una suscripción activa a Claude — una cuenta gratuita no es adecuada para este flujo de trabajo.
- Una cuenta de Figma — con al menos un archivo abierto.
- Tiempo — 30-45 minutos sin distracciones para completar todo el flujo de trabajo.
Este flujo de trabajo consume los límites de uso de Claude. Construir un componente complejo como un botón con más de 120 variantes puede consumir una parte significativa de su límite horario. Comience con tareas más simples para familiarizarse con el proceso antes de abordar proyectos ambiciosos.
Qué se necesita para trabajar — ilustración 22. Instalamos Claude Code
Vaya a claude.ai/download y descargue la aplicación de escritorio Claude Code para su sistema operativo (macOS o Windows).
Después de la instalación, la aplicación le pedirá que realice la autenticación — inicie sesión con los datos de su suscripción a Claude. Después de esto, se abrirá una interfaz con tres modos:
- Chat — el Claude conversacional estándar.
- Code — para tareas de escritura de código.
- Agentic — aquí es donde ocurre el trabajo principal con Figma.
Para trabajar con Figma se utiliza el modo Agentic: es precisamente este modo el que permite a Claude ejecutar acciones autónomas, incluyendo el trabajo directo con su lienzo de Figma.
Qué se necesita para trabajar — ilustración 33. Conectamos Claude a Figma mediante MCP
Este es el paso clave que hace posible todo el flujo de trabajo. Claude se conecta a Figma a través del servidor MCP (Model Context Protocol).
Procedimiento de conexión:
- En la aplicación Claude Code, vaya a Settings.
- Abra la sección MCP Servers.
- Haga clic en «Add MCP Server».
- Seleccione Figma de la lista de integraciones disponibles.
- Complete la autenticación a través de su cuenta de Figma (siga el flujo OAuth).
- Después de la conexión, Figma aparecerá en la lista de servidores MCP activos.
Cómo verificar que todo funciona:
Abra cualquier archivo de Figma en el navegador y haga a Claude una pregunta simple:
Si Claude describe el contenido de su archivo, la conexión está establecida. Si no, verifique la configuración del servidor MCP y asegúrese de que el archivo de Figma esté abierto.
Antes de comenzar a trabajar, cree un archivo de Figma separado o una página dedicada dentro de uno existente. Esto aísla los experimentos de los materiales de trabajo reales.
Paso 3 — Creamos un sistema completo de variables con IA — ilustración 44. Creamos un sistema completo de variables con IA
En lugar de crear manualmente decenas de variables de color, tipografía y espaciado, Claude construye toda la arquitectura de tokens por sí mismo.
Prompt para crear el sistema de variables:
Lo que Claude crea como resultado:
Claude comienza a trabajar de forma autónoma en el archivo de Figma. En unos minutos, aparece en el panel Variables:
- Primitive Colors — un conjunto completo de rampas de colores, organizadas correctamente por colecciones.
- Semantic Colors — todas referencian correctamente a la colección primitiva (no valores hex codificados a mano, sino referencias reales).
- Tokens de interfaz — tokens de fondo, texto, iconos y bordes con estados hover y active.
- Sistema tipográfico — estilos de texto vinculados a las variables correspondientes.
- Tokens de dimensiones — escalas de espaciado y radios listas para usar.
Los tokens semánticos están correctamente vinculados a los primitivos: cambiar un color primitivo se propaga automáticamente por todo el sistema. Así es como se construye un buen sistema de diseño a mano, pero aquí toma minutos en lugar de horas.
Después de la generación, verifique los valores de color según las pautas de su marca. La IA elige valores razonables, pero su color de marca exacto probablemente sea diferente. Cambie los primitivos y toda la capa semántica se actualizará automáticamente.
5. Creamos un componente de botón complejo: 120+ variantes
La verdadera prueba de fuego del flujo de trabajo es un componente de botón con todo el rigor de un sistema de diseño profesional.
Prompt para crear el componente:
La generación toma bastante más tiempo y consume una parte considerable del límite de uso. El resultado es un conjunto completo de componentes con más de 120 variantes.
Lo que funciona de manera excelente:
- Estructura de auto-layout correcta: padding y gap adecuados, tomados de los tokens de dimensiones.
- Asignación precisa de colores: los botones primary usan colores primarios, danger usa rojos de error, todo desde tokens semánticos.
- Estilos de texto: aplicados correctamente en todos los tamaños.
- Propiedades del componente: configuradas para un cambio de variantes fluido.
- Convención de nomenclatura: respetada en su totalidad.
Lo que requerirá ajustes manuales:
- Iconos: a Claude le cuesta crear iconos reales. Se generan figuras de marcador de posición no siempre exactas. Es mejor especificar una forma concreta («use a star shape» o «use an arrow») o reemplazarlas manualmente por vectores.
- Estado de carga (Loading state): el posicionamiento del spinner puede desalinearse debido al posicionamiento absoluto (corrección manual rápida).
- Ligeras diferencias de padding: algunas variantes pueden tener valores de espaciado ligeramente diferentes (se soluciona en 2-3 minutos).
Para un componente cuya creación manual desde cero suele llevar de 2 a 3 horas, Claude completa aproximadamente el 85% del trabajo de forma correcta. El 15% restante es un pulido manual rápido.
6. Maquetamos una pantalla basada en el sistema de diseño
Prueba final: ¿Puede Claude construir una pantalla completa usando el sistema de diseño que acaba de crear? Condición clave: no generar todo desde cero, sino usar los componentes y variables existentes.
Prompt para crear la pantalla de inicio de sesión:
Lo que Claude construye como resultado:
Una pantalla de inicio de sesión lista para usar con una estructura sólida. El diseño general se mantiene: split-screen correcto, formulario bien organizado y tokens de diseño utilizados en toda la pantalla.
Lo que impresiona:
- Reutilización de componentes: Claude usa exactamente el componente de botón del sistema, en lugar de dibujar un nuevo rectángulo estilizado.
- Jerarquía tipográfica: heading styles, body text, caption — todo tomado del sistema de tokens.
- Espaciados consistentes: derivados estrictamente de los tokens de dimensiones.
- Composición general: profesional y lista para producción.
- Auto-layout: aplicado correctamente, lo que hace que el diseño sea totalmente responsivo.
Lo que requerirá refinamiento:
- Pulido visual de los botones de inicio de sesión social.
- El marcador de posición de ilustración en el panel izquierdo es básico (esperado).
- Ajustes menores de alineación en los espaciados del formulario.
El resultado no es un prototipo desechable, sino una base sólida para continuar el desarrollo.
7. Análisis honesto: dónde la IA tiene éxito y dónde no
Dónde Claude + Figma funciona excepcionalmente bien:
- Sistemas de variables y tokens: aquí es donde la IA destaca más. Toda la arquitectura de tokens se genera en minutos en lugar de horas.
- Andamiaje de componentes: generar el esqueleto de componentes complejos con más de 120 variantes ahorra una enorme cantidad de tiempo.
- Composición de pantallas: crear layouts estructurados basados en tokens y componentes existentes da resultados sumamente prácticos.
- Consistencia del sistema de diseño: Claude mantiene la coherencia de manera más estricta que la mayoría de los diseñadores humanos.
Dónde la IA todavía se queda corta:
- Matices visuales: la IA carece de gusto estético. Los resultados son estructuralmente correctos, pero carecen de esos toques sutiles que hacen que un diseño destaque.
- Iconos e ilustraciones: Claude tiene dificultades para generar iconos vectoriales de calidad. Siempre proporcione iconos de referencia o use plugins.
- Límites de uso: los componentes complejos consumen cuotas rápidamente. Planifique sus sesiones estratégicamente.
- Posicionamiento: el posicionamiento absoluto y el desbordamiento a veces requieren ajustes manuales.
Resumen: este flujo de trabajo no reemplaza el pensamiento de diseño. Pero reduce radicalmente la fase de ejecución. Claude asume el 70–85% del trabajo mecánico de construcción del sistema, liberando tiempo para lo que realmente importa: estrategia, flujos de usuario, edge cases y pulido visual.
8. Consejos sobre prompts: patrones que funcionan
Tras poner en práctica este flujo de trabajo, ciertos patrones demostraron ofrecer mejores resultados:
- Instruya explícitamente el uso de tokens: escriba siempre «use the variable tokens we created», de lo contrario Claude podría codificar valores fijos directamente.
- Defina convenciones de nombres: Claude sigue cualquier patrón de nomenclatura que especifique. Sea concreto para evitar nombres inconsistentes.
- Divida tareas complejas en pasos: no pida crear variables, componentes y pantallas en un solo prompt. Hágalo de manera secuencial.
- Haga referencia a elementos existentes: escriba «use our button component» en lugar de «create a button» para reutilizar lo que ya existe.
- Especifique dimensiones con precisión: «40px height with 12px vertical padding and 16px horizontal padding» funciona mucho mejor que «medium size».
- Verifique siempre el resultado: revise el panel de Variables y de Capas — la IA construye la estructura, pero el ojo humano aporta el criterio final.