Code Connect: conectar componentes de Figma con tu código

Code Connect vincula los componentes de Figma con los de tu repo para que Dev Mode y los agentes usen tu código real. Requisitos, CLI, plantillas y límites.

info Definición Rápida

Code Connect es la herramienta de Figma que vincula un componente de tu código con su componente equivalente en Figma. Una vez publicado, Dev Mode muestra el código de tu sistema en lugar de ejemplos autogenerados, y el servidor MCP de Figma le da al agente la misma referencia.

¿Qué es Code Connect y qué resuelve?

Cuando un diseñador abre un componente en Dev Mode, Figma muestra un fragmento de código. Sin Code Connect, ese fragmento es genérico y rara vez coincide con tu librería real. Con Code Connect, muestra el componente de tu repositorio, con sus props y sus nombres.

El mismo vínculo sirve al agente. Según la documentación de Figma, get_design_context genera código que reutiliza tus componentes cuando están conectados. La guía para estructurar archivos lo presenta como la forma más eficaz de que el agente reutilice tus componentes reales; sin él, tiene que adivinar cuál corresponde. Cómo lee el agente el diseño está en De Figma a código con MCP; aquí nos quedamos en el vínculo en sí. Conecta con el problema de reutilizar en vez de inventar y con tener un design system que la IA pueda leer.

¿Qué necesitas para usarlo?

Según la documentación oficial:

Plan y asiento. Un asiento Dev o Full en un plan Professional, Organization o Enterprise.
Límites en Professional. Una biblioteca activa y un framework activo. El primer publish fija el framework del equipo; un administrador puede cambiarlo en Admin, Settings, Resources, Code Connect. Las conexiones del framework anterior se conservan con la etiqueta Deactivated, pero el servidor MCP no las devuelve. Organization y Enterprise pueden tener varios frameworks activos.
Para la CLI. Node.js 18 o superior y un token de acceso personal con el permiso de Code Connect en Write y el de File content en Read.

¿Cómo se configura: CLI o Code Connect UI?

	CLI	Code Connect UI
Dónde corre	En tu repositorio, desde la terminal	Dentro de Figma, sin instalar nada
Mapeo de propiedades y ejemplos dinámicos	Sí	Todavía no, según la documentación
Alcance	Varios frameworks en Organization y Enterprise	Limitada a una biblioteca de código
Pensada para	Equipos de ingeniería que quieren precisión y control	Colaboración entre diseño e ingeniería

La CLI se instala como paquete global de npm (@figma/code-connect) y se publica con npx figma connect publish, con el token en la variable FIGMA_ACCESS_TOKEN o con --token. Los archivos de plantilla se llaman como el componente (Button.figma.ts) y viven junto a él; un figma.config.json en la raíz define la etiqueta y el lenguaje del fragmento.

La UI se abre en un archivo de biblioteca: en Dev Mode eliges Library y luego Connect components to code, y asocias cada componente publicado con una ruta de código. Conectar GitHub es opcional (autocompleta rutas), exige ser dueño del archivo (o administrador en Organization y Enterprise) y no admite GitHub Enterprise Server. La UI permite conexiones uno a muchos: un componente de diseño puede apuntar a implementaciones en React, SwiftUI o Compose. Las conexiones creadas con la CLI aparecen en la UI, pero solo se editan desde la CLI.

¿Qué formatos y frameworks soporta?

Las plantillas (.figma.ts o .figma.js) son hoy el único camino que Figma mantiene activamente. Son independientes del framework y usan ayudantes como getEnum, getBoolean y getString. Los analizadores específicos por framework (React y React Native, HTML con Web Components, Angular y Vue, SwiftUI y Jetpack Compose) son heredados: desde el 17 de agosto de 2026 Figma dejó de actualizarlos, aunque siguen disponibles en versiones anteriores de la CLI. Para convertir archivos antiguos existe npx figma connect migrate.

Si heredas un repositorio con llamadas figma.connect() en React, no se rompe de inmediato, pero conviene planear la migración.

¿Cómo lo usa un agente?

Con el servidor MCP, el agente dispone de herramientas como get_code_connect_map (lee las conexiones de las instancias seleccionadas) y add_code_connect_map (conecta un componente de Figma con uno de código). En el servidor de escritorio usa la conexión que elegiste en Dev Mode; en el remoto, hay que pedirle que use tu etiqueta de Code Connect, por ejemplo React o SwiftUI, en el parámetro clientFrameworks.

¿Cuándo NO conviene Code Connect?

Cuando tu sistema de componentes todavía cambia cada semana. Mantener mapeos es trabajo continuo.
Cuando el código no tiene componentes. Si todo son div con estilos sueltos, no hay nada que conectar.
Cuando el equipo no tiene un sistema de diseño con nombres compartidos. Los mapeos fallan en silencio cuando los nombres no coinciden.
Cuando el proyecto es un prototipo desechable.

Ejemplo

Ejemplo ilustrativo: un equipo tiene un Button en React con las props variant y size. En Figma, el componente tiene las propiedades Tipo: Primario | Secundario y Tamaño: Chico | Grande. Una persona de ingeniería escribe la plantilla que traduce Tipo a variant y Tamaño a size; los valores de un enum deben usar los nombres exactos de las opciones de Figma. Al publicar, Dev Mode muestra <Button variant="primary" size="lg" />.

Después se pide a un agente que construya una pantalla. El agente consulta el mapeo, ve que existe Button y lo usa con esas props, en vez de crear un botón nuevo.

El papel del diseñador está en dos puntos: nombrar las propiedades de Figma con criterio y revisar en Dev Mode que el fragmento publicado tenga sentido.

Errores comunes

Mapear componentes que no existen todavía en el código. El mapeo debe apuntar a algo real.
Esperar que Code Connect ejecute tu lógica. Los archivos no se ejecutan: los fragmentos son texto, y un operador ternario aparece tal cual en el resultado.
Nombrar las propiedades de Figma distinto de las props de código sin traducción. El fragmento queda confuso.
Olvidar republicar tras cambiar un componente. El mapeo se queda con la versión anterior.
Empezar con la UI y esperar mapeo de propiedades: hoy eso solo lo da la CLI.
Usar Code Connect como sustituto de la documentación de uso. Dice cómo se llama el componente, no cuándo usarlo.

Fuentes

Preguntas frecuentes

¿Qué es Code Connect de Figma?

Es una herramienta que vincula componentes de tu código con componentes de tus archivos de Figma. Dev Mode muestra entonces fragmentos de código de producción en lugar de ejemplos autogenerados, y el servidor MCP de Figma da al agente esa misma referencia.

¿Code Connect genera código por sí solo?

No. Code Connect no escribe componentes: conecta los que ya existen en tu repo con sus equivalentes de Figma y, con la CLI, define cómo se traducen las propiedades de diseño a props de código.

¿Qué plan de Figma y qué asiento necesita Code Connect?

Según la documentación oficial, un asiento Dev o Full en un plan Professional, Organization o Enterprise. En Professional solo puede haber una biblioteca y un framework activos a la vez; Organization y Enterprise admiten varios frameworks.

¿Qué diferencia hay entre Code Connect UI y la CLI?

La CLI corre en tu repositorio y admite mapeo de propiedades y ejemplos dinámicos. La UI funciona dentro de Figma sin instalar nada, pero según la documentación aún no soporta mapeo de propiedades ni ejemplos dinámicos y se limita a una biblioteca de código.

¿Qué pasa si no uso Code Connect con un agente?

El agente tiene que adivinar qué componente de tu código corresponde a cada pieza del diseño. Puede crear un componente nuevo en lugar de usar el que ya tienes.