Code Connect

Code Connect es la función de Figma que, al seleccionar una instancia en Dev Mode, muestra el snippet real del componente de código en vez del CSS genérico que Figma inventa. Un diseñador elige Style=Stroke, Size=lg en el panel de propiedades y el developer ve <Button variant="stroke" size="lg">.

Polen tiene ese mapeo escrito para todos los sets públicos de 🌻 FDS Components y para los sub-componentes privados que tienen equivalente en código (.Tab item, .Modal header, .Sidebar item…): 68 templates en la carpeta figma/ del repo, uno por set.

Cómo se traduce#

Cada template lee las propiedades de la instancia seleccionada y arma el snippet con estas reglas, iguales en los 68:

Y un Toast no genera JSX: genera la llamada toast({ title, color, action }) del hook useToast().

Verificación sin Figma#

Como no se puede publicar, los templates se prueban en el repo contra un snapshot real de los sets (figma/components.json, generado con la Plugin API):

npm run figma:check

El validador (scripts/check-figma-templates.ts) hace cuatro cosas por template: comprueba que cada propiedad que lee existe en el set con ese tipo y que cada getEnum mapea todas las opciones de la variante; exige que toda propiedad del set esté leída o declarada en un comentario // figma-ignore: con su motivo; lo ejecuta con cada combinación de variantes y booleanos (4.227 ejecuciones) y rechaza cualquier snippet con un valor sin resolver; y compila los 1.585 snippets distintos que salen contra registry/ds con TypeScript. Las tres primeras corren también en npm test.

Publicar cuando el plan lo permita#

Con un seat Dev o Full en un plan Organization, hay dos caminos:

1. Desde el MCP de Figma (Claude Code, Cursor): por cada template, add_code_connect_map con el nodeId, el source, el componentName y el contenido del archivo como template, con templateDataJson: {"isParserless": true, "nestable": <metadata.nestable>}.
2. Desde la CLI, con el figma.config.json que ya está en la raíz:

FIGMA_ACCESS_TOKEN=… npx figma connect publish

npx figma connect unpublish lo revierte. Los templates son parserless (.figma.ts con figma.code), el formato que Figma recomienda hoy.

Agregar o cambiar un template#

1. Copiá el template más parecido de figma/ y cambiá la cabecera: url con el node-id del set, source y component con el archivo y el export de registry/ds.
2. Leé cada propiedad del set con el método de su tipo (getString, getBoolean, getEnum, getInstanceSwap). Lo que no tenga equivalente va en // figma-ignore: con el motivo entre paréntesis.
3. Si el set cambió en Figma, regenerá el snapshot: el script scripts/figma-scan-components.js se pega en la consola de plugins de Figma y devuelve el JSON para figma/components.json.
4. npm run figma:check tiene que quedar en cero problemas.

Índice Figma ↔ código#