Figma Dev Mode: del diseño al código con menos fricciones
Actualizado: 2026-05-03
Figma Dev Mode llegó a disponibilidad general en 2023 y durante 2024 maduró hasta convertirse en la vista por defecto cuando un developer abre un archivo de Figma. La idea detrás del producto es sencilla pero potente: separar la experiencia de quien diseña de la de quien implementa. En lugar de obligar al developer a navegar paneles pensados para ilustradores, Dev Mode ofrece una lectura distinta del mismo archivo: medidas exactas, CSS generado, variables mapeadas a tokens y un puente directo al código. La tesis del producto es que la fricción histórica entre diseño y desarrollo no es cultural —es de herramienta.
Puntos clave
- Dev Mode añade una vista del archivo dedicada a developers con CSS generado, medidas y variables mapeadas a tokens.
- Los estados de componente (Ready for dev / In progress / Done) son consultables por API e integrables con Jira o Linear.
- Code Connect enlaza componentes de Figma con fragmentos reales del codebase, eliminando el código autogenerado genérico.
- La extensión de VS Code permite consultar el diseño sin cambiar de aplicación.
- El límite real de Dev Mode es la calidad del diseño subyacente: sin un sistema de componentes y tokens bien definidos, la salida es genérica.
Qué cambia respecto al modo editor
Al entrar en Dev Mode, la barra lateral izquierda pasa a mostrar una lista jerárquica de componentes marcados como listos para implementar. La derecha se reorganiza en tres secciones: inspección (dimensiones, color, tipografía), exportación (assets en SVG, PNG, PDF con distintas densidades) y, si el equipo ha configurado Code Connect, un panel con el snippet real del componente en el framework de destino.
Las anotaciones del diseñador aparecen como notas sobre el lienzo, separadas del historial de comentarios. El ciclo de estados es otro detalle que parece menor y acaba pesando: un componente puede estar en “Ready for dev”, “In progress” o “Done”. Esos estados son consultables por API y varios equipos los enganchan a Jira o Linear para que las tarjetas reflejen el estado real del diseño sin pedirle a nadie que mantenga dos tableros.
Inspección y copia de estilos
Seleccionar un elemento muestra sus propiedades computadas. El código se copia con un clic, y Figma detecta automáticamente si has definido variables en el archivo para entregar referencias var(--color-primary) en lugar de hexadecimales crudos. Para proyectos que usan Tailwind o styled-components, existen plugins que reescriben esa salida al dialecto correspondiente, con resultados razonables siempre que el diseño respete la escala del sistema.
La exportación de assets también mejora en Dev Mode: puedes seleccionar múltiples elementos, elegir el formato y la densidad, y descargar todo de una vez sin entrar en el modo editor. Para iconos e ilustraciones SVG que se usan como estáticos en el proyecto, esto elimina varios pasos manuales del flujo habitual.
Esto conecta directamente con lo que Figma para prototipado colaborativo describe en su capa de design system: la misma infraestructura de componentes que facilita el prototipado es la que Dev Mode convierte en código consultable.
Code Connect: el puente al codebase real
Code Connect es la función más interesante de Dev Mode para equipos con un design system maduro. La idea: en lugar de mostrar CSS autogenerado genérico cuando el developer selecciona un componente, Figma muestra el fragmento real del codebase —el import de React, el componente de Vue, el tag de Svelte— con las props correctas según las variantes seleccionadas en el archivo.
La configuración requiere un fichero de mapeo que el equipo de diseño o desarrollo mantiene:
// Button.figma.ts
import figma from "@figma/code-connect"
import { Button } from "./Button"
figma.connect(Button, "https://www.figma.com/file/...", {
props: {
variant: figma.enum("Variant", {
primary: "primary",
secondary: "secondary",
destructive: "destructive",
}),
size: figma.enum("Size", {
small: "sm",
medium: "md",
large: "lg",
}),
disabled: figma.boolean("Disabled"),
label: figma.string("Label"),
},
example: ({ variant, size, disabled, label }) => (
<Button variant={variant} size={size} disabled={disabled}>
{label}
</Button>
),
})Una vez configurado, cuando el developer selecciona el componente Button en Figma, ve directamente el JSX con las props correctas. No interpreta CSS genérico —consume el componente real. Es el paso más cercano que ha dado el mercado al verdadero design-to-code sin reescritura.
La extensión de VS Code
Figma publica una extensión oficial para VS Code que trae Dev Mode directamente al editor. La ventaja práctica es que el developer puede inspeccionar medidas, copiar CSS y ver los snippets de Code Connect sin abandonar la sesión de código. Para flujos donde el contexto de cambio es frecuente, el ahorro de cambio de aplicación es real.
La extensión también muestra los comentarios y anotaciones del diseñador relacionados con el componente seleccionado, lo que acerca las revisiones de diseño al entorno donde se implementan. Junto con herramientas como GitHub Copilot Workspace, completa un flujo donde el developer tiene contexto de diseño, código y tarea sin salir del editor.
Dónde sigue haciendo falta criterio humano
Dev Mode no elimina la brecha entre diseño y desarrollo —la reduce en los casos donde el diseño está bien estructurado. Los puntos donde el criterio humano sigue siendo necesario:
- Accesibilidad: Figma no sabe si el contraste de texto cumple WCAG 2.1 AA, ni si el componente tiene los atributos ARIA correctos. El CSS generado puede ser visualmente correcto y semánticamente incorrecto.
- Rendimiento: un diseñador puede crear sombras con cinco capas superpuestas que se ven bien en Figma y destruyen el rendimiento de scroll en móvil. Dev Mode no advierte sobre eso.
- Comportamiento responsivo: los valores que Dev Mode muestra son los de la artboard seleccionada. La lógica responsive entre breakpoints es una decisión de implementación, no de inspección.
- Animaciones complejas: Dev Mode puede mostrar los estados inicial y final de una transición, pero la lógica de interpolación, easing y timing siempre requiere interpretación.
- Diseño no sistematizado: si el archivo no usa componentes y variables, Dev Mode devuelve CSS con valores hardcoded sin semántica. El sistema de tokens es un prerequisito, no una opción.
Consideraciones prácticas
Cuatro puntos para equipos que están evaluando adoptar Dev Mode en su flujo:
- Preparar el design system primero: sin variables de color, tipografía y espaciado bien definidas, Dev Mode no puede generar referencias semánticas. La inversión en el sistema paga antes de la adopción de Dev Mode.
- Establecer el ciclo de estados: acordar quién marca qué componente como “Ready for dev” y cuándo. Sin ese acuerdo, los estados son ruido.
- Code Connect requiere mantenimiento: el fichero de mapeo debe actualizarse cuando cambian los componentes del codebase. En proyectos grandes, esto necesita propietario.
- Evaluar el tier de licencia: Dev Mode es gratuito para viewers y tiene funcionalidad reducida en el plan gratuito; Code Connect requiere planes de pago.
Conclusión
Figma Dev Mode reduce la fricción del handoff de diseño a código de forma medible, especialmente para equipos con un design system bien mantenido. Code Connect es la función con mayor potencial a largo plazo: cuando el developer ve el componente real del codebase en lugar de CSS autogenerado, el gap de interpretación desaparece. El límite real no es la herramienta —es la calidad del diseño subyacente: Dev Mode amplifica tanto los diseños bien estructurados como los mal sistematizados.
