Mejora tu proceso de diseño con Sketch
8 razones y varios recursos para trabajar tus diseños de interface con Sketch App
Los programas de diseño UI no lo son todo, pero como toda herramienta, están diseñadas para facilitar la realización de tareas y pueden potenciar una mejora tanto en la metodología como en los resultados finales.
Parece muy obvio, pero no todas las herramientas de diseño digital sirven para interfaz. Que se usara Photoshop cuando no había otra forma de diseñar UI era entendible, sin embargo, hoy en día siguen habiendo grandes empresas que usan este programa de retoque fotográfico de Adobe para construir lo que será su interfaz. Esto se traduce en documentos de peso descomunal, ineficiencia en el proceso de trabajo, desorganización, horas de dedicación extra para entregar al front-end, etc… Y mantén los dedos cruzados para que no haya cambios en la base del diseño.
A día de hoy existe un amplia variedad de herramientas para diseñar UI que prometen ofrecer la solución final. Tenemos diferentes herramientas como Adobe XD, Invision Studio, Framer y Figma, pero hablaremos de la más consolidada que sigue siendo Sketch.
💛 La comunidad de Sketch marca la diferencia
Este post no tiene el objetivo de comparar las herramientas antes mencionadas, sino destacar las bondades de Sketch. Pero si tenemos que señalar qué la hace distinguirse por encima de las otras opciones, podemos empezar por mencionar la enorme comunidad que comparte sus conocimientos en forma de artículos de blog, los plugins que crean los usuarios más activos y los recursos editables hechos por usuarios y subidos de forma desinteresada.
📂 Facilidad para organizar tus diseños
Otro punto positivo es el acceso a las múltiples opciones de organización que ofrece Sketch. Sin embargo, esta cantidad de posibilidades hace que tengas que reunirte con tu equipo para decidir cosas del estilo: cómo nombrar los elementos, cómo ordenar los Artboards dentro de las páginas, etc …
Por eso, está bien seguir manuales de buenas prácticas y tomar las mismas referencias, y para cuando todo el equipo esté alineado dejo un artículo para usar ciertos plugins que te permitirán ordenar tus archivos al más puro estilo Marie Kondo.
A la anterior lista también sumo el plugin de Ale Muñoz para ordenar los Artboards de forma automatizada:
🖥 Diferentes opciones para entregar los diseños a desarrolladores
Sketch es una herramienta de diseño Developer Friendly, y tiene diferentes formas de entregar los resultados al Front End, de forma que el traspaso sea más rápido y mucho más exacto.
Con las opciones presentadas a continuación se permiten ver medidas de formas, espacios entre elementos, colores, tipografías, estilos, etc…
Lo más recomendable es usar:
- Zeplin: la opción más fiable, más simple y la pionera en esto.
- Invision: si también quieres un prototipo para explicar el workflow.
- Gallery: la alternativa gratuita de Google, sin límite de proyectos.
Aquí dejo un artículo que compara Zeplin e Invision con otras dos alternativas, un análisis en profundidad que permite tener una visión general para identificar la opción que mejor se adapta a tus necesidades.
📋 Diseñar usando datos reales
En un diseño muchas veces se tienen que contemplar los datos que se incluirán para crear una estructura que los pueda contener.
Ahora con Sketch Data podemos incluir datos de texto o imágenes tanto de una base de datos ficticia como de nuestra base de datos real, tal y como se explica detalladamente en el siguiente artículo.
📐 Elementos de tamaño flexible
Aplicar las opciones de redimensión permite que cuando necesitemos el elemento unos píxeles más ancho, estrecho, alto o bajo, no haya ningún problema y reaccione tal y como nosotros lo hemos diseñado. Para entender los básicos de esta imprescindible función podemos consultar la siguiente página de información oficial de Sketch.
📏 Controles de espaciado entre elementos
En la versión 55 ha aparecido una nueva funcionalidad llamada Smart Distribute que permite que abandonemos el plugin Sketch Distributor (que nos permitía automatizar un espaciado específico entre elementos), porque cumple la misma función de forma nativa y con mucha más facilidad.
De momento solo funciona en uno de los dos ejes, horizontal o vertical, sin embargo parece que ya trabajan para que se pueda aplicar a ambos al mismo tiempo. En la última sección de la página de ayuda de Moving Layers podremos descubrir cómo funciona.
✨ Las librerías de símbolos siguen siendo claves
El uso de los símbolos puede hacer mucho más eficiente el proceso de diseño, sin embargo como ya conté en mi último artículo que dejo a continuación, hay que usarlos correctamente.
Desde Interactius apostamos por el rigor y la máxima eficiencia en cada proceso metodológico, por eso usamos librerías en nuestros proyectos. Pero también hemos hecho librerías a medida para mejorar las posibilidades de diseño de nuestros clientes, que a su vez, sirven para incidir en la consistencia de los Design Systems, ayudando a los usuarios a seguir los patrones ya establecidos.
🔗 Overrides fáciles de usar
Ahora tener que hacer trucos como insertar todos los textos como símbolos para tener control de las distancias, o tener los colores como símbolos, ya es cosa del pasado. En las últimas versiones se han resuelto los problemas con los overrides de texto y se han añadido los overrides de estilo que hacen prescindibles los símbolos con los colores.
También se han añadido mejoras como mostrar destacado el elemento del override que tienes seleccionado en la lista de capas.
Otra nueva característica es que ahora seleccionando el Artboard del símbolo veremos la sección Manage Overrides que nos permitirá decidir qué capas serán editables en el proceso de override.
También existe la opción relativamente nueva de hacer un reset a la instancia para que recupere los valores originales del símbolo.
🥁 Conclusión — Esto sigue mejorando
Sketch sigue mejorando y en las últimas versiones Sketch 53, Sketch 54 y en la actual Sketch 55 nos ha traído opciones interesantes y muchas mejoras mencionadas en los puntos anteriores.
Pero parece que el roadmap de Sketch va más allá y pronto lanzará Sketch for Teams (en breves aparecerá en beta) y en esta versión se podrá colaborar mejor en equipos porque nos ofrecerá: la gestión de los permisos para usuarios, un control de versiones propio y un espacio para dejar el feedback del diseño.
Por último quiero destacar otra ventaja de vital importancia: Sketch es un programa que genera diseños con un lenguaje fácil de entender entre diferentes softwares, si algún día dejara de funcionar, tenemos muchas alternativas para pasar nuestros proyectos a otras herramientas. Y vamos a tener a la gran comunidad de Sketch involucrada en ello.
🗒 Resumen de links interesantes
- Sketch Documentation: Documentación oficial del software con explicaciones sobre cómo funciona cada opción.
- Sketch Plugins: Directorio oficial de plugins.
- Sketch App Resources: Recursos editables gratuitos de usuarios y otras utilidades.
- Sketch Repo: Recursos editables gratuitos de usuarios.
- UI8: Recursos editables de pago de usuarios.
- Sketch App Blog: Blog oficial.
- Sketch Shortcuts: Página para consultar los atajos de teclado.
- Sketch App Hub: Selección de plugins y colecciones.
- Sketch Talk: Foro con dudas sobre Sketch.
Sígueme 🕵️♀️🕵️♂️
Gracias! 👏
Si te ha gustado el artículo, recuerda que puedes dar hasta 50 aplausos en menos de 10 segundos. Y en los comentarios puedes dejar dudas, sugerencias o simplemente saludar.
