Figma ha pasado de ser un recién llegado a una estrella de la industria del diseño en tiempo récord. Pero, como la mayoría de las herramientas de diseño, se queda corta en la fase de prototipado. En este artículo, te mostraremos cómo mantener la magia viva convirtiendo tus diseños en sitios web totalmente funcionales con Webflow.
Proceso paso a paso de Figma a Webflow
Así que has creado un diseño increíble en Figma, o alguien te ha pasado uno, y ahora es tu trabajo construirlo en Webflow. Si esta transición es nueva para ti, no temas: Figma es muy similar a herramientas de diseño como Sketch, pero hay algunas funciones que te ayudarán a ponerte en marcha rápidamente.
Para fines de demostración, he utilizado los fantásticos diseños de Hopper.com que el equipo de Narative Co publicó como código abierto. El sitio es vibrante, divertido y tiene unas interacciones geniales.
He basado este sitio de demostración en un archivo de Figma bifurcado y una versión simplificada que creé.
Ahora, empecemos.
Paso 1: Crea tu proyecto de Webflow
El primer paso para crear un sitio en Webflow es crear un proyecto nuevo. Funciona igual que crear un archivo en Figma, así que no hay nada demasiado complejo aquí. Solo haz clic en el botón azul de la esquina superior derecha y empieza desde cero.
Si planeas hacer otros sitios en Webflow en el futuro, me parece mejor mantener las cosas ordenadas creando una carpeta nueva para cada proyecto en el que trabaje. Esta categorización sigue la estructura de proyectos de Figma, así que si estás familiarizado con ella, esto será pan comido.
Paso 2: Crea tus estilos globales / guía de estilo
Lo primero que hago en un sitio nuevo es definir mis estilos globales. Los estilos globales son todos los elementos predeterminados que necesita cualquier sitio web, como el estilo de los párrafos, los encabezados y la apariencia de los enlaces. El documento de Figma de Hopper tiene una guía de estilo completa, pero si tu proyecto no la tiene, quizás quieras crear una para que todos tus estilos base estén listos para usar.
Clona esta plantilla de etiquetas HTML para poner en marcha tu guía de estilo.
Para la parte de Webflow, casi siempre copio y pego esta plantilla de etiquetas HTML en mis sitios para usarla como base de mi guía de estilo. Para hacerlo, clona el sitio anterior. Irás directamente al lienzo de ese proyecto y, desde allí, podrás copiar los elementos al nuevo sitio que acabas de crear. También podrías construir sobre la plantilla, pero siempre prefiero empezar de cero.
Consejo profesional: Para facilitar la copia y pega desde la plantilla de etiquetas HTML a tu nuevo proyecto, abre cada proyecto en una pestaña diferente; sí, puedes ejecutar dos sesiones de Webflow simultáneamente.
Para definir un estilo global, selecciona el elemento en el lienzo y haz clic en el campo del selector de clases en la esquina superior derecha de la pantalla. Si el elemento que has seleccionado puede definirse globalmente, verás una opción de color púrpura con "All" en el nombre de la etiqueta. (Ejemplos: Body (All Pages), All H3 Headings). Se verá así:
Establecer clases base no solo te ahorra trabajo, sino que mantiene la hoja de estilos de tu sitio ligera y más fácil de gestionar a largo plazo. Puedes omitir cualquiera de estos elementos si quieres, pero recomiendo encarecidamente que al menos definas el estilo de fuente base en Body (All Pages). Esto te ahorrará muchísimo tiempo en el futuro, ya que solo tendrás que definir tu fuente una vez, y es súper fácil de cambiar más adelante, en caso de que tú o tu cliente cambien de opinión.
Si tu párrafo base está definido, así de fácil será cambiar la fuente:
Hablando de fuentes personalizadas, si la que estás usando no está en la lista predeterminada, ahora es un buen momento para ir a la configuración del proyecto y, si es una fuente de Google, seleccionarla de la lista.
Si no es una fuente de Google, sube el archivo TTF o OTF y selecciona los grosores que desees.
Consejo profesional: Las fuentes son pesadas, así que si quieres optimizar el rendimiento de tu sitio, selecciona solo los grosores que necesites. Un par de cientos de kilobytes pueden parecer una tontería, pero siempre es mejor reducir peso para mejorar el tiempo de carga.
Ahora, volvamos a la guía de estilo. Si estás usando la plantilla que recomendé, esto debería ser pan comido. Solo define todo en la página para que coincida con tu archivo de Figma. Si usas los estilos de equipo de Figma, es útil mantener las cosas organizadas de forma similar.
Una vez definidos los estilos básicos, es un buen momento para añadir todos tus colores personalizados. Si tienes uno o dos, es un proceso rápido, pero si tienes muchos, puede ser tedioso. Yo suelo hacerlo añadiendo un div de bloque de color y cambiando su color una y otra vez hasta que todas mis muestras estén en Webflow.
Mientras lo haces, asegúrate de que tus colores sean globales marcando la casilla "Global". Sabrás que son globales si ves un pequeño triángulo en la esquina inferior derecha de la muestra y un aviso para ponerle nombre.
Paso 3: Exporta tus recursos
Ahora que ya tienes definidos tus estilos globales, es hora de exportar todos los recursos de tu archivo de Figma.
Si has sido constante marcando imágenes, iconos y otros recursos para exportar mientras trabajabas, simplemente pulsa Comando/Control + Mayús + E sin nada seleccionado para abrir el cuadro de diálogo de exportación. Pulsa el botón de exportar y, cuando termine, Figma te preguntará dónde guardar todos esos recursos geniales. Si quieres limitar lo que exportas, por ejemplo, solo los recursos de un marco principal específico, selecciona ese marco y usa el mismo atajo.
Una vez exportados, puedes buscar la carpeta de archivos correcta y arrastrarlos directamente a Webflow, o abrir el panel de recursos, hacer clic en el botón de carga y seleccionarlos de esa manera.
Consejo profesional 1: Siguiendo con la idea de crear un sitio de alto rendimiento, te recomiendo pasar todos tus PNG y JPG por tinypng.com o cualquier otro sitio de compresión. Sí, añade un par de pasos, pero puedes ahorrar muchísimo tiempo de carga en tu sitio. Un sitio ligero es un sitio feliz.
Consejo profesional 2: Si usas barras inclinadas (/) en los nombres de tus capas de Figma, al exportar, Figma creará automáticamente subcarpetas por ti. Así que, en lugar de "icon-back", intenta nombrar tu capa como "icon/back". Puede ahorrarte muchísimo tiempo.
De Figma a Webflow
Aprende nuestro proceso de diseño, desde la idea hasta el resultado final, y crea un sitio web desde cero usando Figma, Cinema4D, Lottie y Webflow.
Paso 4: Estructura tu sitio con divs
A continuación, me gusta hacer algo que llamo "div-framing". Para ello, observo todos los grupos o marcos grandes de mi archivo de Figma e intento replicarlos con divs en Webflow. Puedes saltarte este paso si no te resulta útil, pero a mí me ayuda a mantenerme organizado a largo plazo.
Para el sitio de Hopper, también añadí contenedores a cada sección de div que no ocupaba todo el ancho, ya que así era como estaba definido la mayor parte del archivo original.
Una vez que tengas esos divs en tu lienzo, asígnales un nombre de clase único. No hace falta definir estas clases todavía, pero querrás ir a la pestaña de ajustes y asignar un ID a cada uno. Esto resulta muy útil más adelante si vas a añadir enlaces de anclaje a tu sitio.
También puedes usar el elemento de cuadrícula (o establecer la propiedad display de tu div en grid) en tu sitio, si quieres. No voy a entrar en las mejores prácticas para cuadrículas aquí, pero el tutorial de la página de inicio de Webflow sobre el uso de grid te pondrá al día si quieres explorar esta opción.
Paso 5: Aplica estilo a tu contenido
Dar estilo a tus clases es, a la vez, la parte más fácil y la más difícil de Webflow. Es súper sencillo empezar, pero puede ser un reto mantener las cosas ordenadas en sitios más grandes.
Escribí mucho más sobre esto en mi serie sobre cómo construir el sitio web de una agencia, que podría resultarte útil. Asegúrate de mantener tus clases con nombres genéricos, limpias y lo más minimalistas posible.
Por ejemplo, en lugar de llamar a algo "Texto de héroe negro", intenta crear una clase combinada de "Todos los encabezados H1" + "Texto negro". Esto permitirá que tu clase de encabezado 1 se encargue del tamaño, el grosor y la posición, independientemente del color. Luego puedes añadir una clase secundaria para cambiar el color (u otras propiedades) para tu caso de uso específico.
Otra cosa que me encuentro haciendo al pasar de Figma a Webflow es realizar cambios en el diseño para que las cosas sean más fáciles de implementar. Casi siempre soy el diseñador y el desarrollador, así que puedo tomar esas decisiones, pero puede que ese no sea tu caso.
Sea como sea, un consejo: no intentes calcar tu archivo de Figma píxel por píxel. Ya sé, ya sé, todo el mundo vive obsesionado con la perfección al píxel. Pero si eres diseñador, esta es tu oportunidad para ver cómo lo que pensabas que sería un diseño sencillo, en realidad da más problemas de los que merece.
Por muy acostumbrado que estés a crear sitios web, las cosas se comportan de forma distinta en el código que en las herramientas de diseño. En Figma, mover algo es tan fácil como arrastrar y soltar, y cada elemento puede vivir en su propio mundo sin afectar a los demás. Pero así no es como funciona la web.
Si no eres el diseñador, esto no será tan fácil de hacer. Por experiencia propia, sé que los diseñadores siempre queremos una precisión del 102% en nuestros diseños, pero a veces hay que ceder un poco. Webflow puede darte una mejor forma de explicar lo complejo que resulta implementar ciertas cosas.
Si tienes buena relación con tu diseñador, asegúrate de involucrarlo en estas decisiones y aprovecha las funciones de comentarios de Figma. Me he dado cuenta de que entendemos mejor lo visual que el código, así que lo que puede ser difícil de explicar en código, puede ser fácil de articular en el diseño de Webflow.
Ningún sitio que haya diseñado en Figma y luego construido en Webflow ha quedado exactamente igual. Quizás a ti te pase lo mismo.
Paso 6: Interacciones
Puede que tu sitio tenga interacciones complejas, pero herramientas como Figma solo te ayudarán hasta cierto punto, ya que casi todo será estático. Y a menos que tengas otra herramienta de prototipado, es posible que solo te quede Webflow para el diseño y la implementación de interacciones.
La buena noticia: Webflow es, de hecho, una de las mejores herramientas de diseño de interacciones que existen. Si eres el diseñador del proyecto, no hace falta que crees tus interacciones en Principle, Atomic, InVision Studio, etc. Puedes hacerlo directamente en Webflow.
No voy a entrar en detalles técnicos sobre el diseño de interacciones aquí, ya que este curso de interacciones y animaciones es un recurso muy completo.
Dicho esto, cabe destacar que las interacciones se dividen en dos categorías:
- Interacciones que ocurren por clase, como cuando pasas el cursor sobre un botón o haces clic en un elemento, e
- interacciones más complejas que involucran múltiples clases o elementos.
El panel de Interacciones es ideal para estas últimas. Para las primeras, selecciona el estado de tu elemento en este menú desplegable, cambia sus atributos y asegúrate de tener aplicada la transición adecuada cuando esa clase cambie la propiedad que has definido.
Paso 7: Trabaja hacia el móvil
Webflow no es "mobile-first" y, aunque pienses así en tus proyectos, no lo hagas —repito, no diseñes los puntos de interrupción (breakpoints) móviles antes de pasar al escritorio.
Verás, la versión de "escritorio" de tu sitio no es tanto un viewport específico, sino una ausencia de definición de viewport. Todos los márgenes, colores, fuentes, propiedades flex, etc., que definas en este viewport fluirán hacia abajo, pero nunca podrán subir. (Y esto también se aplica a medida que bajas a los puntos de interrupción más pequeños).
Esto es muy similar, en concepto, a cómo se comportan los componentes en Figma. Defines un componente maestro y sus atributos fluyen a todas las instancias, las cuales pueden sobrescribirse, pero es imposible sobrescribir un maestro desde la instancia misma. Si quisieras hacer esto en Figma, tendrías que ir al componente maestro. Piensa en tu viewport de escritorio de esa manera y ya tendrás la mitad del camino hecho.
A menudo, los sitios son totalmente distintos en móvil y en escritorio. Esto puede volverse confuso rápidamente, ya que sentirás la tentación constante de ocultar y mostrar elementos según el punto de interrupción. Puedes ocultar elementos en Webflow cambiando la propiedad de visualización (display) a "none".
Consejo profesional: Siempre uso el viewport horizontal (el tercero) como si fuera mi viewport móvil principal. Los dispositivos móviles son cada vez más grandes, así que me resulta útil empezar un poco por encima de la anchura estrecha del último viewport. Si funciona en horizontal, funcionará en vertical. No tienes que hacerlo así, pero creo que cuantas menos diferencias haya entre esos dos viewports, más fácil será mantener el sitio.
Paso 8: Publica y perfecciona
La vista de tu sitio dentro del Diseñador de Webflow es, según mi experiencia, entre un 95% y un 99% fiel a cómo se verá en el mundo real.
Cuando estés a gusto con el estado de tu sitio, publícalo y pruébalo en:
- Tu teléfono (y en el otro sistema operativo móvil principal, si puedes)
- En otros navegadores, y
- En tantos entornos diferentes como sea posible
Cambia el tamaño de las ventanas todo lo que puedas para ver si algo se rompe. Y si tienes la opción, usa un emulador como BrowserStack para visualizar tu página en dispositivos y resoluciones que no puedes replicar por tu cuenta. Solo ten en cuenta que los emuladores no siempre funcionan a la perfección: lo real siempre es mejor.
Además, si usas código personalizado o elementos incrustados, es momento de asegurarte de que todo esté bien configurado, ya que no se visualizan dentro del Diseñador de Webflow. Para algunos sitios, esto será un proceso aparte. Para otros, puede que ni siquiera sea un problema.
Para terminar
Webflow y Figma son mis dos herramientas de diseño favoritas. Permiten a los equipos experimentar como nunca antes. Con Figma, puedes colaborar con diseñadores, desarrolladores, clientes y gestores de producto de todo el mundo simultáneamente, con una única fuente de información y sin preocuparte por actualizaciones o guardar archivos.
Con Webflow, ese flujo de trabajo no tiene por qué quedarse en los rectángulos: puedes entrar, crear sitios web y productos increíbles, y luego compartir y desarrollar esas ideas, ¡que no pare la fiesta!
Si trabajas en equipo, ya empezarás a ver las ventajas de una herramienta colaborativa como Figma. Ahora, al añadir Webflow, por fin puedes adueñarte del proceso y ver cómo tus diseños se convierten en realidad.
