Design Systems: Walking the Line Between Flexibility and Consistency

Walking the Line Between Flexibility and Consistency in Component Libraries

Siddharth Kshetrapal

Design Systems - Revamping Products for Consistent UIs

Taley'a Mirza

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

Richard Moss

Design Systems of a Down: Steal this Guide!

m4dz 

Introducing Design System to Multinational Web Apps

Alison Yoon

Find Out If Your Design System Is Better Than Nothing

Arseny Smoogly

Build a Design System with React and Tailwind CSS

Shruti Balasa

Type-safe Styling for React Component Packages: Vanilla Extract CSS

Negar Jamalifard

Thinking Differently About a11y – Accessible Website Design for the Neurospicy

Stephanie Shaw

The Sorcery of Building a Cross Platform Design System Architecture

Kamlesh Chandnani

Developing and Driving Adoption of Component Libraries

Logan Ralston

Lachlan Bradford

Measuring Coverage of React Design System

Karan Kiri

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

Hidde de Vries

Figma to React With AI, Are We There Yet?

Federico Terzi

The Messy Middle — Navigating Complexity in Large React Applications

Maxi Ferreira

Applying Product Thinking Principles to your Design System

Raymond Luong

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>

React Day Berlin

React Day Berlin 2023

You've planted the seeds of your design system. Maybe you've built out a few components and set up a basic Storybook. But where do you go from here? It can be easy to let your inner perfectionist take over and try to cover every scenario and edge case, especially when referencing established design systems. However, a more effective approach is to treat your design system as a product that grows and evolves with your users. Ultimately, its value lies in the problems it solves and the needs it meets. In this talk, I’ll explore how to apply product thinking principles to your design system, interweaving examples from my own experience as a design system engineering lead.

React Summit US

React Summit US 2023

The project started out great—the team was motivated, moving fast, and shipping features ahead of schedule. But little by little, complexity found its way in. Implementing small changes takes forever now, tech debt is piling up at an alarming rate, and everyone is losing confidence that the project will ever get done. Welcome to the messy middle.  Taking examples from real-world projects that shipped way too late, we'll explore the symptoms and causes of complexity in large React applications, and we'll share tips and strategies for dealing with it before it takes over your codebase.

React Advanced Conference 2023

Unlock the power of type-safe styling in React component packages with Vanilla Extract CSS. Learn how to effortlessly write scalable and maintainable styles, leveraging CSS-in-Typescript. Discover the seamless integration of Vanilla Extract CSS and take your React components to the next level.

Design systems are becoming increasingly popular in modern front-end development. However, measuring the usage and coverage of these design systems is often challenging. In this lightning talk, I'll discuss about a tool that we're working on which uses react-scanner and Abstract Syntax Tree (AST) with custom scripts to generate component usage data for a React design system.  The talk will cover how we generate this data and how it is rendered in a dashboard to provide valuable insights on the coverage of the design system. - Introduction to  react-scanner- Measuring Component Usage- Identifying Native HTML elements and Styled Components- Showing Tree structure of Page in terms of Components- Highlighting Anti Patterns- Benefits / Use Cases for this tool

What if we could generate production-ready React components (including props, responsiveness, CSS styling, TypeScript typings, and more) from Figma designs, automatically? This seemingly impossible task is becoming a reality thanks to the latest advancements in AI (such as ChatGPT). In this talk, we’ll discuss some of the techniques we are using at Anima to automate the boring parts of frontend development, generating React components from Figma designs. We’ll cover some algorithmic techniques, processes and deep-learning based approaches that could help you speed up your day-to-day frontend work.

Did you know that approximately 1 in 7 people are neurodivergent? Within that group there is an entire spectrum of people whose brains process information differently. However, as frontend engineers we often forget to take these idiosyncrasies into account, or choose to simply apply industry standards such as WCAG 2.1 AA without digging deeper. In this talk, Steph shares some of the ways you can create better web experiences for the neurodivergent.

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.

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.

React Advanced Conference 2022

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.

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.

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.

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.

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.

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>

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>

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

#design systems