#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.
Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
From Nebula to Supernova: Design System Maturity Models
C3 Dev Festival 2024C3 Dev Festival 2024
29 min
From Nebula to Supernova: Design System Maturity Models
Design systems are accelerators for development and every web or app developer will come in close contact with them. The design system maturity model simplifies the stages of maturity from Nebula to Supernova. Building a full-fledged design system requires close collaboration between designers and developers, a clear vision and strategy, and strong governance. Continuous improvement and evolution are essential for a mature design system, as well as aligning the design system with business goals and accommodating changes in organizational structure. Documentation and culture compatibility play a crucial role in the success of a design system.
Applying Product Thinking Principles to your Design System
React Day Berlin 2023React Day Berlin 2023
6 min
Applying Product Thinking Principles to your Design System
Watch video: Applying Product Thinking Principles to your Design System
Today's Talk focuses on applying product-making principles to design systems, emphasizing prioritization, MVPs, and metrics. It highlights the importance of understanding user needs and business goals through research and data collection. The Talk also emphasizes the iterative process of building components, gathering feedback, and iterating based on user validation. Lastly, it stresses the significance of measuring progress with metrics to track usage and adoption, and to demonstrate the impact of design system efforts.
The Messy Middle — Navigating Complexity in Large React Applications
React Summit US 2023React Summit US 2023
10 min
The Messy Middle — Navigating Complexity in Large React Applications
Watch video: The Messy Middle — Navigating Complexity in Large React Applications
Managing complexity in large React applications is a challenge, as it tends to grow exponentially over time. Component composition is a key technique that allows for flexibility in React applications, but too much composition can make components harder to use. Managing complexity and reducing cognitive load is crucial, and strategies such as controlling abstraction evolution and minimizing information needed for simple changes can help. Simplicity is difficult, but important in slowing down the growth of complexity.
Type-safe Styling for React Component Packages: Vanilla Extract CSS
React Advanced Conference 2023React Advanced Conference 2023
19 min
Type-safe Styling for React Component Packages: Vanilla Extract CSS
Watch video: Type-safe Styling for React Component Packages: Vanilla Extract CSS
Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.
Measuring Coverage of React Design System
React Advanced Conference 2023React Advanced Conference 2023
11 min
Measuring Coverage of React Design System
Watch video: Measuring Coverage of React Design System
Karen discusses measuring the coverage of a design system using React Scanner. The tool helps analyze code and extract component details, allowing for the measurement of component usage and identification of patterns. The analysis also reveals anti-patterns in the design system consumption. By restructuring components, data-driven decisions can be made to optimize component usage at a route level and address anti-patterns.
Figma to React With AI, Are We There Yet?
React Advanced Conference 2023React Advanced Conference 2023
21 min
Figma to React With AI, Are We There Yet?
Watch video: Figma to React With AI, Are We There Yet?
Today's Talk explores how AI can empower developers to write better React code and automate the process of converting Figma designs into code. It discusses the use of heuristics to convert Figma designs into working HTML code and the potential of AI in generating better CSS class names. The Talk also highlights the importance of generating code that follows team conventions and automating design and code updates. Finally, it emphasizes the benefits of using large language models to automate tasks and improve developer productivity.
Thinking Differently About a11y – Accessible Website Design for the Neurospicy
React Advanced Conference 2023React Advanced Conference 2023
30 min
Thinking Differently About a11y – Accessible Website Design for the Neurospicy
Watch video: Thinking Differently About a11y – Accessible Website Design for the Neurospicy
Accessibility goes beyond screen readers and semantic HTML, and it's important to consider the needs of neurodivergent individuals. Cognitive impairments pose unique challenges, and COGA provides valuable guidelines for designing for cognitive accessibility. Customization, error tolerance, and compatibility with browser extensions are crucial in improving user experience. The NHS design system prioritizes functionality and has proven effective in handling emergencies. Understanding user needs and advocating for change within the tech industry are essential for creating a more accessible web.
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
JSNation 2023JSNation 2023
10 min
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
The Talk discusses the use of dialogues and popovers in web development. Dialogues can be modal or non-modal and are now accessibility-supported. Popovers are versatile and can be added to any element without JavaScript. They provide suggestions, pickers, teaching UI, list boxes, and action menus. Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Browser support for these features is expanding, but there are still open questions about positioning, semantics, and other use cases.
The Sorcery of Building a Cross Platform Design System Architecture
React Day Berlin 2022React Day Berlin 2022
23 min
The Sorcery of Building a Cross Platform Design System Architecture
This Talk discusses the development of a cross-platform design system architecture. It explores different approaches and proposes a unified API that works across web and native platforms. The Talk covers techniques for resolving files and declarations, configuring bundlers, and testing for both web and native platforms. It also highlights the bundling of TypeScript types and handling accessibility for different platforms.
Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
React Advanced Conference 2022React Advanced Conference 2022
118 min
Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
Workshop
Richard Moss
Richard Moss
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
Developing and Driving Adoption of Component Libraries
React Advanced Conference 2022React Advanced Conference 2022
22 min
Developing and Driving Adoption of Component Libraries
Logan Ralston
Lachlan Bradford
2 authors
Today's Talk discusses the importance of a good component API and the balance between rigidity and flexibility. The demo showcases the gradual evolution of a component's configurability while maintaining ease of use. Measuring the effectiveness of a component library involves factors like adoption rate and component coverage. Collecting data and embracing breaking changes are crucial for continuous improvement. Ensuring consumers are updated and on the cutting edge is a responsibility of the library provider.
Build a Design System with React and Tailwind CSS
React Summit 2022React Summit 2022
27 min
Build a Design System with React and Tailwind CSS
Top Content
This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.
Find Out If Your Design System Is Better Than Nothing
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.
Introducing Design System to Multinational Web Apps
React Summit 2022React Summit 2022
18 min
Introducing Design System to Multinational Web Apps
Octopus Energy introduced design systems to address challenges in maintaining brand identity, accessibility, and developer experience. They built a component library using design guidelines and accessibility best practices, following Bradfrost's atomic design methodology. They used TypeScript, Jest, Versal, and Storybook for building and testing the library. The design system is an ongoing project that evolves with the product and business over time.
Walking the Line Between Flexibility and Consistency in Component Libraries
React Summit 2022React Summit 2022
27 min
Walking the Line Between Flexibility and Consistency in Component Libraries
This Talk discusses the comparison between Polaris and Material UI component libraries in terms of consistency and flexibility. It highlights the use of the action list pattern and the customization options available for the action list component. The Talk also emphasizes the introduction of a composite component to improve API flexibility. Additionally, it mentions the importance of finding the right balance between flexibility and consistency and the use of types to enforce specific child components.
Design Systems of a Down: Steal this Guide!
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!
Design Systems - Revamping Products for Consistent UIs
React Summit Remote Edition 2021React Summit Remote Edition 2021
13 min
Design Systems - Revamping Products for Consistent UIs
This Talk explores the core components of design systems, their benefits and challenges, as well as the importance of having a design system for products. It also discusses the concept of a design language and its role in creating a design system. The section on building a design language and component library emphasizes the significance of selecting options for a design language and creating reusable components. The section on building and scaling design systems highlights the benefits of design systems and the challenges involved in building and scaling them. It also mentions the changing mindset towards recognizing the value of design systems in the competitive space.