Cómo construimos todos los procesos de desarrollo e implementación del diseño en torno a una herramienta.
Hola Soy Vanya Solovyov , directora de diseño de DocDoc (parte del grupo Sberbank). Hoy es la columna Tim-Tim, en la que describiré cómo nos llevamos con otros equipos.
En 2017, nuestras interfaces se crearon en Sketch , los prototipos se ensamblaron en Marvel y el desarrollo se pasó a través de Zeplin . Todo era estándar para la época hasta que apareció Figma .
Este artículo no trata de comparar herramientas, tales artículos ya se han escrito en abundancia. Ella trata sobre cómo en nuestra compañía Figma ayudó:
- diseñar para hacerse público, y no el privilegio de un diseñador;
- organizar todo el proceso de trabajo de diseño sin documentación innecesaria;
- Deshágase de herramientas y recursos innecesarios para apoyarlos.
Para el diseñador
El diseñador ya no almacena diseños localmente, como archivos. No intercambia capturas de pantalla de las interfaces con el administrador y no envía los diseños necesarios a otros diseñadores. El diseño tiene un enlace y está disponible para todos los participantes en el proceso.
Creó una maqueta → ensambló un prototipo interactivo → lo entregó al desarrollo, y todo esto por un enlace.
El proceso de creación del diseño dejó de ir "más allá de los siete sellos", se hizo público. Un caso común en nuestro trabajo: el diseñador crea una interfaz, otro participante en la tarea ingresa al diseño y deja su consejo en forma de comentario.
En Figma, es conveniente no solo mantener sus diseños, utilizar un sistema de diseño común, sino también interactuar con desarrolladores, evaluadores y gerentes. Cuando un equipo de producto ve una característica, es muy importante no producir versiones innecesarias y estados de diseño para no ralentizar a todo el equipo. Andrey Goranov, diseñador.
Para el gerente
Tenemos siete gerentes de producto y cada uno es líder en su propia área. Para su comodidad, organizamos los archivos de tal manera que todos tengan su propio proyecto en Figma : una cita con un médico, diagnósticos, telemedicina, etc. Un enlace es suficiente para que todos los desarrollos en sus tareas estén a la mano.
Ejemplo de proyecto de telemedicina
Aportan mejoras en forma de comentarios a la parte necesaria del diseño. Decidimos conjuntamente que no aceptaremos grandes ediciones en ningún lugar: ni en los protocolos, ni en Jira , ni en los mensajeros. En el comentario, se menciona al diseñador necesario y se le envía una notificación por correo.
Todo se almacena en línea, no se preocupe, ya que no tendrá acceso al diseño, trabajando desde otra computadora. Sé con certeza que las mejoras solo se pueden poner en forma de un comentario en el diseño y se realizarán. Esto es genial Además, el historial de comentarios le permite restaurar eventos. Grisha Garshin, gerente
Para desarrolladores y probadores
Anteriormente, cuando pasábamos los diseños a los desarrolladores a través de Zeplin , ellos y los diseñadores tenían una idea diferente sobre los diseños. Los diseñadores vieron una imagen completa de las transiciones en Sketch , y los desarrolladores solo una pantalla específica en Zeplin . Los chicos no siempre entendieron qué pantalla seguir, y pasaron un tiempo cuestionando.
Los desarrolladores solo vieron un diseño específico en Zeplin
En Figma, los desarrolladores ven exactamente la misma imagen que los diseñadores. Para la unidad, nos adherimos a dicha organización de diseños: transiciones horizontales entre pantallas, pantallas verticales en el interior. Esto ayudó a los muchachos a sentirse "en casa" en las maquetas.
Transiciones horizontales entre pantallas, verticales - pantallas interiores
Es conveniente que todos los diseños estén en un solo lugar y que todos tengan acceso, es cómodo hacer una revisión, hay comentarios. Los diseños son siempre relevantes y en la misma forma para todos los participantes, es conveniente que los diseños separados para iOS y Android . Otra cosa interesante es que puede hacer un enlace a una pantalla específica e insertarlo en la documentación. Irina Mukhina, tester.
Usamos los mismos nombres de variables en colores y estilos, esto ayuda a no producir entidades innecesarias en el diseño de la interfaz. Los desarrolladores pueden descargar independientemente cualquier elemento en el diseño, sin perder tiempo pidiéndole al diseñador que lo haga. Por ejemplo, puede obtener el código svg para el icono o exportarlo en el formato deseado.
Cuando te acostumbras a servicios en línea como Figma , las herramientas anteriores parecen primitivas y muy distantes. Sin alojamiento de archivos, problemas de licencia, instalación de software, solo un enlace a la descripción de la tarea en Jira . Para obtener los estilos CSS de un elemento, dos clics son suficientes. Peter Dorozhkin, desarrollador.
Para un vendedor
También realizamos tareas de marketing web en Figma . Tienen su propio proyecto, donde se almacenan todos los diseños. Por lo tanto, los diseñadores de marketing son más fáciles de adherir a nuestra identidad corporativa: todos los elementos están en Figma .
¿Encuentra el stock que hizo en el otoño de 2018? Pf, fácil!
Funciona bien y viceversa: el diseñador de marketing dibujó ilustraciones, las transfirió a Figma . El diseñador del producto los llevó a su interfaz y, si es necesario, ajustó un poco la forma y el color, porque todo es vectorial.
Actualmente estamos trabajando en un diseñador de ilustraciones en Figma.
Es fácil explicarle al diseñador dónde y qué elementos visuales deben cambiarse / eliminarse / agregarse. En lugar de mil palabras, puede mostrar una vez dónde y qué debe hacerse. Los diseñadores pueden volver a estos comentarios en cualquier momento conveniente para ellos. Katya Fedyunina, comercializadora
Y cuando la tarea de marketing, pero se relaciona directamente con el producto, el trabajo en equipo de diseñadores de dos departamentos pasa a un nuevo nivel. A uno se le ocurre un concepto visual, el otro prueba una interfaz, ¡todo en un diseño y al mismo tiempo!
Pensamiento principal
El diseño es el resultado del trabajo del equipo, no solo de una persona. Esfuércese por asegurarse de que cada participante pueda interactuar con él cómodamente. Aléjese de las herramientas locales y busque las que lo conectan con sus procesos.