Cómo preparar un archivo de Figma que se construya rápido en Framer

Prepara tu archivo de Figma así. Haz el frame de escritorio de 1200 de ancho. Pon auto layout en cada contenedor, incluido el frame exterior. Decide fill o fixed para cada elemento mientras sigues en Figma. Haz eso y una landing page pasa a Framer en una tarde. Sáltatelo y rehaces media página a mano, que es la diferencia entre un día de trabajo y tres.

Diseña a los anchos que Framer usa de verdad

El lienzo de Framer viene con tres breakpoints, y sus páginas de producto muestran las pestañas Desktop 1200 y Tablet 810. El código publicado en framer.com coincide. Las imágenes responsive se sirven con reglas para min-width 1200px, para 810px hasta 1199.98px y para max-width 809.98px. Así que monta un frame de escritorio de 1200 de ancho. Añade uno de tablet de 810 si el layout cambia de verdad ahí. Añade uno de móvil de unos 390. Diseña a 1440 y cruza los dedos, y acabarás con un hero que solo se ve bien en tu propio monitor.

Auto layout en todo, incluido el frame exterior

La lección de la academia de Framer dice que el auto layout, la jerarquía y las propiedades de fill se trasladan al importar. Ahí está todo el truco. Una sección construida con auto layout llega a Framer como un stack que ya sabe redimensionarse. Una sección hecha arrastrando cajas a su sitio llega como capas sueltas que tienes que rehacer. Envuelve cada sección en un auto layout vertical. Envuelve cada fila en uno horizontal. Usa gaps en lugar de separar cosas con espacio vacío. Cualquier capa que quede fuera de un frame con auto layout es una capa que vas a construir dos veces.

Decide fill o fixed antes de entregar

En Figma, pon el contenedor de la sección en fill container. Dale al contenedor de contenido interior un max width fijo, tipo 1200 o 1140. Pon las cards de una fila en fill, para que se repartan el ancho por igual. Esto se traduce directo a Framer, donde pones Width en 100% o 1fr y el Max Width en el contenedor de contenido. El artículo de solución de problemas de Framer dice que un ancho fijo o un Max Width demasiado grande es el motivo más habitual de que una página no llene la pantalla en el breakpoint Phone. Cada número fijo que dejas suelto en Figma es un bug que estás pasando hacia delante.

Ponles nombre a tus estilos de texto y reutilízalos

Nombra tu tipografía y reutilízala: H1, H2, H3, body large, body, caption, eyebrow. En Framer los reconstruyes una vez en el panel Assets, dentro de Styles, y los aplicas desde el panel derecho en Text y Styles. Cada estilo de texto de Framer puede llevar sus propios tamaños por breakpoint para Desktop, Tablet y Mobile, con tamaño de fuente, interlineado, espaciado entre letras y espaciado de párrafo. Si tu archivo de Figma tiene catorce tamaños de titular ligeramente distintos, vas a construir catorce estilos de texto o vas a vivir con una tipografía que se lee mal en el móvil.

Comprueba la licencia de la fuente en la fase de moodboard

Framer trae Google Fonts y Fontshare, y te deja subir archivos propios desde la pestaña Custom del selector de fuentes. Framer también te dice que te asegures de tener la licencia correcta antes de subir una fuente a una web. Una licencia de escritorio cubre un mockup de Figma. No cubre una página publicada. Resuelve esto mientras eliges la tipografía, y no la noche antes del lanzamiento, porque cambiar la fuente cambia todos los saltos de línea de la página.

Exporta las imágenes al tamaño al que se ven

Framer comprime las imágenes en el edge a WebP y AVIF y las redimensiona para cada dispositivo, tal y como documenta su página de rendimiento. Eso resuelve la entrega. No deshace una captura pegada a 4.000 píxeles de ancho, y no convierte un logo en PNG en un SVG. Exporta las imágenes rasterizadas a alrededor del doble del tamaño al que se muestran. Usa SVG para logos e iconos. Escribe el texto alternativo mientras aún tienes el contenido fresco en la cabeza.

La checklist de entrega del archivo de Figma

Antes de dar por cerrado el archivo de Figma, haz siete comprobaciones. El frame de escritorio mide 1200 de ancho. Cada sección está dentro de un frame con auto layout. Los contenedores de sección van en fill y los de contenido llevan el max width. La tipografía va con estilos con nombre, sin tamaños huérfanos. Las fuentes tienen licencia web y los archivos están listos para subir. Las imágenes están exportadas a tamaños sensatos, con SVG para todo lo vectorial. Los nombres de las capas se leen como los quieres en la lista de capas de Framer, porque esos nombres llegan tal y como los dejaste.