Zero-Styling Development: ¿Utopía o el Futuro del Frontend?

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

¿Qué pasaría si nunca tuvieras que tocar estilos en tu código nuevamente? Esta charla relámpago presenta un enfoque del mundo real para la implementación de diseño totalmente automatizada, donde los cambios en Figma se reflejan automáticamente en la aplicación a través de tokens y un pipeline de CI. Una mirada práctica a lo que sucede cuando se le da control visual completo a los diseñadores, y por qué eso podría ser algo bueno también para los desarrolladores.

Conclusiones para la audiencia:

- Una perspectiva provocativa: ¿realmente un desarrollador frontend necesita escribir estilos?

- Herramientas y técnicas para sincronizar Figma → GitHub → CSS → Aplicación web.

- Un replanteamiento de las responsabilidades entre diseñadores y desarrolladores.

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

Mateusz Jagodziński
Mateusz Jagodziński
7 min
13 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Mateusz Jagodziński presenta sobre Zero Styling Development y los desafíos enfrentados con implementaciones de estilo manual, lo que lleva a la adopción de un enfoque de zero styling para la eficiencia y consistencia en la implementación de diseño. Workflow Builder adopta un enfoque de zero-styling comenzando con tokens de diseño en Figma, seguido de la automatización para la generación de CSS e implementación usando variables CSS, asegurando cambios de estilo fáciles sin intervención del desarrollador.

QnA

Zero Styling Development Challenges

Short description:

Mateusz Szczygodziński presentando sobre el Desarrollo de Estilo Cero y los desafíos enfrentados con implementaciones de estilo manuales, lo que llevó a la adopción de un enfoque de estilo cero para la eficiencia y consistencia en la implementación de diseño.

Hola, mi nombre es Mateusz Szczygodziński, estoy aquí con el equipo de Workflow Builder donde soy un desarrollador principal, y estoy muy emocionado de estar aquí. Así que el tema de la charla de hoy será el Desarrollo de Estilo Cero, Utopía del Futuro del Front-end. Bien, esta podría ser una gran palabra, pero de lo que hablaremos es de estilo. ¿Cuáles son los problemas con ello? ¿Qué hemos encontrado en nuestro caso de uso, y cómo decidimos resolverlo, que es el enfoque de estilo cero.

Entonces, primera pregunta para la audiencia. ¿Quién ha trabajado con estilos de Figma, teniendo que implementarlos manualmente en el código? Bien, veo algunas manos. Bien, ¿quién piensa que es tedioso? Bien, ¿quién piensa que es propenso a errores? Sí. Entonces, como vemos, hay algunos problemas con este enfoque de estilo. A los diseñadores les gustan los diseños hermosos, pero, ya sabes, incluso si no aplican cambios lógicos solo cambios de estilo, eso aún puede llevar mucho tiempo de desarrollo.

Transferir esos estilos manualmente es propenso a errores, por lo que a menudo podemos cometer errores, hacer este radio de borde ligeramente diferente y luego los diseñadores se enojan con nosotros. Y por supuesto, restilizar algunas bibliotecas de componentes puede ser doloroso si no están adaptadas a esta propiedad. Entonces, déjame hablar un poco sobre nuestro caso de uso. Entonces, mientras construíamos Workflow Builder, que es un producto de marca blanca como DK, estos problemas se hicieron muy evidentes. En nuestro caso de uso, hacer cambios que no son en la lógica sino en el estilo, adaptando la herramienta para nuevos clientes, solo cambiando su marca, ajustando ligeramente su apariencia era algo que hacíamos muy a menudo.

Zero Styling Automation Benefits

Short description:

Workflow Builder adopta un enfoque de estilo cero comenzando con tokens de diseño en Figma, seguido de la automatización para la generación de CSS e implementación usando variables CSS, asegurando cambios de estilo fáciles sin intervención del desarrollador.

Entonces, cuando diseñamos el Workflow Builder y nuestra biblioteca de componentes subyacente overflow sobre la cual está construido, decidimos tomar este enfoque de estilo cero y abordar algunos de estos problemas. Así que, déjame hablarte sobre cuál es este enfoque. Entonces, primero que nada, comienza con el diseño, con el equipo de diseño. Hacemos nuestros diseños en Figma. Estoy seguro de que muchos de ustedes están familiarizados con él. Y sí, el enfoque que hemos tomado es desde el principio. Al diseñar los componentes, los diseñadores no están usando ningún valor directamente. Todo está construido sobre un conjunto de primitivas y números que se crean para almacenar los valores reales y luego los valores para estilos en los componentes se crean realmente usando tokens que hacen referencia a esos números y primitivas. Es importante mantener todo en esta biblioteca de esa manera, pero nos ayudará en la etapa posterior.

Entonces, el siguiente paso, creo que el más importante, es la automatización. Entonces, con Figma, con dos plugins como Token Exporter, puedes exportar esos tokens y estilos y crear archivos JSON simples a partir de ellos. Tenemos un script automatizado que puede convertir esto en el paquete CSS real que se está usando en el proyecto. Entonces, con una configuración adecuada como en la canalización de GitHub, podemos hacer esto completamente automático y realmente para generar nuevos estilos, un diseñador puede hacerlo, ¿verdad? Para obtener el paquete CSS e integrarlo en el código. Ni siquiera es necesario el trabajo de los desarrolladores allí. Y sí, luego el paso final, por supuesto, en el código. Cuando implementas los componentes en lugar de escribir el CSS, estás haciendo referencia a esas variables CSS del paquete generado. Así que, sí. Una cosa importante a añadir aquí es que, en nuestra biblioteca de componentes, la importación de estilos está completamente separada de la construcción de la aplicación, por lo que es totalmente posible, ya sabes, simplemente reemplazar el paquete CSS y restilizar la misma versión de los componentes.

Entonces, para resumir esto, este estilo cero tiene tres pasos. El primero es usar los tokens de diseño de la fase de diseño. Otro es crear esta automatización que permite a los diseñadores realmente generar el CSS y actualizarlo en el código. Y por supuesto, al implementar, siempre usamos esas variables CSS. Entonces, ¿qué nos permite hacer esto? Bueno, facilita, facilita los cambios de estilo en la aplicación mucho más, especialmente para casos como el nuestro donde, ya sabes, muy a menudo no hay cambios de lógica sino solo asegurarse de que la configuración del workflow builder ahora sigue la marca de la empresa de la herramienta que se está utilizando. Sin errores en la transferencia de estilo, ¿verdad? Si todo lo hace el equipo de diseño y haces referencia al token, nunca puedes escribir mal esa propiedad o pegar el número incorrecto. Y el equipo de diseño puede hacer los cambios sin el equipo de desarrollo, lo cual es realmente importante.

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

Diseño Dirigido por Dominio con Aplicaciones Vue
Vue.js London 2023Vue.js London 2023
14 min
Diseño Dirigido por Dominio con Aplicaciones Vue
Top Content
Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.
No Seriously: htmx es Pro-JavaScript!
JSNation US 2024JSNation US 2024
29 min
No Seriously: htmx es Pro-JavaScript!
HTMX is a hypermedia-oriented front-end library that enhances HTML as a hypermedia. It generalizes the concept of hypermedia controls in HTML, allowing any element to become a hypermedia control. HTMX provides practical attributes like HX swap and HX indicator. The active search demo showcases the dynamic behavior achievable with HTMX. HTMX allows developers to build web applications without writing a ton of JavaScript. It works well for traditional web apps but may not be suitable for offline functionality or fast interactions. HTMX can be integrated with JSX and various backend stacks, and TypeScript can be used alongside HTMX.
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
React Summit 2022React Summit 2022
7 min
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.
Cargadores de datos: Mejorando la obtención de datos en Vue
Vue.js Live 2024Vue.js Live 2024
30 min
Cargadores de datos: Mejorando la obtención de datos en Vue
Data loaders provide a solution for complex and repetitive data fetching in Vue.js applications. Using data loaders allows for more independent data fetching and integrates with the navigation cycle. The data loader plug-in adds a navigation guard for data fetching and loading. Lazy loading and caching can be implemented using Pina Colada and Glada loaders. These loaders can improve the performance and speed of data fetching in applications.
La próxima ola de frameworks web es BYOJS
JSNation 2022JSNation 2022
23 min
La próxima ola de frameworks web es BYOJS
The next wave of web frameworks is BYOJS, covering the history and evolution of building web applications. The evolution of web frameworks and build systems includes popular choices like React, Angular, and Vue, as well as advanced build systems like Webpack and Rollup. The rise of performance measurement tools and the adoption of the Jamstack have led to improved web performance. The Jamstack architecture focuses on pre-rendering pages, decoupling APIs and services, and enhancing pages with JavaScript. Astro, a static site generator with SSR support, promotes the islands architecture and partial hydration.
¡MIDI en el Navegador... ¡Vamos a Rockear la Web!
JSNation 2022JSNation 2022
28 min
¡MIDI en el Navegador... ¡Vamos a Rockear la Web!
MIDI is a versatile communication protocol that extends beyond music and opens up exciting possibilities. The Web MIDI API allows remote access to synths and sound modules from web browsers, enabling various projects like music education systems and web audio-based instruments. Developers can connect and use MIDI devices easily, and the Web MIDI API provides raw MIDI messages without semantics. The WebMidi.js library simplifies working with the Web MIDI API and offers a user-friendly interface for musicians and web developers. MIDI on the web has generated significant interest, with potential for commercial growth and endless possibilities for web developers.

Workshops on related topic

Accesibilidad web en aplicaciones JavaScript
React Summit 2022React Summit 2022
161 min
Accesibilidad web en aplicaciones JavaScript
Workshop
Sandrina Pereira
Sandrina Pereira
A menudo vemos que JavaScript daña la accesibilidad de un sitio web. En esta masterclass, aprenderás cómo evitar errores comunes y cómo utilizar JS a tu favor para mejorar la accesibilidad de tus aplicaciones web.
En esta masterclass exploraremos múltiples ejemplos del mundo real con problemas de accesibilidad, y aprenderás cómo hacer que funcionen para las personas que utilizan un mouse o un teclado. También aprenderás cómo se utilizan los lectores de pantalla, ¡y te mostraré que no hay razón para tener miedo de usar uno!
Únete a mí y déjame mostrarte cómo la accesibilidad no limita tus soluciones o habilidades. ¡Al contrario, las hace más inclusivas!
Al final, serás capaz de:- Comprender los principios de WCAG y cómo están organizados- Conocer casos comunes en los que JavaScript es esencial para la accesibilidad- Crear enlaces, botones y elementos conmutables inclusivos- Utilizar regiones en vivo para errores y estados de carga- Integrar la accesibilidad en el flujo de trabajo de tu equipo de inmediato- Darte cuenta de que crear sitios web accesibles no es tan difícil como parece ;)
Cómo Crear una Aplicación Web de Manera (Casi) Autónoma Usando Clean Coder
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
95 min
Cómo Crear una Aplicación Web de Manera (Casi) Autónoma Usando Clean Coder
Workshop
Grigorij Dudnik
Grigorij Dudnik
Imagina reemplazarte a ti mismo con un programador de IA multi-agente para desarrollar tu aplicación web de producción. Eso es exactamente lo que hicimos en mi startup takzyli.pl. Para lograr esto, diseñamos y utilizamos el Clean Coder - marco de agentes de IA para la escritura autónoma de código (https://github.com/GregorD1A1/Clean-Coder-AI), que es un proyecto de código abierto, con suerte. Si funcionó para nosotros, ¿por qué no debería funcionar para ti?En esta masterclass, te mostraré cómo crear una aplicación web completa de manera (casi) autónoma y reducir drásticamente el tiempo que tú o tus empleados pasan escribiendo código.
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
JSNation 2023JSNation 2023
66 min
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
Esta sesión se centrará en los bloques de construcción universales de Starbeam. Usaremos Starbeam para construir una biblioteca de datos que funcione en múltiples frameworks.Escribiremos una biblioteca que almacene en caché y actualice datos, y admita relaciones, ordenación y filtrado.En lugar de obtener datos directamente, funcionará con datos obtenidos de forma asíncrona, incluidos los datos obtenidos después de la representación inicial. Los datos obtenidos y actualizados a través de web sockets también funcionarán bien.Todas estas características serán reactivas, por supuesto.Imagina que filtras tus datos por su título y luego actualizas el título de un registro para que coincida con el filtro: cualquier resultado que dependa de los datos filtrados se actualizará para reflejar el filtro actualizado.En 90 minutos, construirás una increíble biblioteca de datos reactiva y aprenderás una nueva herramienta poderosa para construir sistemas reactivos. La mejor parte: la biblioteca funciona en cualquier framework, incluso si no piensas en (o dependes de) ningún framework al construirla.
Tabla de contenidos- Almacenar un registro obtenido en una celda- Almacenar múltiples registros en un Mapa reactivo- La iteración reactiva es una iteración normal- El filtrado reactivo es un filtrado normal- Obtener más registros y actualizar el Mapa- La ordenación reactiva es una ordenación normal (¿se está volviendo un poco repetitivo?)- Modelar la invalidación de la caché como datos- Bonus: relaciones reactivas
Construye aplicaciones Web3 con React
React Summit 2022React Summit 2022
51 min
Construye aplicaciones Web3 con React
Workshop
Shain Dholakiya
Shain Dholakiya
El masterclass está diseñado para ayudar a los desarrolladores Web2 a comenzar a construir para Web3 utilizando el Hyperverse. El Hyperverse es un mercado abierto de módulos inteligentes construidos por la comunidad, auditados y fáciles de descubrir. Nuestro objetivo es hacer que sea fácil para los desarrolladores de React construir aplicaciones Web3 sin escribir una sola línea de código de contrato inteligente. Piensa en 'npm para contratos inteligentes'.
Aprende más sobre el Hyperverse aquí.
Repasaremos todos los conceptos básicos de blockchain/crypto que necesitas saber para comenzar a construir en el Hyperverse, por lo que no necesitas tener ningún conocimiento previo sobre el espacio Web3. Solo necesitas tener experiencia en React.