Cómo importar un diseño de Figma a Framer

Para importar un diseño de Figma a Framer, instala el plugin gratuito Figma to HTML with Framer, selecciona los frames que quieras y pégalos en tu proyecto de Framer. Framer conserva tus capas, tus grupos y tu estructura, así que aterrizas en un lienzo web de verdad y no en una exportación de código estática. Todo lo que viene después de pegar es limpieza, y la limpieza es la parte de la que nadie te avisa.

Cómo importar un diseño de Figma a Framer, paso a paso

Instala Figma to HTML with Framer desde la Figma Community. Es gratis y Framer dice que supera los 600.000 usuarios, así que es la vía oficial y no un puente de terceros. Selecciona las capas o los frames que quieras mover y ejecuta el plugin. Sale un mensaje que te dice cuántas capas se han copiado. Cambia a tu proyecto de Framer, haz clic en el lienzo y pega. La propia página de Figma to HTML de Framer recorre esos mismos ocho pasos: instalar el plugin, copiar tus diseños de Figma, pegar en Framer, seguir editando, hacerlo responsive, añadir efectos y animaciones, añadir páginas y enlaces, publicar.

Pega una sección cada vez

No selecciones el frame de la página entera para moverlo de golpe. Una landing page tiene cientos de capas y, cuando algo cae mal, no hay forma de saber qué parte lo provocó. Pega el hero y arregla el hero. Pega la tira de logos y arregla la tira de logos. Baja por la página en el mismo orden en que la recorre un visitante. Framer dice sin rodeos que algunas estructuras complejas de Figma necesitan limpieza para la web, así que trabaja con trozos pequeños.

Las fuentes son lo primero que hay que arreglar

La documentación de ayuda de Framer es clara en esto. Cuando importas desde Figma, una fuente personalizada que Framer no tenga se cambia por la fuente por defecto de Framer. De pronto tu hero se lee en una sans del sistema, cambia el largo de cada línea y tus espaciados se van con ella. Resuelve la tipografía antes de tocar el layout. Añade una capa de texto, abre el selector de fuentes en el panel derecho, ve a la pestaña Custom, haz clic en Upload Fonts y sube tu archivo. Framer recomienda .woff2 por velocidad de carga. Después selecciona las capas de texto importadas y vuelve a aplicar la fuente. Mira primero la biblioteca que ya viene incluida, porque Framer trae Google Fonts y Fontshare, y puede que una de las dos ya tenga tu tipografía.

Qué llega y qué no

Las capas, los grupos y la jerarquía llegan. También los ajustes de layout, y la lección de la academia de Framer confirma que el auto layout, la jerarquía y las propiedades de fill se trasladan de forma automática. Lo que no llega es todo aquello que Figma nunca tuvo: breakpoints, estados hover, efectos de scroll o componentes en el sentido de Framer. La propia FAQ de Framer te dice que sustituyas las piezas estáticas por componentes reales después de importar. Tómatelo en serio. Reconstruye el nav, el botón y la card como componentes de Framer en lugar de quedarte con cuarenta copias pegadas que luego tendrás que editar cuarenta veces.

Convierte los frames pegados en stacks que se adaptan

Una sección pegada que todavía lleve anchos fijos en píxeles se va a desbordar en el móvil. El artículo de solución de problemas de Framer señala esto como la causa más común de que una página no llene la pantalla en el breakpoint Phone: un elemento más ancho que el viewport móvil, normalmente un ancho fijo tipo 321px, o un Max Width demasiado grande. Ve sección por sección, selecciona los contenedores y, en la parte Size del panel derecho, cambia Width de un número fijo a 100% o 1fr. Deja el Max Width solo en el contenedor de contenido, para que tu columna de texto siga siendo legible en un monitor ancho. Haz esto primero en Desktop, porque los valores de Desktop bajan al resto de breakpoints.

Y ahora añade aquello para lo que sirve Framer

Esta es la recompensa de usar Framer en lugar de exportar código. Configura tus tres breakpoints. Dale a los botones estados hover y tap. Añade apariciones al hacer scroll. Convierte los bloques repetidos en componentes, para que un cambio actualice todas las instancias. Crea tus estilos de texto en el panel Assets, dentro de Styles, con tamaños por breakpoint para Desktop, Tablet y Mobile, para que la tipografía escale sin que toques capas sueltas. Nada de esto existía en el archivo de Figma. Esta es la parte que convierte un mockup en una página.

El orden en el que trabajamos

Primero las fuentes, después los colores y los estilos de texto. Luego, sección por sección desde arriba, pasando los anchos fijos a fill sobre la marcha. Crea componentes para todo lo que se repita. Después configura los breakpoints, de Desktop a Tablet y a Phone, y añade las interacciones. Los metadatos y los enlaces van al final, cuando la estructura ya ha dejado de moverse. Con ese orden, una landing page se termina en un día. Trabajar en desorden lleva tres días, porque cada arreglo deshace el anterior.