Tutoriales de croquis

Todo lo que necesita saber sobre el nuevo administrador de sistemas de diseño de InVision, incluido cómo crear uno

Colaboración en equipo, simplificada.

Su nombre ahora puede sonar familiar, pero Ransom E. Olds es considerado por muchos como el fundador de la industria automotriz y patriarca de la producción en masa. ¿Quizás has oído hablar del Oldsmobile? Él es ese chico.

A este pionero olvidado se le atribuye el desarrollo de la línea de montaje, que lo ayudó a construir el primer automóvil producido en serie del mundo, el Oldsmobile Curved Dash. ¡Ahora hay un auto!

El crédito por la invención de la línea de ensamblaje a menudo recae en Henry Ford debido a una adición muy crítica: Ford puso los automóviles en una especie de transportador, creando la importante línea de ensamblaje móvil.

La línea de montaje es una de las innovaciones más extraordinarias jamás desarrolladas. Por primera vez, los productos pueden ensamblarse de manera rápida y consistente sin sacrificar la calidad. No había conjeturas: los productos que salían de la línea tenían el mismo aspecto y funcionaban igual, todas las veces.

El concepto se ha mejorado y adaptado en todas las industrias para acelerar la producción y mejorar la producción, y finalmente se ha introducido en la práctica de diseño convencional con sistemas de diseño.

El tiempo justo

Si está creando productos digitales a escala con un equipo de diseño interno de más de una persona, podría ser el momento de comenzar a construir un sistema de diseño.

Existen diversos niveles de sofisticación y complejidad, pero todos los sistemas incluyen algún tipo de colección de elementos y componentes reutilizables. Cuando se haya decidido por un conjunto elemental de piezas de diseño, puede comenzar a codificar cómo y cuándo se utilizarán, y guardarlas en una ubicación central para que su equipo de diseño las fabrique al estilo de línea de ensamblaje.

InVision Design System Manager (DSM)

Estamos atravesando una revolución industrial en la que se lanzan nuevas herramientas de diseño todos los días, y puede ser difícil ver a través del desorden.

Después de examinar varias herramientas, finalmente terminé volviendo al complemento InVision DSM porque InVision ha sido y siempre será central en nuestro flujo de trabajo de entrega de diseño. Simplemente tenía sentido para mí permanecer en el ecosistema.

Nota: No me he cambiado a Studio porque mi agencia está muy arraigada en Sketch. En este momento, sería un cambio costoso, pero no lo descartamos. Escucho grandes cosas, y el tiempo puede ser más adecuado en el futuro.

DSM es el Ford de los sistemas de diseño, que ofrece una mejora en el concepto que hace que sea más fácil actualizar y escalar un sistema de diseño sin abandonar su herramienta de diseño de elección.

¿Por qué no solo usar Sketch Libraries?

Pregunta totalmente comprensible: pregunté lo mismo. He aquí por qué me gusta:

  • Interfaz de arrastrar y soltar
  • Puedes buscar componentes
  • Los símbolos se organizan visualmente en una caja de herramientas.
  • Compartir equipo es más simple
  • Historial de versiones y despliegue de versiones
  • Guía de estilo en línea generada automáticamente

Construyendo su sistema de diseño

Analicemos cada paso requerido para construir su sistema de diseño en InVision DSM. Vale la pena señalar que los sistemas de diseño completos generalmente incluyen diseño, filosofía y código. Cubriré la parte de diseño en este artículo, pero solo reconozco que es solo una parte de una línea de ensamblaje más grande.

Asumiré que ya ha desarrollado sus estilos y símbolos ... si aún no lo ha hecho, no dude en seguir usando Render, el sistema de diseño de muestra proporcionado por InVision DSM.

Abra el archivo de bosquejo de su sistema de diseño donde ha estado construyendo los diversos componentes de su sistema de diseño, y comencemos.

Paso 1: crear una biblioteca

Dirígete a tu panel web InVision y haz clic en DSM.

De la misma manera que necesita crear un nuevo Proyecto InVision antes de comenzar a sincronizar pantallas, tenemos que crear una nueva biblioteca de sistema de diseño. A medida que su sistema de diseño crece, es una buena práctica dividir en compartimientos los componentes de su sistema en varias bibliotecas: una para escritorio, otra para iOS móvil, una para Android móvil, una para componentes principales, una para componentes específicos del producto, etc.

Haga clic en Crear nueva biblioteca para comenzar:

Paso 2: descargando el complemento

Su "caparazón" del sistema de diseño está listo y es hora de comenzar a llenarlo con elementos, componentes y estilos guardados.

Descargue e instale el complemento InVision Craft si aún no lo ha hecho. Si nunca lo ha usado antes, es posible que se confunda al abrir la aplicación porque no ve que se inicie nada. Lo encontrarás en la barra de menú de tu Mac.

Asegúrese de activar la herramienta DSM en la pestaña Herramientas en la parte superior.

Si lo instaló correctamente, verá una nueva barra de herramientas vertical dentro de Sketch:

Paso 3: Comprender las secciones de la biblioteca

Haga clic en la forma del diente en la parte inferior (puede estar en un lugar diferente dependiendo de las herramientas que haya activado en Craft Manager). Verá que la caja de herramientas DSM se abre en una nueva ventana, y su nuevo shell de biblioteca ya debería estar seleccionado:

Consejo profesional: ¡Muestre y oculte esta ventana presionando Comando + L!

Una biblioteca DSM se divide en cinco secciones (llamadas "Carpetas") de forma predeterminada:

  • Colores: aquí es donde colocará todos los colores utilizados en su sistema
  • Estilos de texto: aquí es donde colocará todos los estilos de texto guardados
  • Estilos de capa: aquí es donde colocará todos los estilos de capa guardados (rellenos, bordes, sombras, etc.)
  • Iconos: aquí es donde puede organizar todos los símbolos de iconos del sistema de diseño.
  • Componentes: aquí es donde colocará todos sus símbolos.

Carpetas

Las carpetas son probablemente la herramienta más conveniente en DSM porque le permiten organizar cuidadosamente las piezas de su sistema de diseño para que tengan sentido para todos los que lo usan. Incluso puede crear carpetas dentro de otras carpetas para agregar una organización más profunda (actualmente limitada a dos niveles de anidamiento).

Paso 4: Agregar colores

Seleccione la carpeta Colores y haga clic en el botón + en la parte inferior derecha. Aparecerá un modal pidiéndole que nombre esta paleta de colores. Puede tener múltiples paletas de colores según su sistema de color, así que siéntase libre de crear una o varias.

DSM escaneará su documento para encontrar todos los colores que usa. Seleccione cuáles desea agregar a esta paleta, luego haga clic en Agregar colores.

Haga clic en el texto debajo de la muestra de color para cambiar el nombre de sus colores a algo un poco más útil:

DSM le permite agregar descripciones a los componentes de su biblioteca, lo cual es excelente para agregar pautas de uso y principios de diseño:

El editor de texto enriquecido es bastante tonto: no tengo que hackearlo con mi propio formato de cosecha propia.

Paso 5: Agregar estilos de texto

Si aún no está utilizando estilos de texto, le ruego que comience de inmediato. Cuando diseña productos utilizando estilos de texto, hace que sea increíblemente fácil realizar actualizaciones de todo el archivo a la fuente simplemente actualizando el estilo y luego sincronizando.

De todos modos, agregar estilos de texto es muy fácil porque DSM lo hace todo por usted. Haga clic en la carpeta Estilos de texto, luego haga clic en el botón + en la parte inferior derecha:

Parece que está sacando duplicados, pero no lo está. ¡Tengo dos estilos de texto configurados para la alineación izquierda y centro!

DSM detectará automáticamente cada estilo de texto en su documento. Simplemente haga clic en Seleccionar todo y Agregar estilos de texto.

Paso 6: Agregar estilos de capa

Haga clic en la carpeta Estilos de capa, luego repita el paso anterior. ¡Muy fácil!

Paso 7: Agregar iconos

Es importante tener en cuenta que los iconos no tienen que ser símbolos para agregarlos a su biblioteca DSM.

!!! ¡Una nota muy MUY importante!
DSM admite el anidamiento profundo en símbolos. Esto significa que si está utilizando la técnica de símbolo de color para permitirle cambiar el color de sus iconos, DSM eliminará automáticamente su archivo para todos los símbolos anidados y los importará automáticamente a la biblioteca. Esto significa que no necesita importar sus símbolos de color. Solo importe sus compuestos de símbolos finales ... no los símbolos anidados individuales que conforman el componente final.

Haga clic en la carpeta Iconos, seleccione una capa de icono o símbolo, luego haga clic en el botón + para agregar. Nota: Puede seleccionar varios íconos a la vez y agregarlos de una sola vez. No es necesario hacerlos uno a la vez. Uf.

Le recomiendo que se tome un tiempo para organizar sus iconos en una estructura de subcarpetas comprensible. Hará que sea más fácil encontrarlos más tarde:

Normalmente divido el mío en lo siguiente:

  • Iconos de aplicaciones: iconos de productos para cosas como Twitter y Facebook.
  • Iconos de la interfaz de usuario: iconos de la interfaz de usuario estándar como configuración, eliminar, perfil de usuario, etc.
  • Alternar iconos: cosas como casillas de verificación, radios e interruptores.
  • Varios íconos: cualquier otra cosa que no se ajuste a las categorías anteriores.

Paso 8: Agregar componentes

¡Ya deberías tener el truco! Haga clic en la carpeta Componentes, luego haga clic en el botón + para comenzar a agregar sus elementos y componentes reutilizables.

Aquí es donde querrás estar súper organizado con la estructura de tu carpeta:

Recuerde, DSM importará automáticamente cualquier símbolo profundamente anidado que componga sus compuestos de símbolos más grandes, por lo que solo tiene que importar el "componente final" en DSM:

Los chips de arriba tienen muchos símbolos anidados para permitir elegir diferentes estilos de avatar (imagen, iniciales, iconos), color de chip y color de texto. Solo tuve que importar mi símbolo de chip final en DSM. Cuando estoy usando chips de mi sistema de diseño en otro archivo, DSM traerá todos esos símbolos anidados, incluidos los símbolos anidados que tengan el mismo tamaño de mesa de trabajo.

Es realmente muy agradable.

Paso 9: Implementación y uso del sistema

Cuando haya terminado de agregar todos los componentes necesarios a su sistema de diseño, ¡estarán disponibles instantáneamente para todos en su equipo! Solo tendrán que hacer clic en sincronización para actualizar su archivo con lo último y mejor de la biblioteca DSM compartida.

En el plan Enterprise, podrá hacer algunas cosas más sofisticadas, como el control de versiones de la biblioteca, los permisos de usuario y el control de acceso a la biblioteca.

Si está en el plan empresarial y desea lanzar una nueva versión, simplemente haga clic en el menú desplegable en la esquina superior izquierda, luego elija Lanzar nueva versión ...

Su nueva versión del sistema de diseño ahora existe, y si ya ha lanzado una anterior, puede ver qué ha cambiado haciendo clic en Historial de versiones ...

Esto lo llevará a una vista web de su registro de cambios, tal como lo verá cuando actualice una aplicación en su computadora:

Realmente deberías tratar de ser mucho más detallado y detallado de lo que estaba en la captura de pantalla anterior para que tu equipo sepa lo que ha cambiado.

Hablando de equipo, probablemente quieras invitar a otros diseñadores a usar, editar y administrar tu nueva biblioteca DSM.

Desde su biblioteca en la interfaz web, haga clic en el botón Invitar en la esquina superior derecha de la pantalla. Verás un popover donde puedes invitar a otros diseñadores.

Nota: Si está en el plan Enterprise, tendrá la capacidad adicional de invitar a los usuarios a Ver, Editar o Administrar (administrar) esta biblioteca.

También puede visitar la pestaña Personas en la pantalla de inicio de DSM para ver, editar y agregar colaboradores a sus bibliotecas.

Estos permisos y roles solo están disponibles en el plan Enterprise.

También puede saltar rápidamente a esta página desde el complemento DSM:

Paso 10: Actualizando su sistema

Como usted es el "bibliotecario maestro" de su nuevo sistema de diseño, tiene sentido que desee realizar actualizaciones de vez en cuando, ya sea agregando nuevos componentes o actualizando los existentes.

Haga clic en la carpeta que contiene el componente que desea actualizar, luego haga clic en el botón +. Si DSM detecta que el símbolo ya existe, obtendrá un cuadro de diálogo que se ve así:

Decida si desea Crear nuevo o Reemplazar existente, y el cambio se propagará a su biblioteca DSM:

Cuando se realizan actualizaciones en su biblioteca, los miembros de su equipo de diseño recibirán una notificación de que los componentes se han actualizado:

Todo lo que tienen que hacer es hacer clic en Sincronizar biblioteca para documentar y los cambios se reflejarán en su documento, con todas las anulaciones existentes (como texto) preservadas:

Nota lateral realmente rápida: cualquier persona que no debería estar hurgando en los símbolos de la biblioteca puede configurarse para ser un Visor en lugar de un Administrador o Editor dentro de los permisos de colaborador. ¡Proteja su sistema de cualquier cambio no deseado!

Resumen

En este artículo, aprendimos cómo crear una biblioteca, instalar el complemento Craft, construir su biblioteca e implementar su sistema. ¡Usted y su equipo ahora están listos para comenzar a usar su nuevo sistema de diseño!

Ayudé a InVision a crear un sistema de diseño de muestra llamado Render para que pueda ver lo bonito que se ve en su vista web. Descargue el archivo Sketch y el complemento Craft, y puede comenzar a armar su propia biblioteca con la herramienta DSM utilizando el sistema Render como punto de partida.

¡Haga clic arriba para ver el Sistema de diseño completo en InVision!

Cuando no estoy construyendo sistemas de diseño, estoy trabajando en herramientas de Sketch en UX Power Tools para hacerte un diseñador mejor y más eficiente.

Sigue a UX Power Tools en Twitter
Sigueme en Twitter
Saluda en LinkedIn
Aprende algunas cosas del blog de mi agencia