De Nebula a Supernova: Modelos de Madurez del Sistema de Diseño

Rate this content
Bookmark

¡Los sistemas de diseño son inevitables! Juegan un papel fundamental en el desarrollo web, permitiendo a los equipos lograr consistencia, escalabilidad y eficiencia.

Únete a nosotros para una charla perspicaz y entretenida que explora el mundo de los sistemas de diseño y su evolución dentro de las organizaciones tecnológicas. En esta sesión, exploraremos y trataremos de validar un modelo de madurez de sistemas de diseño, ofreciendo orientación práctica en diferentes etapas de crecimiento. Compartiremos lecciones aprendidas y consejos de expertos sobre cómo adaptar tu enfoque para satisfacer tus necesidades.


¿Por qué es importante esto? Implementar y madurar un sistema de diseño puede ser complejo a medida que las organizaciones evolucionan. Al comprender los diferentes niveles de madurez, estarás capacitado para tomar decisiones informadas.

This talk has been presented at C3 Dev Festival 2024, check out the latest edition of this Tech Conference.

Joran Quinten
Joran Quinten
29 min
15 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Los sistemas de diseño son aceleradores para el desarrollo y todos los desarrolladores web o de aplicaciones estarán en contacto cercano con ellos. El modelo de madurez del sistema de diseño simplifica las etapas de madurez desde Nebula hasta Supernova. Construir un sistema de diseño completo requiere una estrecha colaboración entre diseñadores y desarrolladores, una visión y estrategia claras, y una sólida gobernanza. La mejora continua y la evolución son esenciales para un sistema de diseño maduro, así como alinear el sistema de diseño con los objetivos comerciales y adaptarse a los cambios en la estructura organizativa. La documentación y la compatibilidad cultural desempeñan un papel crucial en el éxito de un sistema de diseño.

1. Introducción a los Sistemas de Diseño

Short description:

Estoy un poco nervioso en este escenario porque si fuiste a la pre-fiesta sabes que este es el escenario de karaoke. Vamos a hablar sobre sistemas de diseño y obtener más claridad en el modelo de madurez del sistema de diseño. Hola, soy Joran. Trabajo para un supermercado Jumbo, que no es una empresa de tecnología, pero usamos tecnología para cumplir nuestros objetivos. Los sistemas de diseño son aceleradores para el desarrollo y todos en el desarrollo web o de aplicaciones estarán en contacto cercano con ellos.

Estoy un poco nervioso en este escenario porque si fuiste a la pre-fiesta sabes que este es en realidad el escenario de karaoke. Así que espero poder dar al menos un espectáculo lo suficientemente bueno como para que no te vayas llorando. Él mencionó fotos, si me tomas fotos, siéntete libre de etiquetarme porque mi esposa sabe que estoy en Ámsterdam. Le expliqué que estoy en una conferencia de tecnología. Creo que me cree, pero está bien si me etiquetas para que pueda proporcionar alguna prueba. No vamos a hablar de karaoke, ni del centro de Ámsterdam, vamos a hablar sobre los design sistemas de diseño. Esperemos que podamos obtener un poco más de claridad en el modelo de madurez del design sistema. Antes de comenzar con eso, por supuesto, una pequeña introducción. Hola, soy Joran. Hola. Genial. Es agradable, es por la tarde, así que tengo que mantener la energía un poco alta. Mantendré la introducción breve porque ya he dicho muchas cosas. Si quieres conectarte, no dudes en encontrarme en internet porque también estoy buscando comentarios y eso sirve como base para esta charla. Estuve aquí el año pasado en este lugar en la JS Nation dando una charla sobre la component library y estaba hablando de cómo estábamos dando forma a nuestra component library desde el punto de vista del desarrollador y eso me llevó a tener charlas con muchos otros desarrolladores y diseñadores que también asistieron a la conferencia y me contaron su historia. Empecé a reconocer patterns y eso es básicamente de lo que trata esta charla también porque tengo una sospecha, y ahí es donde entras tú, de que estos patterns no son únicos en nuestra organización. Eso me lleva a la siguiente diapositiva. Mi organización, así que trabajo para un supermercado Jumbo, tienen una tienda cerca. Siéntete libre de comprar snacks allí. La característica clave o por qué esto es interesante es porque no somos una empresa de tecnología, ¿verdad? Usamos tecnología para cumplir nuestros objetivos que es vender comestibles, poner esa lechuga en tu estante. Pero no es nuestra principal preocupación, por lo que esta es una tecnología de apoyo y eso tiene implicaciones, creo, en la forma en que hacemos las cosas relacionadas con la tecnología. Entonces, esta es una característica importante y si eso también se aplica a tu empresa, creo que estamos en la misma página. Si eres una empresa de tecnología primaria, hay un camino diferente. Lo destacaré más adelante. Entonces, ¿por qué estás aquí? Espero que sepas por qué estás aquí. Al menos yo sé por qué estoy aquí. Todos sabemos que los design sistemas de diseño son aceleradores para el desarrollo, ¿verdad? Nos benefician. Nos hacen ir más rápido y tarde o temprano todos los que trabajan en el desarrollo web development o desarrollo de aplicaciones, tarde o temprano estarán en contacto cercano con el sistema de diseño ya sea que te guste o no.

2. Modelos y Definición de Sistema de Diseño

Short description:

Los modelos nos ayudan a simplificar conceptos complejos y mejorar como desarrolladores. Un sistema de diseño es una colección estructurada de elementos de diseño reutilizables y pautas que mantienen la consistencia en productos y servicios digitales. Sirve como un recurso centralizado para los equipos de diseño y desarrollo, proporcionando estándares y patrones estandarizados para diseñadores, desarrolladores y usuarios finales.

Así que es bueno estar preparados. Y la otra parte son los modelos. Entonces, ¿qué hacen los modelos? Nos ayudan a simplificar conceptos o ideas complejas y nos ayudan a comprender cómo podemos usarlos y espero que también podamos aprender dónde podemos mejorar como desarrolladores. Por eso espero que estés aquí. Si necesitas un momento para salir por la puerta en este punto, está bien, pero esto es por qué estamos aquí. Así que vamos a intentar cumplir esos objetivos. Los estoy resaltando para enfatizar aún más. Antes de sumergirnos en todo eso, ¿qué diablos es un design sistema? Veamos si podemos encontrar una definición muy descriptiva de un design sistema. Prepárate porque lo voy a leer en voz alta. Allá vamos. Intentaré usar mi voz de lectura. Entonces, un design sistema es una colección estructurada de elementos de diseño reutilizables y pautas que ayudan a mantener la consistencia visual y funcional en productos y servicios digitales. Ahora tomo una respiración profunda aquí. Y luego pasamos a que sirve como un recurso centralizado para los equipos de diseño y desarrollo, proporcionando un conjunto de estándares. Así que espero que puedas. Sí. De acuerdo. Sí. Gracias. Iba a decir que espero que puedas leer esto y luego la televisión se cayó. Vamos a continuar. Entonces esto es lo que usamos como definición de un design sistema para esta charla. Si quieres acortar la definición, esto también funciona. Esto es de Brad Frost. Él es un experto mucho mejor en design sistema y patrones y demás. Así que esta también es una muy buena definición, mucho más utilizable. Pero para esta charla, creo que la descripción más larga también cumple un propósito porque destaca algunas de las características clave de un design sistema, que son que es estructurado, centralizado y contiene un conjunto de patrones estandarizados. También se trata de los interesados. Lo estamos haciendo tanto por diseñadores como por desarrolladores, también para diseñadores y para desarrolladores, y también para los usuarios finales. Hay otra característica.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
React Advanced 2021React Advanced 2021
47 min
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
Construir un Sistema de Diseño con React y Tailwind CSS
React Summit 2022React Summit 2022
27 min
Construir un Sistema de Diseño con React y Tailwind CSS
Top Content
This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.
Caminando en la línea entre la flexibilidad y la consistencia en las bibliotecas de componentes
React Summit 2022React Summit 2022
27 min
Caminando en la línea entre la flexibilidad y la consistencia en las bibliotecas de componentes
This Talk discusses the comparison between Polaris and Material UI component libraries in terms of consistency and flexibility. It highlights the use of the action list pattern and the customization options available for the action list component. The Talk also emphasizes the introduction of a composite component to improve API flexibility. Additionally, it mentions the importance of finding the right balance between flexibility and consistency and the use of types to enforce specific child components.
Descubre si tu sistema de diseño es mejor que nada
React Summit 2022React Summit 2022
20 min
Descubre si tu sistema de diseño es mejor que nada
Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.
Dilemas de los diálogos y travesuras modales: Un análisis profundo de las ventanas emergentes
JSNation 2023JSNation 2023
10 min
Dilemas de los diálogos y travesuras modales: Un análisis profundo de las ventanas emergentes
The Talk discusses the use of dialogues and popovers in web development. Dialogues can be modal or non-modal and are now accessibility-supported. Popovers are versatile and can be added to any element without JavaScript. They provide suggestions, pickers, teaching UI, list boxes, and action menus. Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Browser support for these features is expanding, but there are still open questions about positioning, semantics, and other use cases.
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
React Advanced 2023React Advanced 2023
19 min
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.

Workshops on related topic

Desarrollo Rápido de UI en React: Aprovechando Bibliotecas de Componentes Personalizadas y Sistemas de Diseño
React Advanced 2022React Advanced 2022
118 min
Desarrollo Rápido de UI en React: Aprovechando Bibliotecas de Componentes Personalizadas y Sistemas de Diseño
Workshop
Richard Moss
Richard Moss
En este masterclass, recorreremos los enfoques más efectivos para construir componentes de UI escalables que mejoren la productividad y felicidad del desarrollador :-) Esto implicará una combinación de ejercicios prácticos y presentaciones, que cubrirán los aspectos más avanzados de la popular biblioteca styled-components, incluyendo la tematización e implementación de utilidades styled-system a través de props de estilo para un desarrollo rápido de UI, y culminando en cómo puedes construir tu propia biblioteca de componentes personalizada y escalable.
Nos enfocaremos tanto en el escenario ideal, donde trabajas en un proyecto nuevo, como en tácticas para adoptar incrementalmente un sistema de diseño y enfoques modernos para el estilo en una base de código existente con algo de deuda técnica (¡que suele ser el caso!). Al final del masterclass, deberías sentir que comprendes los compromisos entre diferentes enfoques y sentirte seguro para comenzar a implementar las opciones disponibles para avanzar hacia el uso de una biblioteca de componentes basada en un sistema de diseño en la base de código en la que trabajas.
Prerrequisitos: - Familiaridad y experiencia trabajando en grandes bases de código de React- Una buena comprensión de los enfoques comunes para el estilo en React