¿Qué Hace que un Sistema de Diseño Triunfe?

Rate this content
Bookmark

¿Cómo puede un sistema de diseño ganar sobre los desarrolladores de productos y diseñadores? Todos quieren lanzar nuevas características, pero no saben por qué deberían adoptar tus componentes y seguir tus directrices. Vamos a resolver esto y convertir la apatía en entusiasmo. Exploraremos las muchas maneras de atraer atención a tu sistema de diseño, elevar su lugar en tu producto y construir una comunidad próspera alrededor de tu trabajo.

This talk has been presented at React Day Berlin 2024, check out the latest edition of this React Conference.

Will Klein
Will Klein
33 min
13 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Gracias a todos por darme la bienvenida aquí. Estoy dando una charla remota sobre testing. La comunidad aquí es cálida y asombrosa. Espero que Marin lo haga bien y esperamos verlo pronto. Hace seis años, me uní a una gran empresa tecnológica trabajando en mejorar UX y UI. Lanzamos la mejora de UX a 60 millones de usuarios, pero pasamos por alto aprovechar el sistema de diseño. Reconociendo la importancia del sistema de diseño, me comuniqué con el gerente del sistema de diseño para abordar el problema. Propuse resolver la fatiga de reuniones y definí mi papel como defensor interno de desarrolladores. Se discutieron los desafíos en el envío de código para desarrolladores y la construcción de credibilidad. Se enfatizó la importancia de fomentar la comunicación abierta, apoyar a los usuarios y expandir las masterclasses. Continuar las conversaciones a través de horas de oficina y demos de lanzamiento mejoró la adopción. La simplificación de actualizaciones de código y la celebración de la defensa fueron estrategias clave. El orador ahora dirige una empresa de herramientas para desarrolladores llamada Tool Space.
Available in English: What Makes a Design System Win
Video transcription and chapters available for users with access.

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