Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Cómo Colaborar con Tu Equipo Usando Sketch

by
Length:ShortLanguages:

Spanish (Español) translation by Luigi Pizarro (you can also view the original English article)

A menudo dedico mi tiempo libre navegando en internet, buscando recursos y artículos útiles sobre Sketch – cualquier cosa que pueda ayudar a mejorar mi flujo de trabajo de diseño e inspirarme para escribir mis propios artículos. Dos temas de discusión que encuentro regularmente son "Pero Sketch es sólo para usuarios de Mac, ¿qué puedo hacer si tengo un equipo Windows?" o "Chicos, ¿cuáles son las mejores practicas que hay para un buen flujo de trabajo en equipo con Sketch?"

Permítanme compartir con ustedes algunas ideas, enlaces y recursos que los ayudarán con estas preguntas. La colaboración, merece una mirada profunda si estás pensando introducir Sketch dentro del flujo de trabajo de tu equipo, o si necesitas compartir tus diseños con los desarrolladores.

1. Un Flujo de Trabajo "Tradicional" para Compartir

Esta es fácil, siempre y cuando cada persona involucrada en el proyecto tenga un Mac: comparte tus archivos .sketch con ellos! Asegúrate, también, de poner a disposición todos los recursos (assets) necesarios, como fuentes no estándar o cualquier documentación que explique el diseño.

Photoshop viene con bibliotecas de Adobe y objetos inteligentes enlazados para mantener tus componentes actualizados a través de múltiples documentos y autores, y funciona muy bien. Desafortunadamente, características como "estilos compartidos" a través de diferentes archivos, o incluso una biblioteca externa de símbolos, son cosas que Sketch no ofrece por ahora. Por lo tanto, es realmente útil si pasas algún tiempo creando una guía de estilos (style guide) con el fin de mantener la consistencia en todo el sitio web o aplicación que deseas diseñar. Considera cosas como Style Inventory, Sketch Measure o Sketch Notebook para compartir todos los detalles de los recursos (assets). ¡Tus compañeros de equipo te lo agradecerán!

Using Sketch Measure to add anotations

Un ejemplo común de un flujo de trabajo tradicional para compartir es este escenario que he visto en SketchTalk.io:

"Actualmente mantenemos un documento maestro centralizado en nuestro servidor, y cada uno de nosotros copia ese documento para trabajar localmente. Luego de que las versiones locales llegan a un estado lo suficientemente completo, nosotros copiamos y pegamos las mesas de trabajo de nuevo en el documento maestro." – JohnnyMuir

Tal vez estas trabajando remotamente, por lo que compartir de forma local no es una opción. Prueba con el correo electrónico, FTP o una solución en la nube para compartir tus archivos Sketch. Utiliza los adjuntos del correo sólo si vas a enviar diseños completos que no necesitarán muchos cambios en el camino. Considera compartir tus archivos usando servicios como Google Drive, Dropbox o incluso Github; estos te darán acceso a versiones de tus documentos.

2. Usando Enlaces Simbólicos (Symlinks) y Compartiendo en la Nube

Vamos a ir un paso más adelante en nuestro flujo de trabajo tradicional para compartir, con servicios de almacenamiento en la nube, pero esta vez aprovechando las plantillas compartidas. Ya sabemos que los símbolos y las plantillas son geniales (ver nuestro tutorial Usando Símbolos y Plantillas de Sketch). Ahora vamos a darle un vistazo a esta idea de Jean Paul Bondy en SketchTalk.io:

Estoy usando enlaces simbólicos (Symlink) y Dropbox para compartir plantillas de Sketch, en lugar de que cada persona las tenga localmente." – JeanPaulBondy

¡Bien jugado! Por defecto, Sketch busca en la carpeta de plantillas en nuestro disco duro local, pero usando un enlace simbólico (un enlace "suave"), se puede redirigir a una carpeta Dropbox donde pondremos los archivos de las plantillas. ¡Brillante! Más información sobre enlaces simbólicos en Wikipedia.

Sketch files in Dropbox

Al hacer esto, no tenemos que enviar las plantillas por correo electrónico a todos los otros diseñadores, luego, enviar por correo electrónico de nuevo las actualizaciones. Cuando un diseñador crea un nuevo documento desde una plantilla, Sketch busca en el directorio de plantillas pero nuestro enlace simbólico apuntará a la carpeta de Dropbox y cargara la última versión actualizada.

Cómo Configurar un Enlace Simbólico

Para crear un enlace simbólico, abre la Terminal. Vamos a utilizar el comando ln más el modificador -s El comando “ln” se utiliza para crear enlaces duros. "ln -s" crea enlaces simbólicos.

Paso 1

Vamos a configurar un ejemplo: digamos que quieres sincronizar un solo archivo .sketch ubicado en una carpeta pública de tu Dropbox llamada "words". Primero, vas a Sketch y seleccionas la opción Reveal Plugins Folder debajo del menú Plugins para asegurarte de la ubicación de tu directorio de plantillas. Deberías ver una carpeta "Templates" ya creada. Crea una ahora si no la ves.

La ubicación entera debería verse algo así como /Library/Containers/com.bohemiancoding.sketch3/Data/Library/Application Support/com.bohemiancoding.sketch3/Templates/ Support/com.bohemiancoding.sketch3/Templates/  o /Library/Application Support/com.bohemiancoding.sketch3/Templates.

Paso 2

Ahora ya sabemos el nombre y la ubicación de nuestro archivo sketch y donde esta la carpeta local de plantillas, volvamos a la terminal. El código que tienes que escribir debe ser:

Presiona Enter. Cuando vuelvas a Sketch, de nuevo, deberías ver una nueva opción bajo la opción New From Template en el menú principal.

Symlink in Sketch

Alternativamente, puedes revisar otras herramientas como Droplink o MacDropAny para sincronizar cualquier archivo o carpeta en tu Mac con Dropbox.

Nota: desafortunadamente, cuando actualizas una plantilla que contiene símbolos, los archivos que ya han sido creados con esos símbolos no se actualizarán automáticamente. Esperemos una solución de los chicos de Bohemian Coding en futuras versiones de Sketch!

Usar servicios de almacenamiento en la nube como Dropbox también nos ayuda a trabajar con otras herramientas como Invision y Marvel, que ofrecen integración con Sketch. Denle un vistazo a nuestros tutoriales de Invision y nuestra introducción para usar Marvel para aprender más.

3. Compartiendo Archivos Sketch con Usuarios de Windows

Debes saber que por ahora sólo es posible diseñar usando Sketch si trabajas en Mac. Sin embargo, si tu diseño está listo y tienes que enviarlo a un desarrollador que tiene la tarea de construir el diseño, ellos también necesitan una manera de acceder al contenido de tus archivos de diseño.

Tu puedes preparar todos estos recursos por tí mismo, o usar un flujo de trabajo diferente, introduciendo Avocode a tu equipo de desarrollo.

Avocode website

Usando Avocode, tu puedes subir tus archivos sketch y compartirlos con otras personas, luego, usando la aplicación de Avocode, ellos verán todos los contenidos, ¡incluso si están usando Windows o Linux!

Necesitarás el plugin Avocode Sketch (Sketch 3.2+ necesario) para subir tus archivos de diseño de Sketch en la aplicación, luego comparte el proyecto con el resto del equipo.

Sketch file opened in Avocode app

Dale un vistazo a nuestro tutorial a fondo acerca de la inspección de archivos usado Avocode para aprender más

Alternativamente, revisa Zeplin, otro servicio interesante para inspeccionar archivos Sketch, incluso sin acceso a un Mac.

Using Zeplin to inspect sketch files

Ambos servicios ofrecen diferentes planes, precios y características, así que prueba ambos.

Espacio para Mejoras

Estos métodos son los mejores procesos que he descubierto hasta ahora en lo que respecta a trabajar con otras personas usando Sketch. Una vez dicho esto, pienso que hay espacio para mejorar estos flujos de trabajo, quizás con el lanzamiento de nuevas características en futuras versiones de Sketch. El proceso ideal sería uno en el que pudiéramos crear estilos, símbolos y plantillas en perfecta sincronización entre diferentes archivos, ¿cierto? Cruza los dedos.

¿Encontraste interesante estas ideas? ¿Tienes algunas mejoras que agregar? ¿Cómo trabajas con tu equipo? Estoy curioso. ¡Hablemos en los comentarios!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.