Best of Design Systems — 2023
- 1
- 2
Community Picks·3y
Why we're bad at CSS
CSS is more like putting their hand in the pain box from Dune while some product manager has a gom jabbar to their neck, daring them to pull their hand out. Despite the latest advancements in CSS, many are still stuck in this kind of BEM mindset, trying to encapsulate everything.
- 3
asayer·3y
UX: best practices for developers
User experience (UX) is a critical component of web development that can make or break the success of a website or application. UX refers to the user’s overall experience when interacting with a website, app, or product. A well-designed UX can increase user engagement, retention, and conversions, resulting in better commercial outcomes.
- 4
Tool for front-end teams
Backlight empowers front-end teams to build and ship great design systems. Design systems boost productivity, quality and scalability of a product. But they're often costly and time-consuming to build. Backlight renders pull-requests visually for effortless checks and reviews.
- 5
Introducing Figma’s New Dev Mode
Figma was born on the web, an unconventional start to a design tool, but one we felt needed. With a single link, designers could collaborate on in-progress work, sharing early explorations, rather than safeguarding designs. The easier it is for teams to design, document, find, and implement high-fidelity designs.
- 6
Building a Design System with React Web Components
Building a Design System with React Web Components is a simple way to build a universal design system with React. We compiled React to Web Components using wrappers, polyfills and tooling to make them work in every context. The implementation turned out tougher than we anticipated but we're happy with the result.
- 7
8 design system management tools for organizations
8 design system management tools for organizations 8 design systems for startups & organizations 10 min read. Design systems are also challenging to build, maintain, and evangelize across tools and teams. Here’s a list of the leading tools for building, managing, and maintaining your design system.
- 8
ITNEXT·3y
Why Web UI Development Is So Hard?
This piece aims to dissect the inherent challenges of web UI development, from the discrepancy between web languages and the modern UI requirements. We’ll explore often-overlooked ‘unhappy paths’ such as loading states, error handling, and broader architecture considerations including security, performance, and accessibility.
- 9
All the ways to use a Design API
A Design API offers a new kind of flexibility for product teams. Teams can use a branding which is always up-to-date by configuring the Design API to automatically collect and distribute design data. The first idea that comes in mind is to update design data from design to code.
- 10
UX Planet·3y
Design Systems: A Beginner’s Guide
Design Systems are a collection of reusable components, patterns, and guidelines that help teams create consistent and user-friendly products. They’re becoming increasingly important in product design, as they can help teams save time, improve collaboration, and create better products. There are many different ways to create a design system.
- 11
Building a modern design system in layers
Building a modern design system in layers is a good way to evolve it well, and to make it so good that developers are happy with it even if they don’t like the rigid choices that were made. Modern CSS can do so much these days. Start building out as much of the design system as possible with HTML and CSS.
- 12
Create your own Design system: Chapter Color tokens
Color tokens are used in design systems to represent colors in a concise and manageable way. They help ensure consistency, reusability, and easy maintenance of colors in design systems. To set color tokens effectively, you need to define a color palette, assign meaningful names, organize variants, document the tokens, consider accessibility, test and gather feedback, implement version control, integrate with design tools, promote collaboration and communication, and regularly update and maintain the tokens.
- 13
Bits and Pieces·2y
Building a Component Library with React and StyleX
Learn how to build a component library with React and StyleX using Bit as a build system. The tutorial covers creating a new Bit workspace, creating components with StyleX, using tokens and themes, pushing components to bit.cloud, and installing components in a project.
- 14
Create your own Design system: Chapter Colors
Color theory is the study of how colors interact, combine, and evoke certain emotions or responses. The color wheel is a circular arrangement of colors that helps us understand their relationships. A well-defined color palette in a design system ensures consistency, accessibility, and cohesiveness across various elements of a design.
- 15
freeCodeCamp·3y
How To Create A Design System In Next.js With Tailwind CSS and Class Variance Authority
A design system is a set of reusable UI components and design tokens. These tokens are like building blocks that include things like buttons, colors, and fonts. After designers make these parts, developers can use different tools to actually use them and build the website. This method keeps your codebase focused and efficient.
- 16
Top 5 Design Systems That Streamline Design Process
For each design system, we will provide a Figma UI kit so you don’t need to create UI elements from scratch. The HIG is a must-have tool for anyone who wants to build a product for the Apple ecosystem. Microsoft Fluent 2 is the next evolution of Microsoft’s design system.
- 17
LogRocket·2y
17 Figma design systems you need to know about
Design systems are curated collections of properties, components, and templates used to maintain consistency in digital product design. Some popular design systems include those for Apple, Google, Microsoft, Uber, Salesforce, Shopify, Atlassian, and IBM. Premium design systems offer more versatility and frequent updates. Useful Figma plugins and essential shortcuts can enhance design system management and speed up the design process.
- 18
- 19
Rapidly build UI components without sweating over the logic.
Zag - Rapidly build UI components without sweating over the logic. Built-in adapters that connect machine output to DOM semantics in a WAI-ARIA compliant way. Zag machine APIs are completely headless and unstyled. Use your favorite styling solution and get it matching your design system.
- 20
Design System — Fundamental principles for designing and developing a robust Design System.
A Design System is a large set of reusable components combined with a set of rules, using visual design elements like colors, spacing, or shapes. It enables you to deliver a consistent design in less time. It doesn’t only save your time but it helps in maintaining a consistent experience.
- 21
Hacker Noon·3y
Design of a Scraping Platform
Design of a Scraping Platform can be split into 2 categories that require different infrastructure and techniques. The system only has one functional requirement: it must be able to execute arbitrary scrapers on schedule. Scrapyd deploy eggified Python packages Packages may include dependencies in the egg file and different scrapers may use different versions.
- 22
- 23
- 24
Trendyol Tech·3y
Introducing Trendyol’s Open-Source Baklava Design System
Trendyol’s Open-Source Baklava Design System is a design system that aims to provide a consistent, accessible, usable, and multi-purpose design language that can be used as a base for many types of digital projects. The return of investment in Design Systems, which accelerates design and development, is enormous.
- 25
Behind the scenes of designing a design system component
Rama Krushna Behera shares his insights and experiences behind the scenes of designing a design system component. The process starts with auditing existing components in different products across all business units of Razorpay. This article will briefly answer both of these questions and I hope to give you some clarity by the end.