Para crear la aplicación, el sitio web o el producto digital perfecto, necesitamos una combinación única que haga que el producto sea agradable, conveniente, confiable y funcional. Y para crear un producto que satisfaga esta combinación de necesidades, necesitamos una colaboración extremadamente estrecha entre diseñadores y desarrolladores.
La mayoría de nosotros comenzamos un proyecto con eso en mente. Pero a medida que esto continúa y dedicamos más tiempo a trabajar en funciones, tendemos a olvidarnos de esta combinación y de la necesidad de una estrecha colaboración. El resultado es una transferencia entre diseñadores y desarrolladores que se convierte en un momento aterrador en lugar de una parte dinámica y en constante evolución del proceso.
Pasamos demasiado tiempo preparando funciones para la transferencia. Se dedican innumerables horas a capturar el trabajo realizado con comentarios como «mueve estos dos píxeles a la izquierda» o «estás usando el color hexadecimal incorrecto». Todo esto lleva mucho tiempo y, a decir verdad, no es para lo que nos registramos.
Los diseñadores quieren causar una gran impresión y los desarrolladores quieren hacer lo mismo. Ser desafiado es lo que clamamos. Y a menudo, entre lágrimas, dedicamos demasiado tiempo a la parte cotidiana de este proceso.
¿Y sabes qué? No tiene que ser de esta manera.
Hay una mejor manera de estructurar su trabajo para que sea más fácil compartir especificaciones y hablar un idioma común al hablar de ellas. Esto es lo que quiero compartir con ustedes hoy.
Pero primero: ¿por qué debería invertir tiempo en el proceso?
Muchos de ustedes pueden estar leyendo esto y preguntándose: «¿Por qué necesitamos dedicar tiempo a mejorar el proceso de transferencia de nuestro equipo?» ¿Y sabes qué? Esta es una buena pregunta. Después de todo, está ocupado con proyectos, plazos, presión de las partes interesadas y solo quiere hacer el trabajo.
Permítanme describir algunos de los beneficios que obtendrá al mejorar el proceso de transferencia.
En primer lugar, le ayudará a liberar su tiempo y ahorrar horas, si no días de trabajo con el manual -y muy tedioso- el trabajo que tienen que hacer los diseñadores y desarrolladores. Aunque no digo que todavía no creará especificaciones y documentos que acompañarán su trabajo, será mucho más fácil.
En segundo lugar, mejorar este proceso ayudará a mejorar la calidad de su producto final, ya que tendrá más tiempo para trabajar en cosas importantes. Podría ser agregar la animación que siempre ha querido, o eliminar el código mal escrito, o simplemente tener tiempo para aprender cosas nuevas que puede probar.
En tercer lugar, te ayudará a mejorar las habilidades de todos los miembros del equipo. Los diseñadores y desarrolladores harán mejor en hacer lo que deben hacer, es decir, crear cosas, en lugar de simplemente dominar el arte de leer y comprender las especificaciones de diseño.
Finalmente, los proyectos se completan más rápido y los resultados son mejores.
Bien, ¿cómo podemos mejorar nuestro proceso?
Primero, los diseñadores y desarrolladores deben trabajar juntos para resolver problemas. Sé que estamos hablando de un proceso de transferencia que suena como si fuera unidireccional (el diseño se está desarrollando), pero tiene que ser un proceso de ida y vuelta con ideas en ambas direcciones.
Si los diseñadores y desarrolladores colaboran más estrechamente que nunca, compartiendo su trabajo en diferentes etapas, se abre la puerta a más comentarios y áreas de mejora.elemento antes de llegar al final.
La creación de un sistema de diseño que sea un conjunto de componentes y piezas reutilizables que ayuden a acelerar la creación de productos digitales también mejorará el proceso de transferencia, pero puede ser costoso porque puede llevar meses, y mucho menos tiempo, para desarrollar y desarrollar. Esto requiere soporte para el sistema de diseño y, a menudo, los equipos no saben por dónde empezar cuando los crean.
Pero hay una parte del sistema de diseño que puede implementar rápidamente en sus proyectos y procesos de desarrollo para acelerar significativamente la transferencia. Se llaman fichas.
Introducción a las fichas
En un sistema de diseño, los tokens son una forma de almacenar los valores necesarios para identificar diferentes partes de un sistema de diseño. Los marcadores se pueden usar para definir colores, tipografía, espaciado, radios de borde, sombras e incluso texto o copia.
Por lo general, se almacenan en un archivo JSON y, en lugar de valores de codificación, los desarrolladores pueden usar tokens para actualizar fácilmente la apariencia de la interfaz de usuario. (Interfaz de usuario). Los tokens también se pueden comparar rápidamente con un diseño que es excelente para garantizar la coherencia entre lo que se ha desarrollado y lo que se ha desarrollado.
El hecho es que los marcadores también son fáciles de implementar, ya que la mayoría de las herramientas de diseño (como Adobe XD, Figma o Sketch) permiten a los diseñadores definir estilos (colores, tipografía, sombras, cuadrículas, etc.) que se pueden compartir fácilmente con los desarrolladores. quién puede crear rápidamente su versión en CSS o JSON, si realmente lo desea.
Usando tokens, comenzará a determinar los valores de los elementos por adelantado. yomagine túTiene la aplicación y quiere usar el tono rojo (# D0021B) como el color de los botones y otras partes de la interfaz de usuario. En lugar de codificar de forma rígida # D0021b en cualquier lugar tú quiero usar este color lo harías definir el rojo como un marcador –color rojo: # D0021B y consulte el marcador en cualquier momento tú Quiero usar el rojo como color. Atrás ennuestro botón se vería algo amor:
.button {
background-color: var(--color-red);
}
Los tokens pueden parecer un pequeño cambio. En lugar de valores de codificación duros, los define de antemano. Bien, entonces, ¿cuál es el uso de eso? Bueno, esto tiene varios beneficios, uno de los cuales hará que las cosas sean hermosas y consistentes. Debido a que los valores ya no están codificados rígidamente, esto reduce la probabilidad de estilos o valores falsos (como el color antiguo), a menudo porque las personas olvidan dónde se usó el valor.
Eso también lo hace Es fácil para todo el equipo hablar sobre los elementos que componen la interfaz de usuario en un idioma que todos entiendan. Los códigos hexadecimales, los valores RGB, etc. no son fáciles de entender o recordar para todos. Entonces, en lugar de decirle a alguien que el tono de rojo que debe usar es # D0021B, puede decir simplemente use «color rojo». Poder hablar de los colores en un lenguaje sencillo permite que todos entiendan.
Otra ventaja es que los archivos de marcadores se pueden actualizar fácilmente, por lo que si desea cambiar el tono de rojo a un tono de azul, solo necesita editar una línea de código. Y los archivos de marcadores que almacenan valores se pueden copiar simplemente a nuevos programas o proyectos.
Finalmente, la ventaja de usar tokens es que si alguna vez decide, y obtiene el apoyo de las partes interesadas, crear un sistema de diseño, ya tiene trabajo hecho para ayudarlo en su camino. Los componentes de su interfaz de usuario ya están identificados por marcadores, que es el primer paso para crear un sistema de diseño.
Cómo empezar con tokens
Como mencioné, la mayoría de las herramientas de diseño le permitirán definir estilos, por lo que lo primero que debe hacer un diseñador en un proyecto es crear estilos para todos los colores, tipografías, sombras, cuadrículas y espacios que planea usar. Por ejemplo, en mis diseños uso un estilo llamado «negro neutro» con un valor de #222c2f, que define el negro. Aplico este estilo a los colores del texto o en cualquier lugar donde quiera usar ese color.
A continuación, el desarrollador (o diseñador) creará una versión codificada de estos valores para usar en el proceso de desarrollo. Tomando nuestro ejemplo de color, tendríamos una versión codificada de negro que se vería bien –neutros-negro: # 222c2f si se creó como una variable CSS. También puede crearlo en JSON si desea escalar a otras plataformas, de modo que pueda usar el mismo token para su sitio web y aplicaciones móviles.
El diseñador debe usar estos estilos durante el diseño. interfaz de usuario y para que los desarrolladores se refieran a tokens cuando crean una interfaz de usuario. Y el desarrollador puede usar un marcador negro neutral en lugar de valores codificados.
Es importante recordar usar estilos en archivos de diseño y usar marcadores apropiados en su proyecto de desarrollo. Si no lo hace, está perdiendo el tiempo.
Dependiendo de sus necesidades, simplemente puede crearlos con Variables CSSo incluso puedes usar algo como Diccionario de estilos de Amazon para ayudarlo a definir estilos una vez y usarlos en diferentes plataformas.
O puedes ser aún más un mago y usar Figma API para crear una versión encriptada fichas De una forma u otra, la elección es tuya. Solo depende de cuánto tiempo quieras dedicarle.
Te recomendaría que empieces poco a poco y sigas adelante.
Ahora sabe que puede mejorar rápida y fácilmente el terrible proceso de transferir el diseño y el desarrollo con unos pequeños cambios en el comportamiento. por entrarEn g rotuladores para tus diseños y desarrollos. No solo afectará su diseño–el proceso de desarrollo es mejor, pero creará mejores productos y liberará tiempo para trabajar en excelentes materiales.