Derrota la Parálisis de Decisión: Construyendo un Asesino Sistema de Diseño en Aislamiento

¡Hola, amigos! Mi nombre es Sean Evening. Mis pronombres son él, él, y estoy basado en Hamilton, Ontario, Canadá. Estoy aquí para hablarles hoy sobre cómo vencer la parálisis de decisión al construir sistemas de diseño. Entonces, vamos a profundizar. Con todo lo que un sistema de diseño puede ser, es realmente difícil saber por dónde empezar. ¿Cómo debería ser mi paleta de colores? ¿Cómo hago que esto funcione para el modo oscuro? ¿Debería tener un modo de alto contraste? ¿Qué tipo de fuentes debería usar? ¿Cómo se va a ver esto en móvil? ¿Idiomas como el francés y el alemán van a romper mis diseños? ¿Cómo voy a probar todo esto? Y muy pronto, si eres algo como yo, estás listo para desechar todo y llorar en un rincón. Pero no te preocupes, tengo algunos consejos para ti. En primer lugar, deja de tomar tantas decisiones al principio. Buenos ejemplos de esto serían si no vas a tener acciones asíncronas, no definas estados de carga, éxito, o fracaso. Ni siquiera necesitarías describir colores de éxito y error de esa manera. Si no vas a usar sombra de caja, no definas una escala de elevación. En pocas palabras, si no lo necesitas, olvídalo. Siempre puedes volver a ello más tarde. Y recuerda, ninguna decisión es permanente. A diferencia de este tatuaje de mano jQuery. Si no estás satisfecho, puedes cambiar estas cosas más tarde. A menos que realmente importe, no dejes que una decisión o la falta de una sea un obstáculo para que avances a la siguiente cosa. Mi próximo consejo es que dejes que algunas herramientas tomen algunas decisiones por ti. Al menos para empezar. No hay necesidad de reinventar la rueda. Hay muchas herramientas geniales por ahí para ayudarte a empezar. Y no hay respuestas incorrectas. Que es quizás parte del problema. Tenemos Tailwind CSS tiene grandes escalas de color, fuente y espaciado. Podrías usar Redux UI. Tienen grandes componentes accesibles sin estilo. Y Shadcn en realidad junta esos dos para darte algunos componentes realmente hermosos para empezar que son muy personalizables. Básicamente, solo copian y pegan el código del componente en tu base de código para ti. Es realmente, realmente genial.

Entonces, ¿cuáles son algunos conceptos básicos? Para empezar, vamos a necesitar algunos colores. Estoy hablando de escala de grises y de colores primarios y secundarios. Tu escala de tipografía. Una escala de espaciado. Y cualquier otra cosa que sea crítica para tu caso de uso. Por ejemplo, si estás creando una aplicación de clima, podrías necesitar crear una escala de color de temperatura. Pero si no estás creando una aplicación de temperatura o de clima, no te preocupes por nada relacionado con las temperaturas. Pero antes de ir más lejos, solo quiero cubrir el tema de los tokens de design. Ahora, los tokens de design son una forma de expresar las decisiones de design como data. Como mínimo, un token de design es un nombre y un par de valores que pueden expresar eso. Entonces, tenemos nuestro nombre, que es como una referencia global al valor. Tenemos el valor en sí, el valor bruto. Y también puedes tener alias que hacen referencia a esos tokens con un nombre más descriptivo para un contexto particular. Y entraremos en eso pronto. Por ejemplo, aquí hay algunos ejemplos de Tailwind en la escala de color Sky Blue. Tenemos sky 50, que tiene un valor de F0F9FF. Pero podríamos aliasarlo como acento primario. Y Sky 500 aquí tiene un valor de 0EA5E9, pero podríamos querer aliasarlo como base primaria. Ahora, mientras estamos en el tema, hablemos de colores. En primer lugar, pensemos en lo que necesitamos. Podemos usar escalas accesibles ya existentes, de nuevo, como Tailwind. Queremos elegir una escala de grises. Resulta que hay varias escalas de grises diferentes que podrías usar, con diferentes tonos de azul o rojo o lo que sea. Usemos una. Y luego vamos a elegir nuestro color primario y secundario. Aquí hay un ejemplo de cómo he armado esto en Storybook. Estoy usando tres escalas de Tailwind. Tengo su gris, que es más neutral. Tengo la escala de rosa y la escala de cielo. Ahora, tener de 50 a 950 es bastante. Y podrías estar pensando, ¿qué vamos a hacer con todos estos colores? Bueno, solo porque se nos ha dado una escala completa no significa que tengamos que

necesitamos usar todo. Así que lo que voy a hacer es tomar algunos de esos colores y voy a darles alias para darnos una idea de para qué se utilizan. Así que puedes ver para la escala de grises tengo fondo, que era 50. Vamos a tener el acento de fondo, que creo que era 200. Y primer plano, que era 900. Así que he reducido los colores aquí y les he dado nombres más específicos. Aunque desplazamiento y activo y primario y secundario probablemente sea bastante explicativo, para qué se va a utilizar. También tenemos fondo

acento de fondo y el color base, también. Entonces, hablemos un poco sobre la tipografía a continuación. Escogiendo tu escala de tipo. ¿Qué queremos decir cuando necesitamos una escala de tipo? Son los tamaños de tus fuentes. Siempre me adhiero a un encabezado de visualización y subtítulo. Piensa en eso como un héroe. Lo llamaron Jumbotron. Quieres tus tamaños para tus niveles de encabezado. Uno a través de seis. Ahora, solo porque tenemos etiquetas h1 a h6, te animaría a mantener las dos separadas. Puedes querer estilizarlas por defecto usando esta escala. Pero recuerda que tus etiquetas de encabezado son una jerarquía semántica para un documento. Entonces, no sientas que necesitas mantener el estilo atado a la etiqueta en sí misma para propósitos de design. Y lo último que vamos a necesitar es averiguar nuestro estilo de párrafo también. Entonces, ¿cómo hacemos esto? De nuevo, podemos usar una existente Estoy usando nuevamente la escala de tamaño de fuente de Tailwind y la personalizaré a medida que avance. Hablaré sobre eso pronto. Pero primero y ante todo, encuentra tu fuente más tarde. Si no tienes experiencia en escoger fuentes como yo, hay tantas para pasar por alto, incluyendo algunas de estas horrendas joyas en la pantalla aquí. Entonces, adelante y simplemente pon eso a un lado para más tarde. Eso es una tarea en sí misma. Entonces, habiendo dicho todo eso, aquí está mi ejemplo en Storybook. Puedes ver que tengo mi encabezado de visualización y subtítulo y va todo el camino hacia abajo, encabezado 1 a través de 6. Eso está un poco cortado allí. Pero ahora que tenemos esto mostrado en Storybook, si hago cambios a esta escala más tarde, tengo un lugar para ver todo cambiar en un solo lugar. Muy agradable. Entonces, por último, hablemos sobre la escala de espaciado. Ahora, desafortunadamente, esto nos dio un poco demasiado difícil de pegar mi cara en él. Vas a tener que lidiar con Ron Atkinson. Pero me desvío. Cuando estás eligiendo una escala de espaciado, de nuevo, usa algo existente.

De nuevo, estoy usando Tailwind en este ejemplo, pero lo simplifico un poco. Su escala es muy, muy extensa. Realmente probablemente no necesitas todo, así que comienza con un pequeño fragmento de ella. Y aquí es lo que podría parecer en Storybook. Hice un rápido componente para mostrar cómo podría verse el tamaño allí.

Pero ahora tenemos nuestras piezas fundamentales que necesitamos para comenzar a construir algunos componentes. Entonces, ¿qué hacemos a continuación? Bueno, en primer lugar, solo construye lo que necesitas. No tengas miedo de usar componentes existentes y estilizarlos a tu gusto más tarde. Y también no olvides, construye de forma aislada en Storybook para probar tus diferentes estados y variaciones. Así que vamos a echar un vistazo rápido a lo que he hecho aquí. Puedes ver que he hecho un botón con estilos primarios y secundarios. También he hecho uno para un enlace. También hice una tarjeta. Puedes ver en esta tarjeta primaria aquí, puedes ver que estoy usando los diferentes tonos de rosa que creé en mi escala aquí. Tenemos el fondo, tenemos el borde, tenemos la base en aquí, y también estamos usando el primer plano para parte del texto. Y ahí lo tienes. También utilicé shadcn aquí para poder generar gran parte de este código con anticipación. Y luego utilicé mi design sistema, mis colores, y mi espaciado, y todo para hacer que parezca y se sienta como un sistema completo aquí. Bueno, completo en el sentido que he demostrado. Definitivamente no es un sistema de design completo aún. Pero eso está bien. Porque esto es todo lo que necesito por ahora.

Entonces, para concluir, comienza con lo básico. Siempre puedes ajustar cosas más tarde. No olvides utilizar herramientas existentes para evitar comenzar desde cero. Y también, mientras lo haces, simplemente diviértete con ello. Pero eso es todo por mi parte. Muchas gracias. Puedes encontrarme en estas plataformas de redes sociales aquí. Y si quieres echar un vistazo a algunos de los ejemplos de código del storybook que mostré, tengo el enlace en la parte inferior aquí para que revises ese repositorio. Muchas gracias. Cuídate. Adiós.