React Advanced

React Advanced Conference 2021

Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Design Systems: Walking the Line Between Flexibility and Consistency

Siddharth Kshetrapal

JS Nation

JSNation 2023

Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. Proposed updates to the web platform are about to make building these a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, modality and the top layer.

Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups

Hidde de Vries

React Day Berlin

React Day Berlin 2022

When we want to build a “cross-platform mobile app” the answer always is React Native but what if you want to build a “cross-platform app” that runs across mobile and browser? Here’s where React Native falls short. react-native-web is trying to bridge this gap to some extent but the primary requirement is to write your code in React Native which gets converted to the web, but that itself has a bunch of downsides and the biggest one being - forcing mobile app developers to understand how browsers work. In this talk, I’ll share how we are building a true cross-platform architecture without using react-native-web for our design system at Razorpay.

The Sorcery of Building a Cross Platform Design System Architecture

Kamlesh Chandnani

React Advanced Conference 2022

In this workshop, we'll take a tour through the most effective approaches to building out scalable UI components that enhance developer productivity and happiness :-) This will involve a mix of hands-on exercises and presentations, covering the more advanced aspects of the popular styled-components library, including theming and implementing styled-system utilities via style props for rapid UI development, and culminating in how you can build up your own scalable custom component library. We will focus on both the ideal scenario---where you work on a greenfield project---along with tactics to incrementally adopt a design system and modern approaches to styling in an existing legacy codebase with some tech debt (often the case!). By the end of the workshop, you should feel that you have an understanding of the tradeoffs between different approaches and feel confident to start implementing the options available to move towards using a design system based component library in the codebase you work on. Prerequisites: - Familiarity with and experience working on large react codebases- A good understanding of common approaches to styling in React

Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems

Richard Moss

What makes a component library good? In order to create a component library that people want to use you need to navigate tradeoffs between extensibility, ease of use, and design consistency. This talk will cover how to traverse these factors when building a component library in React, how to measure its success, and how to improve adoption rates.

Developing and Driving Adoption of Component Libraries

Logan Ralston

Lachlan Bradford

React Summit

React Summit 2022

Tailwind CSS, with its utility-first approach is known for speeding up the development process. Combining it with the power of React, let’s see how you can build a custom design system for your project to further speed it up, make it scalable and also easy to maintain.

Build a Design System with React and Tailwind CSS

Shruti Balasa

Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.

Find Out If Your Design System Is Better Than Nothing

Arseny Smoogly

I will walk through the process of my team introducing design system to our company's web applications that are built separately in different countries - UK, US, Germany, Spain and Japan. After that, I will add a practical guide to set up a design system for a project.

Introducing Design System to Multinational Web Apps

Alison Yoon

Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.

Walking the Line Between Flexibility and Consistency in Component Libraries

React Finland

React Finland 2021

Remember Atomic Design? It's been a while since we started talking about Design Systems. They're supposed to solve our interfaces inconsistencies issues, as a single source of truth. But do you know well how to build and use them, from a developer perspective? Here's your ultimate guide to Design Systems, for Devs! From the fundamentals of Design Tokens definition, to how to build advanced versatile layouts. You'll learn all best practices, tips &amp; tricks, components splicing strategies, from this comprehensive step--step handbook talk. Never be lost again in front of a creating Design System from scratch! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Design Systems of a Down: Steal this Guide!

m4dz 🥑🦄

React Summit Remote Edition

React Summit Remote Edition 2021

In this talk, Taley'a will be discussing how design system enables the consistency among the products, you will explore the core components of the design system, along with the key benefits and challenges while building the design system. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#design systems