El trabajo de los diseñadores web no es nada fácil. Es una carrera increíblemente genial, llena de una creatividad sin límites, pero difícil al fin y al cabo. ¿Algo que puede ser un poco menos complicado? Pasar un wireframe de Sketch a Webflow.
¿Qué aplicación —de entre los cientos que existen— es la mejor opción para presentar tus ideas de diseño web? Me he hecho esta pregunta demasiadas veces y, por fin, he encontrado la respuesta en Sketch y Webflow. Sketch me permite presentar mis ideas y Webflow me permite hacerlas realidad. La combinación de estas herramientas ha cambiado por completo mi forma de crear, presentar y materializar mis ideas.
¿Quieres hacer lo mismo? Aquí te explico cómo optimizar el proceso de diseño de Sketch a Webflow para ahorrar tiempo y mejorar tus diseños.
Preparación: Crea el diseño en Sketch pensando en Webflow
Antes de empezar a diseñar en Sketch, asegúrate de saber cómo optimizar el diseño para transferirlo a Webflow. Por ejemplo, a diferencia de Sketch, Photoshop y Figma, Webflow utiliza el modelo de caja (box model).
¿Qué significa esto? El espacio entre elementos se define mediante sus márgenes, y el espacio entre el texto de un botón y su caja se establece con el relleno (padding). Es importante tener en cuenta este modo de diseño, que funciona de maravilla, mientras creas tu diseño en Sketch, ya que, en la mayoría de los casos, el espacio entre elementos en la web se define mediante sus márgenes.
Entonces, ¿cómo preparamos un diseño de Sketch optimizado para el modelo de caja? Empecemos con la combinación de los plugins Paddy y Sketch Measure.
El plugin Paddy nos permite aplicar relleno a una capa de fondo (ya sea una capa de forma o un símbolo) de un grupo. La capa de fondo se redimensionará automáticamente según la cantidad que especifiquemos. Esto nos permite mantener un relleno estricto para botones, símbolos y elementos que luego recrearemos en Webflow.
Seguro que ya conoces el extractor de CSS del menú contextual de Sketch. En realidad, solo son notas CSS. Cada bloque se identifica mediante un comentario previo que utiliza el nombre de la capa.
Sin embargo, el plugin Measure nos permite generar una página HTML con un solo clic e inspeccionar cada detalle del diseño, incluidos los estilos CSS, sin necesidad de conexión.
Así que adelante, añade Paddy y Sketch Measure a tus plugins antes de empezar. ¡Te espero aquí!
¿Listo? Genial. Empecemos.
Paso 1: Configura el relleno en Sketch
Para este tutorial, utilizaremos una plantilla de Felix Cruz para mostrar el proceso de Sketch a Webflow.
Primero, usemos el plugin Paddy para cualquier elemento que requiera un relleno específico. Los elementos que suelen necesitarlo son botones, campos de entrada, tarjetas y secciones. Esto se debe a que queremos tener un relleno estándar para todos estos elementos. El botón de un formulario, por ejemplo, necesitará un relleno definido:
Paso 2: Extrae los recursos con Sketch Measure
A continuación, para preparar tus imágenes para Webflow, vamos a hacer que se puedan exportar.
Para ello, primero aplica tus ajustes en Measure y luego haz clic en Spec Export. Esto generará un archivo index que nos permitirá inspeccionar todos los detalles del diseño, incluidos los estilos CSS. Los recursos también se guardarán en un archivo ZIP que necesitaremos para el sitio de Webflow.
Notarás que el uso de Measure también facilita proporcionar a tu equipo medidas precisas de forma rápida y sencilla. Es súper útil si entregas tu trabajo de diseño a los desarrolladores.
Paso 3: Añadir fuentes
Ahora estamos listos para añadir nuestros recursos a un nuevo proyecto de Webflow. Vamos a abrir nuestro proyecto, seleccionar la pestaña de fuentes en la configuración del proyecto y añadir nuestras tipografías. Pueden ser fuentes de Google, Typekit o tus propias fuentes. Para este proyecto, añadiremos los grosores 100, regular y 900 de la fuente Roboto.
Consejo profesional: selecciona solo los grosores que necesites al subir fuentes o al elegir de Google. Cada grosor de fuente aumenta el tamaño del archivo y el tiempo de carga del sitio.
Paso 4: Crea tu guía de estilo
A continuación, crearemos una guía de estilo en Webflow. En lugar de perder mucho tiempo actualizando un color en todo el documento en Sketch, usaremos colores globales.
En Webflow, simplemente guardamos una muestra como "Global", lo que nos permite hacer cambios drásticos en proyectos enteros. Esto te permite realizar actualizaciones con facilidad y te ahorra el típico dolor de cabeza cuando tu cliente cambia de opinión sobre el color de un botón. Créeme, he pasado por eso.
Ahora, el diseño de la guía de estilo depende totalmente de ti. Puede ser tan ordenada o tan caótica como quieras. Para nuestros propósitos, la mantendremos simple para que sea más fácil navegar por ella.
Mientras creamos nuestra guía de estilo, recordemos pensar en unidades relativas, no fijas. Esto significa que el tamaño de un elemento debe considerarse en relación con otros elementos, como el navegador o el elemento padre. Aunque esto requiere una nueva forma de pensar para algunos, al final garantiza que tu página, y los elementos dentro de ella, sean adaptables a varios dispositivos.
Por esta razón, usaremos porcentajes (%), ancho de ventana (vw) o altura de ventana (vh). Cada una de estas unidades permite que nuestros elementos se adapten al navegador, a diferencia de los píxeles. Debido a que su tamaño real cambia según el tamaño de la ventana, son unidades excelentes para el diseño adaptativo.
Sugeriría echar un vistazo rápido al artículo de Ire Aderinokun “Viewport vs Percentage Units” para aprender cuándo usar cada unidad relativa.
Ahora, para el tamaño de fuente, usaremos rems.
Ahora, vamos a crear una sección para cada elemento. Cada una tendrá al menos:
- Encabezados. Estilizaré los selectores globales (es decir, "Todos los encabezados H1") para cada nivel de encabezado, en lugar de crear clases únicas para cada uno. Esto mantiene mi código más limpio.
- Párrafo. Asegúrate de seleccionar "Todos los párrafos" aquí también.
- Botones y sus estados (al pasar el cursor, presionado y enfocado)
- Enlaces de texto y sus estados
- Colores. Guardaremos todos los colores de la marca como muestras globales para que podamos aplicarlos fácilmente y, si es necesario, actualizarlos en todo mi sitio.
Una vez que hayamos terminado, añadiremos los elementos a sus secciones correspondientes en el lienzo.
Consejo profesional: convierte la guía de estilo en un símbolo
Si convertimos toda nuestra sección de guía de estilo en un símbolo, será más fácil añadirla o eliminarla de cualquier página. Esto nos permite tener una guía de estilo justo en la página como referencia.
Paso 5: Subir imágenes
En el Webflow Designer, abriremos el panel de Assets para añadir las imágenes que exportamos desde Sketch Measures. Podemos añadirlas arrastrándolas y soltándolas directamente en el Designer, o haciendo clic en el botón de subir. De cualquier forma, podemos subir todas las imágenes de una vez.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Paso 6: Crear elementos globales
La navegación, el pie de página, el formulario de contacto y los elementos modales no deberían cambiar de una página a otra. Para asegurarnos de ello, convertiremos cada uno en un Símbolo. Todo esto debe hacerse teniendo en mente el diseño atómico.
Los Símbolos convierten cualquier elemento en un componente reutilizable. Esto significa que cualquier cambio realizado en un Símbolo se actualizará en todas sus instancias. Magia.
Crear símbolos también nos permitirá añadir nuestros elementos globales a cada página justo cuando los necesitemos, acelerando significativamente el proceso de diseño.
Para este proyecto, crearemos elementos globales para los Símbolos de navegación, contacto y pie de página, para poder usarlos en cualquier página.
Primero, echemos un vistazo a nuestro Símbolo de navegación. Este consiste en el elemento de navegación de Webflow. Con unos pocos ajustes en los nombres de las clases y los valores CSS (envolviendo la navegación en un contenedor flexbox), lo hemos hecho nuestro.
Consejo profesional: utiliza una convención de nombres personalizada para tus clases
Siempre nombro los elementos cuyo CSS modifico. Es genial que Webflow añada un nombre de clase automáticamente, pero tener el control sobre la convención de nombres es la mejor opción. Una convención de nombres sólida agiliza el proceso de diseño. Además, guardar nombres especializados facilita la extensión de un estilo.
En este sitio web, por ejemplo, hemos dado estilo a un elemento div que resalta una foto de perfil. Cada elemento de resaltado tiene un color diferente, por lo que cada uno recibe un nombre especializado como extensión del primer elemento resaltado, llamado "Square background". El segundo color de la paleta, entonces, se llamaría "square-background two".
Esta clase combinada puede utilizarse ahora en todo el sitio.
Ahora pasaremos al Símbolo de contacto. Este consiste en dos "content wrappers" en el nivel inferior, luego un contenedor y una sección de contenido que los engloba. El elemento de la sección de contenido es un elemento funcional independiente con un encabezado. Una regla de oro que sigo: las secciones deben aparecer de forma lógica en el esquema de mi contenido.
Por ejemplo, nuestro esquema consiste en la sección principal (hero), las múltiples secciones de contenido general y, por último, la sección del pie de página. Notarás que nuestra convención de nombres CSS sigue este esquema, ya que tenemos las clases "hero-section" y "content-section" debajo.
Por último, veamos el símbolo del pie de página, que consiste de forma similar en dos "content wrappers", un contenedor y una sección que contiene los tres.
Paso 7: Construir el resto del sitio
Ahora que hemos añadido la base, ¡nuestro flujo de trabajo está en marcha! Terminar el resto de la plantilla será pan comido.
Nuestros recursos, estilos básicos y fuentes están listos, así que estamos preparados para la parte divertida.
Primero, añadiremos nuestro Símbolo de guía de estilo a la página; es más sencillo hacer referencia a él cuando podemos verlo.
Esta guía de estilo será nuestra estrella polar mientras creamos el sitio. No es gran cosa, pero contiene todos los elementos globales que reutilizaremos en todo el sitio.
Ahora vamos a crear nuestra sección principal, que incluye algunos elementos de la guía de estilo. Aprovecharemos los 100 vh y flexbox con un diseño vertical y la alineación en "stretch" para que el contenido ocupe toda la sección.
A continuación, añadiremos el contenido principal. Fíjate en que el texto amarillo de bienvenida es igual al H3 global que creamos antes.
Luego, usaremos el H1 global para nuestro título principal, pero cambiaremos el color a blanco. ¡Pan comido!
Debajo de la sección principal, empezaremos a añadir el contenido general dentro de nuestro elemento "content-section". Cada sección tendrá el mismo relleno (10 rems arriba y abajo) para que el estilo sea coherente en todo el sitio.
Como ya hicimos el trabajo duro en la guía de estilo, podemos reutilizar elementos como el H2 y los párrafos en nuestras secciones de contenido. ¡Es genial!
Por último, crearemos el formulario de contacto y el pie de página. Asegúrate de marcarlos como símbolos para poder reutilizarlos en otras páginas del sitio.
Te animo a que pienses más allá de lo convencional con las funciones únicas de Webflow: animaciones, diseño totalmente adaptable y posicionamiento fijo, por nombrar solo tres.
Los diseños hechos en Sketch no son, ni mucho menos, la versión final de tu trabajo, y no tienes ninguna obligación de seguirlos al pie de la letra. En Webflow, diseñas directamente en producción. Todo lo que ves en el lienzo está listo para cobrar vida en la web. ¡Estoy deseando ver lo que creas!
Echa un vistazo a la estructura del sitio en mi enlace compartido.
De Sketch a Webflow
Espero que este recorrido te haya resultado útil e informativo. Con las herramientas adecuadas, como Sketch y Webflow, puedo dar vida a una maqueta con total facilidad. ¡Y ahora tú también puedes!
Una pregunta para los expertos: ¿habéis probado a diseñar directamente en Webflow? Cuando diseño sitios web, rara vez hago las composiciones completas en Sketch. Casi siempre empiezo directamente en Webflow. Incluso cuando uso Sketch, solo hago algunas pruebas visuales de ciertos componentes para hacerme una idea del diseño. Todo lo demás es más rápido en Webflow.
¿Te apuntas al reto?
Clona este sitio, personalízalo y compártelo con nosotros cuando termines.
Al fin y al cabo, la imitación es la forma más sincera de halago... ¡Ya me estoy sonrojando! :-)
