La IA de Cursor puede escribir mucho código de interfaz. Lo que no puede hacer es leer tu archivo de Figma. Pegas una captura de pantalla y adivina: espaciado incorrecto, valores de color equivocados, nombres de componentes inventados. El problema no es el modelo. Es el contexto estructurado que falta.

figmascope cierra esa brecha. Exporta un archivo de Figma como un bundle en zip — design tokens, árboles de layout por pantalla, renders de referencia, inventario de componentes, cadenas de texto — todo lo que un modelo de lenguaje necesita para generar código preciso en lugar de código que solo parece correcto. La app principal se ejecuta completamente en tu navegador, sin backend ni subida de archivos.

Esta página recorre el flujo completo desde la URL de Figma hasta la generación de código en Cursor. Si usas Claude Code en lugar de Cursor, consulta Figma a Claude Code para el flujo específico de Claude. Para una visión más amplia de lo que hace que un handoff sea apto para agentes, lee AI Design Handoff.

Qué contiene el bundle de contexto

Cuando ejecutas figmascope sobre un archivo de Figma, obtienes un .zip con:

Nada se sube. Tu Personal Access Token vive solo en la memoria del navegador y se envía únicamente a api.figma.com. El zip se ensambla en el cliente y se entrega a la descarga de tu navegador.

Paso 1 — Obtén un Personal Access Token de Figma

Ve a Figma → Account Settings → Personal Access Tokens y crea un token con alcance File content: read-only. Ese es el mínimo requerido.

El token nunca sale de tu sesión de navegador; figmascope lo envía en la cabecera X-Figma-Token en las peticiones a api.figma.com y en ningún otro lugar. Consulta seguridad del PAT y figmascope para el modelo de amenazas completo.

Paso 2 — Exporta el bundle de contexto

  1. Abre figmascope.dev en tu navegador.
  2. Pega la URL del archivo de Figma (p. ej. https://www.figma.com/file/ABC123/MyDesign).
  3. Pega tu Personal Access Token.
  4. Haz clic en Export Context Bundle.
  5. Se descarga un archivo figmascope-<fileKey>.zip en tu máquina.

Descomprímelo en tu proyecto. Un lugar razonable es una carpeta design/ en la raíz del repositorio:

unzip figmascope-ABC123.zip -d design/
# → design/CONTEXT.md
# → design/tokens.json
# → design/screens/Home.json
# → design/screens/Home.png
# → design/components/inventory.json
# → design/strings.json
# → design/_meta.json

Paso 3 — Abre el proyecto en Cursor

Abre la carpeta de tu proyecto en Cursor de la manera habitual. El directorio design/ ahora forma parte del workspace y el indexador de Cursor lo incluirá.

Antes de hacer tu prompt al modelo, lee design/CONTEXT.md tú mismo una vez. Te indica qué frames se exportaron, cuál es el esquema de nombres de tokens y lista cualquier advertencia emitida durante la exportación (p. ej. layout-mode-none-inferred para frames sin auto-layout en Figma). Esas advertencias son las mismas que encontrará tu agente.

Paso 4 — Escribe un prompt efectivo para Cursor

El punto de partida más simple es un prompt de referencia que puedes pegar en Cursor Chat:

Read design/CONTEXT.md first, then implement the Home screen.

Use:
- design/tokens.json for all color, spacing, and typography values
- design/screens/Home.json for the layout tree
- design/screens/Home.png as the visual reference
- design/strings.json for all copy (use the resource keys as i18n identifiers)
- design/components/inventory.json to match component names

Target: React + Tailwind CSS. Map token values to Tailwind config entries rather
than hardcoding hex values. Use the component names from inventory.json as
component file names (PascalCase).

El Composer de Cursor seguirá las restricciones de CONTEXT.md, consultará el árbol de layout en Home.json, obtendrá el espaciado de tokens.json y producirá código que se ajusta a tu design system en lugar de aproximarlo.

El modelo no conoce tu diseño. Conoce lo que le das. El JSON estructurado supera a una captura de pantalla siempre.

Paso 5 — Mapea tokens a la configuración de tu framework

El tokens.json exportado usa una estructura anidada al estilo W3C:

{
  "color": {
    "surface": { "$value": "#f6f2ea", "$type": "color" },
    "accent":  { "$value": "#d96a3a", "$type": "color" }
  },
  "spacing": {
    "4":  { "$value": "16px", "$type": "dimension" },
    "8":  { "$value": "32px", "$type": "dimension" }
  },
  "radius": {
    "sm": { "$value": "4px",  "$type": "dimension" },
    "md": { "$value": "8px",  "$type": "dimension" }
  },
  "typography": {
    "body": {
      "fontFamily": { "$value": "Inter",  "$type": "fontFamily" },
      "fontSize":   { "$value": "14px",   "$type": "dimension" },
      "fontWeight": { "$value": 400,       "$type": "number" }
    }
  }
}

Para Tailwind, pídele a Cursor que genere un bloque theme.extend de tailwind.config.js directamente desde tokens.json. Consulta Exportación de Design Tokens para Agentes de IA para un análisis profundo del formato de tokens y la inferencia por frecuencia. La estructura de tokens es lo bastante plana para recorrerla con un script de Node si quieres automatizarla:

// scripts/tokens-to-tailwind.js
const tokens = require('../design/tokens.json');

const colors = Object.fromEntries(
  Object.entries(tokens.color).map(([k, v]) => [k, v.$value])
);
const spacing = Object.fromEntries(
  Object.entries(tokens.spacing).map(([k, v]) => [k, v.$value])
);

module.exports = { colors, spacing };

Paso 6 — Proyectos con múltiples pantallas

Cada frame de tu archivo de Figma se convierte en un screens/<FrameName>.json y un .png correspondiente. Para un proyecto con una docena de pantallas, trabaja de forma incremental. Cursor Composer maneja bien una pantalla por sesión; dale el JSON y el PNG de la pantalla como referencias explícitas con @file:

@design/screens/Settings.json
@design/screens/Settings.png

Implement the Settings screen. Follow the same component structure
as the Home screen already implemented. Use tokens from design/tokens.json.

El inventario de componentes (design/components/inventory.json) te ayuda a evitar la deriva de nombres entre pantallas — cada componente referenciado en un JSON de pantalla tiene un id y name canónicos en el inventario. Si estás generando una librería de componentes compartida, usa esos nombres como fuente de verdad.

Cómo luce el IR en la práctica

El JSON por pantalla usa una estructura de nodos recursiva. Un ejemplo simplificado para un componente de tarjeta:

{
  "kind": "stack",
  "name": "ProductCard",
  "direction": "vertical",
  "gap": { "$ref": "spacing.4" },
  "padding": { "top": 16, "right": 16, "bottom": 16, "left": 16 },
  "background": { "$ref": "color.surface" },
  "radius": { "$ref": "radius.md" },
  "children": [
    {
      "kind": "leaf",
      "name": "ProductImage",
      "type": "image",
      "width": 320,
      "height": 200
    },
    {
      "kind": "leaf",
      "name": "ProductTitle",
      "type": "text",
      "text": { "$ref": "strings.product.card.title" },
      "style": { "$ref": "typography.heading.sm" }
    }
  ]
}

Las referencias a tokens usan cadenas $ref que coinciden con las claves de tokens.json. El modelo puede resolverlas sin un paso de búsqueda separado. Consulta el IR por pantalla explicado para el esquema completo de nodos.

Mantener el contexto actualizado

Los archivos de diseño cambian. Un buen hábito: vuelve a ejecutar figmascope cada vez que el diseño tenga una revisión significativa, haz commit de la carpeta design/ actualizada y anota la versión en la descripción de tu PR. El _meta.json incluye un timestamp y el campo lastModified del archivo de Figma, para que puedas comparar cuándo se regeneró el bundle por última vez versus cuándo se tocó el archivo por última vez.

// _meta.json
{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 12,
  "warnings": []
}

Si warnings no está vacío, resuélvelo antes de pasarle el contexto al agente. Advertencias comunes: strings-collision (dos nodos con el mismo slug que resuelven a la misma clave) y layout-mode-none-inferred (un contenedor sin auto-layout explícito, donde figmascope infirió el layout a partir de posiciones de hijos).

Flujos habituales en Cursor

Actualizaciones basadas en diferencias

Cuando el diseño tiene una revisión menor — por ejemplo, un valor de espaciado cambió de spacing.4 a spacing.6 en el componente de tarjeta — puedes pedirle a Cursor que aplique solo el delta en lugar de regenerar toda la pantalla:

The design/tokens.json was updated. spacing.4 is now 24px instead of 16px.
Find all components using spacing.4 and update them. Do not touch anything else.

Esto funciona porque tus componentes generados referencian nombres de tokens como clases de Tailwind (gap-spacing-4) en lugar de valores en píxeles directos. Un cambio de token es un buscar-y-reemplazar, no un rediseño.

Agregar una nueva pantalla a una base de código existente

Cuando añades la pantalla N a una base de código que ya tiene las pantallas 1 a N-1 implementadas, el añadido clave al prompt es anclar al agente en la librería de componentes existente:

@design/screens/Checkout.json
@design/screens/Checkout.png

Implement the Checkout screen. Reuse existing components from src/components/
wherever the component name matches design/components/inventory.json.
Only create new component files for components not already implemented.
Use design/tokens.json for all token values.

El inventario de componentes es el puente entre el nombre del componente en el diseño y el nombre del archivo en la base de código. Sin él, el agente inventará rutas de importación y creará componentes duplicados.

Generar una línea base del design system

Antes de implementar cualquier pantalla, usa el bundle de contexto para generar una línea base del design system: la configuración de tokens, un componente de paleta de colores y los estilos tipográficos base. Esto ancla todas las implementaciones de pantallas posteriores en la misma base:

Read design/tokens.json and design/CONTEXT.md.

Generate:
1. tailwind.config.ts theme.extend block from all tokens
2. src/styles/tokens.css with CSS custom properties for the same tokens
3. src/components/foundations/ColorPalette.tsx showing all color tokens
4. src/styles/typography.css with the typography token classes

Name all classes and variables using the token key paths
(e.g. --color-accent, text-ink, bg-surface).

Una vez que existe esta línea base, cada implementación de pantalla puede referenciarla. El agente no re-derivará colores del diseño en cada sesión — usará las clases ya generadas.

Limitaciones que conviene conocer de antemano

El bundle de contexto de figmascope captura estructura estática. Hay algunas cosas que no puede representar:

El archivo CONTEXT.md indica qué frames se excluyeron y por qué, para que el agente no intente implementar algo que estaba intencionalmente fuera del alcance.