Best of Design Systems — 2024
- 1
- 2
gitconnected·2y
System Design Interview Question: Design Spotify
This post discusses the system design of Spotify, including the initial base version requirements, estimation of data storage, high-level design, data storage options, SQL database structure, and scaling techniques for a larger user and song base.
- 3
- 4
Community Picks·2y
Best design system examples
Exploring top design system examples to help build or improve your own, this post covers the essentials like consistency, efficiency, scalability, collaboration, and quality control. Featuring IBM's Carbon, Atlassian's, and Adobe's Spectrum design systems, it offers insights into unique approaches and best practices in design systems.
- 5
DEV·2y
Practical Guide to Creating a Design System
Creating a design system involves selecting a suitable UI framework, defining both light and dark themes, and organizing the system into a reusable package. Using tools like Storybook for documentation and ensuring regression UI testing minimizes unexpected issues. Avoid custom CSS and components to reduce complexity and maintenance costs. While initially labor-intensive, this approach significantly reduces the marginal cost of developing new front-end pages.
- 6
Top Headless UI libraries for React in 2024 | Blog
Explore the top headless UI libraries for React in 2024, including Radix UI, Headless UI, React Aria, Aria Kit, Ark UI, and Reach UI. These libraries prioritize accessibility, customization, and scalability, offering distinct advantages for web development and inclusive design practices.
- 7
Chakra UI
Chakra UI offers accessible React components to build high-quality web apps and design systems, compatible with Next.js. It streamlines design with semantic tokens, customizable typography, and component variants. Highly praised for its built-in dark mode, accessibility, and time-saving features, Chakra UI boasts significant community support and adoption.
- 8
asayer·2y
Design Systems for Front End Development
Design systems in front end development are collections of reusable components with clear design standards. They include a design language, component library, and style guide. Benefits of design systems include scalability, design consistency, faster development, and accessibility. Setting up a design system involves collaboration among designers, developers, product managers, and accessibility experts. Metrics and analytics are important for evaluating the impact and effectiveness of design systems and can be used for continuous enhancement.
- 9
Dev Squad·1y
Customized Shadcn UI Components | Just Copy & Paste
Shadcn UI Customized components provide a collection of ready-made, customizable components that retain the flexibility of Shadcn UI's design system. These components are designed to simplify the customization process by allowing users to preview, copy, and implement them directly into their applications.
- 10
- 11
Bootcamp·2y
Atomic Design System Explained
Atomic Design, introduced by Brad Frost in 2013, is a methodology that breaks down user interfaces into fundamental components to create scalable, consistent, and maintainable design systems. The process is structured into five stages: Atoms, Molecules, Organisms, Templates, and Pages. This approach ensures a systematic and efficient design process, enhancing collaboration, scalability, and user experience. Key elements include typography, color palettes, icons, UI components, and design principles. Atomic Design is increasingly relevant for developing complex digital products that require a cohesive and adaptable design framework.
- 12
Medium·2y
Design systems: simplifying documentation writing
Creating a design system documentation can be daunting but essential for effective usage. Documentation is split into intangible parts (principles) and tangible parts (patterns, components). Using a Work Breakdown Structure (WBS) can simplify this task by breaking it into manageable pieces, prioritizing tasks, and tracking progress. Helpful techniques include using templates and examples from other design systems. Always consider the audience, steal useful ideas, aim for functionality over perfection, and maintain documentation through continuous feedback and alignment across teams. Existing systems like Tailwind or Material UI can also be beneficial, especially for smaller teams.
- 13
BRiCSS
BRiCSS provides a simple, low-level CSS abstraction with a naming convention based on abbreviations. It creates optimized CSS files for responsive design by focusing on properties that are actually used. The solution requires only a browser, generates automatic documentation, and supports offline operation. It integrates well with design systems and allows users to instantly see the file size impact of their settings, with options to copy or download the latest custom CSS library.
- 14
Javarevisited·2y
How does YouTube stream millions of videos daily?
This post explores the system design of YouTube and discusses its functionality, building blocks, requirements, database design, and workflow. It also provides estimations for storage and bandwidth requirements, and explains how YouTube ensures low latency, scalability, availability, and reliability.
- 15
UX Planet·2y
6 New Design Systems & UI Kits 2024
As digital technology advances and the demand for user-friendly interfaces grows, new design systems and UI kits for 2024 are becoming essential. Notable mentions include Razorpay's Blade Design System, Atomised Design System, Jordan Hughes' Design System, Wanted Design Library, Design To Code UI Kit, and Design System Strategy. These tools offer a range of components, styles, and features to streamline the design and development process, catering to both beginner and advanced users.
- 16
- 17
builder.io·2y
The Hidden Challenges of Design Systems (And How to Solve Them)
Implementing and maintaining design systems in large enterprises presents multiple challenges, including adoption, cross-framework compatibility, design handoff issues, and consistency. Solutions include frictionless integration, using framework-agnostic components, integrated design-to-code pipelines, and automation for synchronizing design and code. Tools like Builder.io's Visual Copilot and Mitosis are highlighted for their effectiveness in addressing these challenges.
- 18
Design and deliver icons to +8m users
Designing icons for millions of users involves a complex process that ensures visual consistency, user-friendliness, and scalability. Learn how the blu Bank team unified its visual language, overcame design challenges, and maintained brand identity. Key aspects include readability, incorporation of brand elements, and a well-defined, collaborative design process that ensures seamless handoff from design to development. Continuous improvement and stringent design guidelines further aid in creating a cohesive and scalable icon pack.
- 19
Optimising your design system with Figma’s variables
Learn how to optimize your design system using Figma's variables. Explore the principles of consistency, scalability, maintainability, DRYness, and code-friendliness. Discover the benefits of primitive variables and how to set them up in a Codesign system. Understand the concept of semantic variables and their compatibility with different modes. Start building your own design system today!
- 20
- 21
- 22
Hacker News·2y
CSS Classes considered harmful
The post argues against using CSS classes, considering them an outdated system that leads to various issues, such as combinatorial explosion and specificity conflicts. Instead, it suggests using modern web development tools like attributes, custom tag names, and custom states to better manage and style web components. The author critiques existing methodologies like BEM, Atomic CSS, and CSS Modules, highlighting their limitations and proposing attributes and custom tags as more robust alternatives.
- 23
Piccalilli·1y
Making content-aware components using CSS :has(), grid, and quantity queries
Creating content-aware components is crucial in design systems to account for various use cases. This guide demonstrates using modern CSS techniques like :has(), grid layouts, and quantity queries to build adaptable components without relying heavily on JavaScript. A 'Simple List' component example is used to illustrate handling varying badge counts elegantly with CSS. The discussion includes leveraging container queries for enhanced responsiveness and recognizing limitations such as browser support and content localization considerations.
- 24
Design System Contribution Models
Contribution models allow product teams to enhance design systems without compromising quality. This post reviews three popular models: Nordhealth's hybrid model, which balances centralized control with team input; Pluralsight's waste reduction model, which focuses on minimizing redundant efforts; and Canonical's code quality model, which includes a decision tree and emphasizes QA in pattern creation. Each model has a distinct process for introducing and reviewing changes to maintain or improve the system's integrity.
- 25
Getting Started with Mitosis: Creating a Cross-Framework Design System
Mitosis is an open-source tool that allows developers to create a single source of truth for reusable components in design systems. It supports multiple web frameworks and eliminates the need to rewrite code for each framework, promoting consistent design and enhancing productivity.
