Figma Dev Mode es lo primero a lo que recurrir cuando un diseñador entrega trabajo. Está integrado, es oficial y habla el propio lenguaje de Figma. Entonces, ¿por qué recurrirías a otra cosa?
La respuesta no es que Dev Mode sea malo. Es que resuelve un problema diferente. Entender cuál es ese problema — y cuál no es — es todo el artículo. Si quieres saltar directamente a la respuesta, prueba figmascope aquí.
Qué es Figma Dev Mode
Dev Mode es la capa de handoff de pago de Figma, disponible en los planes Professional y Organization. Cuando cambias a él (el botón </> en la barra de herramientas superior), obtienes un panel que te muestra fragmentos CSS o iOS/Android para las capas seleccionadas, anotaciones de componentes, valores de variables y un marcador de estado "listo para dev" que los diseñadores pueden establecer.
Está diseñado para el momento en que un diseñador dice "esto está hecho, ve a construirlo." El desarrollador abre Figma, hace clic, copia fragmentos, mira el espaciado. No hay paso de exportación. Sin archivo. Solo lees el diseño en el lugar.
Figma también incluye un servidor MCP oficial para Dev Mode (separado — cubierto en la comparación con MCP), pero Dev Mode como UI es principalmente una experiencia de lectura humana. Apuntas, haces clic, inspeccionas, copias.
Los fragmentos de código que Dev Mode genera son genuinamente útiles como referencias rápidas. Puedes ver la pila de fuentes, tokens de espaciado exactos si las variables están configuradas, radios de borde. Para un desarrollador sénior que solo necesita una comprobación de cordura sobre un valor específico, es rápido.
Qué es figmascope
figmascope es una herramienta del lado del navegador — sin backend, sin instalación, se ejecuta en una pestaña — que exporta un bundle de contexto estructurado desde cualquier archivo Figma. Pegas una URL de Figma y un Token de Acceso Personal (mantenido en memoria, nunca enviado a un servidor), y produce un .zip que contiene:
CONTEXT.md— una especificación legible por humanos y máquinas del diseñotokens.json— design tokens tipados (procedentes de las variables de Figma cuando están presentes, inferidos de la frecuencia de lo contrario)screens/*.json— representación intermedia por pantalla: nodos stack, overlay, absolute y leaf con relaciones espaciales intactasscreens/*.png— capturas de pantalla de referencia 2×components/inventory.json— índice de componentes con IDs de instanciastrings.json— todo el contenido de texto, con clave para i18n (stringRef.key)_meta.json— metadatos de exportación, información del archivo, fuente del token
El bundle son archivos planos. Sin runtime. Sin SDK. Déjalo en un repositorio, haz commit, haz diff, entrégalo a cualquier agente de IA que lea archivos.
La diferencia clave con Dev Mode: esta no es una experiencia de lectura dentro de Figma. Es una exportación que sale de Figma completamente.
Dónde gana Dev Mode
Inspección en vivo. Si quieres hacer clic en una capa específica y obtener su valor calculado exacto ahora mismo, Dev Mode es instantáneo. Sin paso de exportación, sin zip, sin cambio de contexto. La respuesta está en el panel.
Integración oficial. Figma lo construye, lo mantiene e incluye mejoras junto con el resto del producto. Soporte de variables, flujos de trabajo de anotación, estado listo-para-dev — estas son características nativas con respaldo de primera parte. Cuando Figma añade una nueva capacidad de sistema de diseño, Dev Mode la obtiene.
Distribución en equipo. Cada diseñador y desarrollador en un plan de organización de Figma ya lo tiene. Sin herramientas adicionales que instalar, explicar o mantener.
Herramientas en tiempo de diseño. Los diseñadores pueden marcar frames como listos, dejar anotaciones a nivel de código y colaborar con los desarrolladores dentro del mismo canvas. Este ida y vuelta es genuinamente bueno para los ciclos de QA donde necesitas comentarios y actualizaciones de estado.
Dónde gana figmascope
Salida basada en archivos, agnóstica del agente. La salida de Dev Mode vive dentro de Figma. La salida de figmascope vive en un zip que controlas. Déjalo junto a tu código, apunta Claude Code o Cursor a él, y el agente tiene la especificación completa — todas las pantallas, todos los tokens, todas las cadenas — sin necesidad de conectarse a Figma en absoluto.
Control de versiones. Un bundle de figmascope tiene diff. Haz commit. Ponlo en un PR. Ve exactamente qué tokens cambiaron entre el diseño de la semana pasada y el de hoy. Dev Mode no tiene concepto de historial de versiones de la especificación en sí — Figma tiene historial de versiones de archivo, pero eso es para la fuente, no una instantánea exportable de la intención del diseño.
Sin requisito de nivel de pago. figmascope tiene licencia MIT y es gratuito. Usa la API REST pública de Figma, que solo requiere un PAT (gratuito en cualquier cuenta de Figma). Dev Mode requiere un plan Professional u Organization. Para desarrolladores en solitario o equipos pequeños trabajando con un diseñador en un plan gratuito, figmascope es la única opción.
Salida determinista. Cada exportación del mismo archivo Figma en la misma versión produce el mismo bundle. Mismo JSON, mismos tokens, mismas cadenas. Esto importa para la reproducibilidad — puedes ejecutarlo en CI, fijar un bundle a una versión, hacer pruebas de regresión contra él.
Portátil y sin conexión. Una vez que tienes el bundle, funciona sin conexión a Figma ni a ningún servidor. El contexto del agente es autónomo. Útil cuando estás en un avión, detrás de un firewall o simplemente no quieres depender del tiempo de actividad de Figma durante un sprint de construcción.
El IR preserva la semántica espacial. La representación intermedia screens/*.json captura el tipo de layout (stack, overlay, absolute), la identidad de componentes (componentId en nodos INSTANCE) y referencias de cadenas de texto — no solo CSS calculado. Un agente puede razonar sobre la estructura del layout, no solo copiar fragmentos.
Comparación
| Dimensión | Figma Dev Mode | figmascope |
|---|---|---|
| Precio | De pago (plan Professional / Org) | Gratuito, código abierto MIT |
| Formato de salida | Panel dentro de Figma, fragmentos CSS/iOS/Android | .zip: CONTEXT.md, tokens.json, screens/*.json, *.png |
| Modelo de integración | Dentro de la UI de Figma, inspección por capa | Exportación del navegador, luego archivos planos en cualquier lugar |
| Compatible con agentes | Vía servidor MCP (función separada) | Cualquier agente que lea archivos (Claude Code, Cursor, Aider, Copilot…) |
| Compatible con control de versiones | No (la salida vive en Figma) | Sí — el bundle tiene diff, se puede hacer commit |
| Salida determinista | No (por clic, vinculado a la sesión) | Sí — misma versión del archivo → mismo bundle |
| Sin conexión / portátil | No — requiere conexión a Figma | Sí — el bundle funciona sin ninguna conexión |
| Anotación en tiempo de diseño | Sí — listo-para-dev, comentarios | No |
| IR espacial / de layout | No — CSS plano para la capa seleccionada | Sí — stack/overlay/absolute/leaf con identidad de componente |
| Fuente de tokens | De las variables de Figma cuando están configuradas | Variables de Figma → inferido de frecuencia → ninguno |
| Claves de cadenas i18n | No | Sí — stringRef.key en IR + strings.json |
| Requiere instalación de plugin | No (integrado en Figma) | No (pestaña del navegador, API REST) |
Cuándo usar cada uno
Usa Dev Mode cuando: necesitas verificar un valor específico, estás en medio de una revisión de diseño y quieres buscar un token, tu equipo ya está en un plan de Figma de pago y vive dentro de Figma, o quieres el flujo de trabajo de anotaciones del diseñador y los marcadores de estado listo-para-dev.
Usa figmascope cuando: estás entregando contexto a un agente de IA para un sprint de construcción, quieres versionar la especificación de diseño junto con el código, estás en un plan gratuito de Figma, necesitas el IR de layout completo (no solo CSS por capa), o quieres una salida determinista y reproducible que puedas fijar a una versión o hacer diff en un PR.
No son mutuamente excluyentes. Usa Dev Mode para inspeccionar mientras construyes, exporta bundles de figmascope para anclar la especificación de diseño en tu repositorio. Los dos no compiten — cubren diferentes partes del flujo de trabajo.