Herramientas para Facilitar el Paso Entre Diseñadores y Desarrolladores

() translation by (you can also view the original English article)

En este artículo realizaré un rápido recorrido por algunas herramientas que ayudarán a transmitir tus diseños a los desarrolladores encargados de llevarlos a cabo. Listaré también algunos tutoriales para ayudarte en el inicio–así que vamos a ello

Tiza y Queso

Los desarrolladores argumentadamente se enfocan en el cálculo y la lógica, mientras que los diseñadores se inclinan en mayor medida hacia los procesos creativos. Como habrás imaginado esto puede crear problemas de comunicación entre ambas partes, las cuales están en realidad tratando de trabajar juntas. Definitivamente, el canal de comunicación adecuado para salvar este escollo debería ser una herramienta que abarque ambos hemisferios, de forma que les permita comunicarse con su propio lenguaje.

Afortunadamente, existen soluciones a este problema, muchas soluciones en realidad, por ello he seleccionado algunas de las opciones más populares con observaciones relativas a sus características más destacadas.

InVision (Integraciones para Sketch y Photoshop)

InVision es una de las herramientas de prototipado más populares de la industria.

Regístrate y podrás iniciarte con un proyecto de forma gratuita, y mediante suscripciones de pago que actualmente empiezan con 15$/mes por 3 proyectos. El número de plugins e integraciones con InVision es asombroso, así que aparte de nuestro objetivo (mejorar la comunicación), puedes encontrar otras características que mejoren tu flujo de trabajo.

Características principales incluídas:

InVision acompaña el paquete con innumerables herramientas de prototipado, como la prueba directa en dispositivos móviles y la posibilidad de incrustar tu prototipo en cualquier lugar para realizar pruebas de usuario.
Integración con tan gran cantidad de herramientas que me es imposible nombrar todas. La industria la ha aceptado como un estándar y por tanto se han creado multitud de plugins para trabajar conjuntamente con InVision.
Control de versiones sincronizada con tus archivos en Sketch o Productos de Adobe.
Aunque de momento en versión privada de prueba (y donde Zeplin/Avocode son ya fuertes) InVision también dispone de una herramienta de exportación para la creación de hojas de estilo y generación de código para cualquier elemento. Es muy pronto para opinar sobre lo bien que se comporta esta característica en relación a sus competidores.

Avocode (Integraciones para Sketch y Photoshop)

Ya hemos explicado Avocode en Envato Tuts+ varias veces con anterioridad; funciona como una forma de exportar diseños con el propósito de desarrollarlos después para la web.

Avocode ofrece 14 días de prueba, tras los cuales cobra 7$ mensuales por un número ilimitado de proyectos, por usuario. Si deseas compartir tu trabajo con otros (lo que es en sí el objetivo), tienes que mejorar tu plan a la suscripción de 10$/mes, opción que sigue siendo la más barata de todas las que hemos nombrado hasta ahora.

Avocode viene con integraciones completas para Sketch y Photoshop, además de las siguientes funciones:

Los desarrolladores pueden coger y elegir lo que necesiten–sin necesidad de que el diseñador cree ninguna guía de estilo. Especificaciones completas, colores (HEX, RGBA, HSLA), fuentes, estilos y tamaños disponibles en cualquier elemento que se seleccione.
Exporta CSS y multiples imágenes (incluido el formato SVG). Los estilos pueden incluso ser exportados a SASS, Stylus y Less; una gran ventaja para los desarrolladores de frontend en general.
Un sencilla funcionalidad de copia y pega de texto mediante la cual puedes pegar texto desde el diseño a un editor de código con etiquetados de encabezado HTML incluidos (H1 por ejemplo).
Todos los planes vienen con proyectos ilimitados. Actualiza en el momento en el que necesites más usuarios involucrados en el proyecto.
Control de versión y colaboración con notificaciones vía email. Disponible la integración con Slack que empieza con el plan de suscripción empresarial (10$).

Zeplin (for Sketch)

Ya te introdujimos a qué es Zeplin recientemente en los tutoriales para principiantes de Andreia

Parecido a InVision, con subscripciónes mensuales que comienzan a partir de 15$/mes para tres proyectos (puedes comenzar con un proyecto de forma gratuita). Esta herramienta para Mac/Windows/Web funciona enfocándose principalmente en solucionar el siguiente problema: la distrubución Diseñador-cliente. No dispones de todos los extras y capacidades de InVision, pero es realmente efectivo para tareas colaborativas.

Algunas de sus principales características:

Funciona exclusivamente con Sketch.
Proporciona valores HEX y RGB específicos para todos tus diseños.
Genera automáticamente recursos (botones, iconos o cualquier cosa que selecciones como recurso).
Ofrece al desarrollador información específica (PT, DP/SP, PX) según la plataforma (iOS, Android o web). De manera que permita al desarrollador codificar tus recursos con las medidas a las que estos están acostumbrados en su SDK. Incluso ofrece segmentos de código con color de forma que el desarrollador pueda identificarlos, copiar y pegar fácilmente.
Plena integración con Slack disponible, con lo cual todos los miembros del equipo estarán al corriente de los cambios en el diseño.

Amplifica Sketch/Photoshop Con Plugins

Practicamente no hace falta mencionar que tanto Sketch como Photoshop disponen de una abundante lista de plugins para exportar tus diseños y crear detalladas guías de estilo para los desarrolladores. Unos pocos ejemplos con sus respectivos precios:

Ink (Photoshop, Gratuito): un generador de estilos.
Markly (Sketch/Photoshop, 49.99$): un generador de guías de estilo para UI/Spec. Empleado por Netflix, Google, Facebook y muchos otros.

Menciones valiosas

Las herramientas sugeridas en el artículo son las más comunes, probadas y revisadas de la industria para la colaboración en el diseño web/móvil. Veámos algunas otras, aunque no las describamos en profundidad.

Framer (imagen inferior) es otra herramienta que merece la pena reseñar si estás diseñando para móviles. En cualquier caso, su aproximación puede que no sea la más adecuada si tu trabajo se enfoca en el diseño o la programación, pero no en ambos a la vez. Farmer es un gran ejemplo en el uso creativo y procesado lógico al unísono.

JavaScript

Más allá del Nivel Básico con Framer

Ashraff Hathibelagal

Adobe XD (Adobe Experience Design CC, anteriormente Proyecto Comet) Aunque al mismo tiempo que ofrece un excelente conjunto de herramientas para diseñar prototipos, se enfoca claramente en UX, no en crear productos puente entre el diseñador y el desarrollador. Ofrece "obra lista para la producción", pero no encontrarás fragmentos de código y detallados recursos exportables en el menú.

Adobe Experience Design

Cómo Crear un Prototipo UI Con Adobe XD

Rafiq Elmansy

Recientemente hablamos de Symply en un tutorial desde la perspectiva de un diseñador. Funciona específicamente con Photoshop y Sketch–¡Échale un vistazo!

Desarrollo de App

Cómo Transferir Diseños de Photoshop y Sketch Con Sympli

Kezz Bracey

Conclusión

Si todavía no tienes integradas ninguna de estas herramientas en tu flujo de trabajo, y te enfrentas a un reto continuo en el desarrollo de los diseños de tus sitios web, te sugiero encarecidamenteque eches un vistazo a las herramientas mencionadas anteriormente Al menos, ¡dáles una oportunidad! Al final, el pequeño costo mensual (o adquisición) te ahorrará un tiempo considerable empleado en pasos atrás y hacia delante con tus colaboradores.