React Day Berlin

React Day Berlin 2022

Cristobal Chao

Innovate with React

Accelerate Innovation

Accelerating Design & Development Innovation with AI-driven Tools

React Day Berlin 2023

AI in Frontend

Designers and developers work on different timelines—designers look to the future while developers build from what’s already been designed. They speak different languages and follow different processes. How can we bridge these gaps and build a more collaborative development process? In this talk, we will explore the integration of AI-driven tools and techniques to enhance design systems, fostering improved communication between cross-functional teams. By leveraging artificial intelligence, we can not only boost productivity and innovation but also create a more harmonious and efficient workflow for both designers and developers

Designers and developers work on different timelines—designers look to the future while developers build from what’s already been designed. They speak different languages and follow different processes. How can we bridge these gaps and build a more collaborative development process? This talk will showcase how design systems can improve communication between cross-functional teams—while boosting productivity and innovation.

In this workshop, you will learn how to create a Custom Component System from scratch in React, and take it to the next level.You will learn best practices when building a Component System, as well as the tools that you can use to be a more effective collaborator with other cross-functional teams. What's included1. Introduction2. Learn the fundamentals of a Component System3. Setting up the development environment4. Importing fonts5. Choosing a base React Component Library6. Writing our first components7. Setting up a centralized theme8. Writing custom styles to inject to our components9. Injecting icons to our components10. Adding hooks11. Making components responsive12. Adding dark mode13. Deploying your Component System14. Exporting your Component System to a design tool15. Prototyping with your production components