Breakpoints de Figma a media queries de CSS: cómo funciona el mapeo

Respuesta rápida: Figma no tiene un concepto integrado de breakpoints como el de CSS. Los diseñadores simulan el comportamiento responsive con frames separados por tamaño de pantalla, o con el redimensionado fluido de Auto Layout (fill/hug) que no necesita ninguna media query. Qué enfoque usó el diseño determina si la salida CSS necesita reglas @media explícitas o no.

Figma en realidad no tiene breakpoints

Vale la pena decirlo con claridad, porque es una suposición habitual: Figma no tiene ninguna función nativa de "fijar un breakpoint aquí" comparable a una media query de CSS. Lo que los diseñadores hacen en realidad se divide en dos patrones, y se convierten a CSS de forma muy distinta.

Patrón 1: frames separados por tamaño de pantalla

El enfoque tradicional es un frame distinto para desktop, tablet y mobile — cada uno maquetado a mano en su propio ancho. Esto se mapea directamente a breakpoints CSS explícitos: el layout de cada frame se convierte en los estilos dentro de un bloque @media (min-width: ...) correspondiente, y el trabajo del desarrollador es decidir dónde deben situarse los valores reales del breakpoint (coincidiendo con los anchos de los frames, o con breakpoints estándar como 768px/1024px), ya que los anchos de frame de Figma son decisiones de diseño redondeadas, no una especificación CSS.

Este es el enfoque correcto cuando los layouts son estructuralmente distintos entre tamaños — no solo reflowed, sino genuinamente distintos (una barra lateral que se convierte en una navegación inferior, una grilla de 3 columnas que se convierte en una sola columna con contenido reordenado).

Patrón 2: redimensionado fluido con Auto Layout — a menudo sin necesidad de media query

El otro patrón se apoya en el comportamiento de redimensionado de Auto Layout — "fill container" y "hug contents" — configurado en un único frame en lugar de rediseñar todo el layout en cada ancho. Una fila de tarjetas configurada para envolver y llenar el espacio disponible, una barra lateral con un ancho fijo junto a un área de contenido principal en "fill", texto que se reajusta de forma natural dentro de un contenedor flexible — nada de esto necesita un breakpoint. Es el mismo comportamiento CSS que dan flex-wrap, los anchos en porcentaje y min-width/max-width sin una sola regla @media.

Vale la pena destacar esto porque es el aprendizaje más valioso al revisar CSS generado: no todo detalle responsive debería convertirse en una media query. Un diseño que se apoya en el redimensionado fluido de Auto Layout se convierte en CSS que ya es fluido en un rango de anchos por naturaleza — añadir breakpoints explícitos encima de eso suele ser trabajo innecesario que replica un comportamiento que el layout ya tiene.

Dónde suele fallar la traducción manual

• Añadir breakpoints donde el CSS fluido ya lo cubre, lo que produce más reglas @media de las que el diseño realmente necesita y una hoja de estilos más difícil de mantener de lo que el layout justifica.
• Pasar por alto un breakpoint real cuando un diseño sí tiene un frame de mobile estructuralmente distinto, e intentar forzar que el layout de desktop se reajuste en algo para lo que nunca fue diseñado.
• Elegir valores de breakpoint en píxeles arbitrarios que no coinciden ni con los anchos de frame propios del diseño ni con la escala de breakpoints existente del proyecto, creando un valor puntual que nadie más usa en su CSS.

Cómo lo gestiona MarkupGen

El comportamiento responsive se genera a partir de las restricciones de redimensionado reales del frame en lugar de añadirse como un paso manual aparte — los ajustes fill/hug de Auto Layout se traducen automáticamente en CSS fluido, la misma distinción cubierta arriba. Para diseños donde existe un layout de mobile genuinamente distinto (o que necesita generarse a partir de un único frame de desktop), MarkupGen puede producir un layout de mobile o desktop generado por IA por separado — consulta Diseño responsive en Figma: Mobile y Desktop explicados para ver cómo funciona. Para el mapeo de Auto Layout a Flexbox que subyace a todo esto, consulta Auto Layout to CSS.

Pruébalo con tu propio diseño

La forma más rápida de ver qué patrón necesita realmente tu propio diseño es pasarlo por el proceso y comprobar el CSS generado en busca de reglas @media — o su ausencia. Prueba MarkupGen gratis con tu propio archivo de Figma, o consulta la página del conversor de Figma a HTML para ver qué incluye.