Log in
React Conferences
React Summit US 2024React Summit US 2024
ES

Más allá de 1.0 - Lecciones aprendidas y cosas que hacer después del lanzamiento 1.0 de un sistema de diseño

Ameer Sami
Ameer Sami
S&C Electric
This talk is scheduled for Nov 22, 18:00
The recording will be published after editing. Multipass and Full ticket holders have early access.
Get Multipass
Rate this content
Bookmark

¡Yay, acaban de lanzar la versión 1.0 de su sistema de diseño, pero ahora qué? El lanzamiento de un sistema de diseño puede parecer una tarea fácil, pero mantenerlo es lo que importa. En esta charla discutiremos cómo su sistema de diseño debe madurar con su empresa mediante la construcción de un sitio de documentación extensible, pensando más allá del código, recopilando estadísticas de uso de componentes y mucho más!

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

design systems
Ameer Sami
Ameer Sami
22 Nov, 2024
Video transcription, chapters and summary will be available after the recording is published.
Available in other languages:

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
Siddharth Kshetrapal
Siddharth Kshetrapal
GitHub
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.
best practicesdesign systemscomponent 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
Shruti Balasa
Shruti Balasa
Tech Educator
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.
design systemscssreact design systemstailwind react
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
Siddharth Kshetrapal
Siddharth Kshetrapal
GitHub
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.
design systemscomponent library
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
Arseny Smoogly
Arseny Smoogly
Solution Architect @ Rangle
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.
case studydesign systemsreact componentscomponent library
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
Hidde de Vries
Hidde de Vries
Web Developer, Netherlands
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.
design systemsaccessibility
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
Negar Jamalifard
Negar Jamalifard
Frontend Developer
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.
typescriptdesign systemscsscss-in-jsvanilla react

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
reactdesign systems