#design systems

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.

Let me walk you through introducing design system into mature codebase loosely based on Clio. Mature codebase challenges: inconsistent components and styling, multiple color palettes, and inconsistent design patterns. Working in siloed squads led to difficult maintenance, slow onboarding, and disjointed user experience. Design system squad realized the need for a plan and data to guide them. We need data to guide us. A React scanner library enabled us to crawl through the code base and understand the components used. Technologies like GitHub Actions, Redshift, and Count were used to store and query the data. The script involved running a scanner, configuring it, and sending the data to Redshift via Fivetran. ReaRscanner provided the pattern for processing data. We collected and sorted data on component usage and imports to identify pain points and track trends. Collaboration was a challenge, so we engaged teams through surveys, office hours, and extensive documentation. Our goal is to achieve over 60% adoption of the design system. We worked on keeping a single source of truth in our design system. Zero Height is our platform for storing component documentation, integrating tools like storybook and Figma, and ensuring alignment across design and code. Design systems are more than components and tokens; they create a shared language and process that facilitate teamwork and alignment.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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!

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.