#design systems

Subscribe
Design systems in web design are a set of interconnected design components that are organized in a systematic manner. They provide a consistent visual language and design guidelines for creating digital products, enabling designers to work faster and more efficiently. Design systems also promote better collaboration among team members and help to maintain brand consistency.
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
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 Day Berlin 2023React Day Berlin 2023
6 min
Applying Product Thinking Principles to your Design System
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 2023React Summit US 2023
10 min
The Messy Middle — Navigating Complexity in Large React Applications
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 2023React Advanced Conference 2023
19 min
Type-safe Styling for React Component Packages: Vanilla Extract CSS
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.
React Advanced Conference 2023React Advanced Conference 2023
11 min
Measuring Coverage of React Design System
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
React Advanced Conference 2023React Advanced Conference 2023
21 min
Figma to React With AI, Are We There Yet?
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.
React Advanced Conference 2023React Advanced Conference 2023
30 min
Thinking Differently About a11y – Accessible Website Design for the Neurospicy
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.
JSNation 2023JSNation 2023
10 min
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
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 2022React Day Berlin 2022
23 min
The Sorcery of Building a Cross Platform Design System Architecture
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 2022React Advanced Conference 2022
22 min
Developing and Driving Adoption of Component Libraries
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 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
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.
React Summit 2022React Summit 2022
27 min
Walking the Line Between Flexibility and Consistency in Component Libraries
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 2021React Finland 2021
25 min
Design Systems of a Down: Steal this Guide!
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 & tricks, components splicing strategies, from this comprehensive step--step handbook talk.
Never be lost again in front of a creating Design System from scratch!