Sistemas de Diseño - Renovando Productos para Interfaces Consistentes

Hola, soy Talia Mirza de Pakistán. Trabajo como ingeniera de software en Karim. La mayor parte de mi experiencia gira en torno a resolver problemas complejos de UI y mejorar el front-end. Esta charla trata sobre P y vamos a hablar sobre los sistemas de diseño en esta charla. Seguramente has escuchado hablar de algunos sistemas de diseño populares como Material, Tailwind, Bootstrap o tal vez otros. En la última década, se ha visto que el diseño se ha convertido en una parte crucial del desarrollo de productos y las empresas están invirtiendo mucho en mejorar las interfaces de usuario y las experiencias de usuario de sus productos. Veamos rápidamente cuál es el enfoque de mi charla. Esta charla trata de aprender cómo el sistema de diseño será otro paso hacia la mejora del diseño y el desarrollo de productos en este momento y cómo permite la consistencia entre los productos. Exploraremos los componentes principales del sistema de diseño junto con los principales beneficios y desafíos al construir el sistema de diseño. Al final, también discutiremos brevemente si necesitas un sistema de diseño para tus productos o no. Antes de explorar los componentes principales, comencemos desde el principio. Tienes que imaginar una puerta de la casa de tus sueños. Imagina una puerta, puede ser así en tu mente o tal vez así o tal vez así o tal vez ninguna de ellas, porque todos pensamos de diferentes maneras a través de diferentes perspectivas. De manera similar, cuando hablamos de diseño para nuestros productos, tal vez para nuestro componente como un botón. Todos tendremos una imagen diferente en mente, ¿verdad? Eso lleva a interfaces de usuario inconsistentes. Entonces, para construir interfaces de usuario que sean consistentes en todos tus productos, necesitamos un sistema de diseño. Entonces, si tienes un par de productos bajo una marca, puedes tener un sistema de diseño para tu empresa. Por ejemplo, tienes un sitio web para tu negocio. Tienes un sitio de marketing. Tienes un sitio de documentación o tal vez más productos. Todos ellos deben tener consistencia en el diseño para un sistema de diseño a construir. Veamos cómo podemos construir un sistema de diseño que pueda crear consistencia en todos los productos. Hay tres componentes principales de un sistema de diseño. Estos son lenguaje de diseño, laboratorio de componentes y guía de estilo. Veámoslos en orden. Lo primero es el lenguaje de diseño. Es el primer componente que se debe crear para crear un sistema de diseño. Este es el conjunto de estándares que guían la creación de una suite de productos bajo una marca. Estas son las reglas o principios para el

base del sistema de diseño. Esto puede incluir una tipografía, color, accesibilidad, grado, movimiento, iconos, en general, la identidad de nuestro producto. Por lo tanto, necesitamos seleccionar qué tipos utilizaremos en nuestro producto, cuáles serán los tamaños válidos para las fuentes, cuáles son las opciones de color de nuestra marca como color primario o secundario o tal vez terciario. Necesitamos fijar los grados y opciones de espaciado como estándares para la accesibilidad, movimiento e iconos de los productos. Esto es a lo que nos referiremos como lenguaje de diseño. Después de eso, necesitamos codificar esos componentes que deben ser consistentes en todo el producto. Entonces, una biblioteca de componentes es una colección de componentes independientes que convierte un lenguaje de diseño en bloques de construcción de la aplicación. Por lo tanto, necesitamos crear componentes reutilizables para el producto. Todos sabemos que en esta era moderna, cuando hablamos de diseño, no creamos páginas web completas de una vez. Dividimos las interfaces de usuario en componentes que nos permiten utilizar esos componentes y trabajar más rápido. Podemos utilizar cualquier biblioteca o framework de frontend, pero para el contexto de esta charla, utilizaremos ejemplos de React. También puedes crear tu sistema de diseño en vanilla JS también. Veremos un solo componente y cómo podemos crear múltiples variantes manteniendo la consistencia. Sabemos que en React existe el concepto de props, ¿verdad? Veremos cómo las props pueden ayudarnos a crear múltiples variantes a partir de un solo componente. Creemos un componente para un botón. Todos saben cómo crear un componente de botón, pero qué props tendremos. Para un botón predeterminado como este, debemos tener algunas props requeridas como label y OnClick que manejará la funcionalidad del botón. Este será nuestro botón predeterminado. No entraré en la implementación del botón, pero lo que podemos hacer, lo veremos en estos ejemplos. Con el botón predeterminado, cuando agregamos una sola prop llamada icon, podemos tener esa opción de icono como una prop opcional, como un prop opcional de icono y podemos agregar un icono en nuestro botón a través de esta prop. También podemos tener una prop como type, que puede ayudarnos a crear un tipo primario o secundario según los colores de nuestro lenguaje de diseño. Al agregar una prop de tamaño, podemos crear algunos tamaños fijos para nuestros botones, como pequeño, mediano y grande. Con la prop de tema, podemos permitir que nuestro componente responda según el tema. Esta es la forma en que podemos agregar otra prop. Y así, estas pueden ser props para botones a través de las cuales podemos crear múltiples variantes. Observa cómo estamos creando variantes. Tenemos flexibilidad, pero somos consistentes para todos los productos. De esta manera, podemos tener consistencia de diseño y también flexibilidad para adaptarnos a los cambios a través de nuestras variantes a partir de un solo componente. En el sistema de diseño, construimos todos los componentes de la misma manera. La tercera cosa es la documentación para nuestro lenguaje de diseño y la biblioteca de componentes. Seguramente has visto múltiples documentaciones de sistemas de diseño, por lo que tiene toda la información necesaria sobre los componentes, variantes,

y nos brindan la capacidad de utilizarlos de manera eficiente. Por lo tanto, construimos nuestra guía de estilos de manera similar. Puedes ver un ejemplo de componente vinculado en el sistema de design principal. Aquí puedes ver, las props del componente, cuáles son sus vínculos, cuáles son sus valores predeterminados y qué valores puede esperar. Así es como podemos crear nuestra guía de estilos de nuestro sistema de design, y también podemos agregar la pila de tecnología que hemos utilizado, eso es opcional.

Así que vamos a concluir ahora. Los sistemas de design nos permiten, ¿qué beneficios? Estos son los beneficios que podemos obtener al construir el sistema de design. En primer lugar, la identidad de marca, la consistencia en todos los productos, la flexibilidad para adaptarse a los cambios a través de nuestras variantes, la capacidad de respuesta en todos los dispositivos, los estándares de accessibility. Podemos aumentar la velocidad de desarrollo, podemos tener una única fuente de crecimiento, por lo que el mantenimiento es fácil, está en constante evolución, por lo que podemos responder a los cambios a lo largo del tiempo a través de nuestras variantes, menos tiempo en la incorporación de nuevos empleados, por lo que tienes esta guía de estilos, puedes ver fácilmente cómo usar un solo componente y también podemos agregar ejemplos de código. Entonces, ahora vamos a los desafíos de construir un sistema de design. Construir un sistema de design lleva tiempo, no puedes construirlo una vez y usarlo para siempre. Es algo vivo que sigue evolucionando, por lo que necesita el compromiso y la dedicación del equipo y los interesados. Un sistema de design no es un proyecto, es un producto que sirve a múltiples productos, por lo que requiere el mismo compromiso que tienes con tus productos. El principal desafío no es construirlo, sino escalarlo. Por lo tanto, necesitamos la colaboración entre ingenieros, diseñadores y propietarios de productos para mejorarlo de manera iterativa con una actitud positiva hacia los comentarios para que pueda evolucionar con el tiempo. Los sistemas de design pueden tardar tiempo en volverse estables en la fase inicial. Puede llevar semanas, meses o incluso años para productos complejos, pero una vez construido, será útil para nuestra organización. Por lo tanto, el objetivo principal de un sistema de design es aumentar la velocidad de desarrollo mientras se mantiene la consistencia en todos los ámbitos. Las empresas a menudo luchan por escalar y mantener sus productos digitales de manera rápida y consistente, especialmente las grandes empresas con muchos empleados y equipos. Por lo tanto, el valor de un sistema de design se hace evidente cuando los productos se desarrollan rápidamente utilizando partes de esos sistemas. En esos escenarios, los sistemas de design se convierten en un componente crucial que incluye el desarrollo de su misión. Desafortunadamente, no todas las empresas lo ven de esa manera. En muchos casos, la inversión necesaria para crear dicho producto a menudo se considera una pérdida de tiempo y dinero, pero gracias a un creciente espacio competitivo en casi todas las industrias, la mentalidad está cambiando rápidamente impulsada por el deseo de seguir en el juego entre los gigantes. Entonces, ¿necesitas un sistema de design? Depende de si tu producto es parte de un proyecto pequeño en el que unas pocas personas trabajan en el design, tal vez no sea el momento de crear un sistema de design y gastar mucho tiempo, pero si eres parte de una gran empresa con muchos equipos diferentes que trabajan en uno o varios productos que requieren consistencia en todos los ámbitos, entonces un sistema de design podría ser una gran inversión para todos los involucrados en el equipo. Si quieres aprender más sobre los sistemas de design, estos son los excelentes recursos que he utilizado personalmente mientras construía un sistema de design para los productos de mi empresa así que siéntete libre de explorarlos y muchas gracias por escuchar ese es mi nombre de usuario en Twitter, no olvides darme comentarios sobre esta charla tú