#designsystems (204 links)
- DesignSystemHunt.com designsystemhunt.com
- The Component Gallery component.gallery
Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems.
- Creating a Future-Proof Design System: Comparing Tools vs. Headless – Blog – Supernova.io supernova.io
This methodology involves decoupling the design tokens and elements from their implementation, allowing them to be applied across various platforms and technologies. This platform-agnostic nature of headless design systems makes them highly scalable and suitable for organizations that have a presence across multiple digital mediums beyond just the product.
So, essentially a reframing of what we called the Spotify Model in 2019, based on the "Reimagining Design Systems at Spotify" talk.
- Design Systems Database: Surf among top‑notch Design Systems designsystems.surf
- Brands as Operating Systems | LinkedIn linkedin.com
If you’re designing a brand today, you’re designing a digital entity. You’re also designing a shared entity. Brands today aren’t the work of lone geniuses. They are collaborations between marketers, product people, partners and customers.
- How to (properly) break your design system breakyourdesignsystem.com
Systems thinking allows your work to reach more people.
If a component doesn’t align with the project’s vision, it’s not sacrilege to customize or create entirely new elements.
- The Design System Ecosystem bradfrost.com
What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together as a…
Now, you may be asking yourself, why didn’t they use Figma, or Sketch, or Photoshop (lol), as their single source of truth? As much as we love Figma, we know that design tools come and go, but our icons are forever, so Github made the most logical sense. And given that it’s where our code lives, it kept things simple too.
Good "don't keep your assets in your flavour-of-the-month design tool" evidence.
- Component Specifications medium.com
What to include, where it goes, and why it matters more now
- The EightShapes Specs Figma Plugin medium.com
- An incoherent rant about design systems • Robin Rendle robinrendle.com
The hard truth is this; your Figma docs should be treated like a sketch on the back of a napkin. It should be somewhat accurate but it’s a tool that reflects the front-end, but: it ain’t your design system.
- Adapting a design system to work for the Metaverse stackoverflow.blog
- Open Props open-props.style
Supercharged CSS variables.
Via monospaced.
- A History of Design Systems on the Web - The History of the Web thehistoryoftheweb.com
So many familiar notes in this tale.
The Presentation Layer, our React-based rendering layer for the new BBC website, is a monorepo that includes the design system. Only web pages created in the monorepo can use the design system. And, most importantly, any changes to components in the design system are rolled out instantly.
- EightShapes > @components > Component Testing Plans eightshapes.com
Quality stems from and is proven by an implemented testing plan by which components are inspected prior to release. This article describes criteria and tools for testing components and how to order making them at a high level to help teams plan.
Consistency alone can produce consistently poor outcomes without flexibility. If the system is too strict, teams are constrained and the results are rigid and dull.
- “Useful Sections for a Design System Reference Site,” an article from SuperFriendly superfriendlydesign.systems
- Motion Design System — A Practical Guide medium.com
Using a standard motion design system may benefit your business with:
* Much shorter animation developing time * System-wide motion consistency * Faster decision making when designing new animations
This article will show you step by step how I created and delivered our motion design system.
- Text for Proofing Fonts | Fonts by Hoefler&Co. typography.com
Via Popular.
- What design system tools will look like in the future — Tanner Christensen tannerchristensen.com · Archived on
- Easily Use Design Tokens In Eleventy: HeydonWorks heydonworks.com
- Design Tokens beyond colors, typography, and spacing. badootech.badoo.com
- Through a design system, darkly. — Ethan Marcotte ethanmarcotte.com
- “Making Design Systems Public,” an article from SuperFriendly superfriendlydesign.systems
- Morningstar Design System v2.35.0 - Versioning & Breaking Changes designsystem.morningstar.com
- Tokens in Design Systems medium.com
Create beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.
- Systems, Mistakes, and the Sea › Robin Rendle robinrendle.com
The state of things was surely overwhelming but it was also an important lesson; it’s impossible to judge the quality of a design system from looking at the ui. Just as a ship might look like the most beautiful vessel in the world (with the most intricate wooden carvings on the hull and the brightest, loveliest sails drifting peacefully in the breeze, etc. etc.), deep down in the hold however, the leaks might be too much to repair, the whole vessel creaking under the pressure of its own frame.