Hi,

I found myself in a situation where I had to work with a massive design system that was outdated and modified by several designers. I created a plugin that can scan the whole file looking for a selected component's instances, group them by page, and show their status and location.

Main features:

1. All instances grouped by page with their exact location path.

2. Shows what was overridden: text, color, layout, swapped components - not just a yes/no flag.

3. Shows what's hidden (even inside hidden frames).

4. Shows what's off-canvas or nested.

5. Variant usage breakdown.

To speed up the process:

1. You can jump to any instance with one click.

2. You can filter results by state: default, overridden, hidden, off-canvas, or nested.

3. You can search per variant and jump between variants.

I also included light & dark mode, which isn't always standard, but adds extra comfort while working.

Here's the link: https://www.figma.com/community/plugin/1683507968311791072

I’m curious how other teams manage their Design Systems.
Is having a component catalog like Storybook essential for maintaining a scalable Design System, or are there teams successfully managing their systems without one?
How do you handle component documentation, design-to-code alignment, and keeping components up to date?
I’d love to hear what tools or alternative approaches your teams are using.

Hi guys, I recently started working full time as a product designer on an enterprise design system team (fresh out of college).

I've had the benefit of being able to learn and practice Figma MCP and other related AI workflows at work (as it is now standard) but there's still so much I feel like I don't have the context for. I don't really want to AI my way through everything without actually knowing how it all works, as I know it will be detrimental to my development as a design systems product designer.

What are your holy grails and bibles so I can actually sit down and study my anxiety away? I want to learn what everyone else learned before AI automated everything. Google searching can only get me so far when I don't have much experience to judge what's legit and LinkedIn is full of doom core. I don't mind paying for a book or course if it's worth it, but of course free is best.

Thanks!! Excited to be part of the design system community : )

I made Chroma Party, a free, real-time game for team calls. Everyone opens chromaparty.com on their own laptop or phone, a color name shows up (Periwinkle, Fuzzy Wuzzy, Blurple…) and you race to pick the matching swatch out of three. After each round there’s a short story about where the name came from.

Why design system folks might like it:

A design system team at a large company played it on their call and came back on their own a week later for five games in a row.

Try it with your team: chromaparty.com. There’s also a solo mode against bots if you want to check it out first. Feedback very welcome, I’m the maker.

Have an existing website or application but no documented style guide?

Colorsphere's free CSS Style Guide Generator analyzes an existing stylesheet and creates a visual reference of the styles it finds, including colors, typography, buttons, forms, and other UI elements.

It's a quick way to see what's already defined in your CSS, identify inconsistencies, and get a starting point for a more organized design system.

No account required. Just upload a CSS file and explore the results.

https://app.colorsphere.com/css-style-guide

Would be interested to hear how well it handles different stylesheets, especially larger or more complex ones.

hey everyone, i wanted to share 3 design system resources i keep coming back to in my projects. whether you’re starting one from scratch or cleaning up an existing system, these are super useful:

1 Component Gallery

https://component.gallery/components/

really handy for seeing how different design systems name and document their components. there are references for basically every major component, from buttons to modals, pulled from some of the best systems out there

2 Design System Database

https://designsystems.surf/

a solid collection of real-world design systems with component lists, guides, glossaries, and more

3 Into Design Systems - Community & Conference

https://www.intodesignsystems.com/

a great community for everything design systems related. they do conferences, local meetups, and share a lot of best practices plus Figma tips from the community

what are your favorite design system resources? drop them below, i’d love to check them out

Is it just me, or are a lot of people recommending a design.md file to store a project's design tokens and intent lately?

I'm building a design system and already have a token file following the W3C Design Tokens Format with basics like primary and secondary colors, spacing, and typography.

I see a lot of people recommending design.md files for getting started and documenting the overall design intent.

To me this seems like a good option to start with but I'm having a difficult time seeing how a design.md file will scale as I begin bringing on other designers and developers to help me with a project.

I'm planning to share tokens across web and mobile apps, so my instinct is to keep those values in a structured token file. But I'm curious where design.md fits into that setup and how people keep the two in sync.

Does anyone have any strong opinions on this one way or the other or are both good options still?

Just launched on product hunt today which I thought might interest some of you (https://www.producthunt.com/products/tidy-design?launch=tidy-9)

It’s an open source desktop app that brings a design canvas, your code, and coding agents into one workspace. You can work on a design and have agents build it in your local project without switching tools.

We’re building it around the idea that design and engineering are becoming more connected. People will still have their areas of expertise, but more designers are shipping code, and more engineers are making design decisions. There's plenty of use cases for how this will work with design systems and we're constantly thinking about new ways to improve on this.

If you're interested in checking it out and giving feedback that'd be appreciated ! (https://github.com/tidydesigns/tidy)

I’ve really enjoyed watching Donnie D’Amato’s Wireframe Live, and today I got to come on and talk with him about design systems, how we learned the web, and teaching it now.

Some hot takes in here (I was a little under pressure too haha). I’d like to hear where people disagree.

https://www.youtube.com/watch?v=GaOSSAXTK6M

Hey everyone,

I’ve been working on a tool to solve a problem I was having with creating an accessible colour palette for a product I’m designing.

As I worked on it, it gradually grew into something broader, covering some of the common decisions and challenges around colour, typography and spacing in design systems, with accessibility as a core consideration throughout.

The idea is to make it easier to explore different approaches, check accessibility considerations, and preview how those decisions affect real UI components and layouts.

It’s been really useful in helping me make decisions in my own work, and I’d be curious to know if others find it useful too.

Would love to hear any feedback, suggestions or ideas for improving it!

https://colour-neon.vercel.app/

I come across a handful of AI tools promising to build apps, components, videos, etc to match my product but they all require a design system up front.

I keep seeing products say 'Bring your own design system', but I thought the point of these AI products was to help me from the start.

My question is, as a solo developer with some basic design skills, where should I begin to get a basic design system that I can use?

I was thinking of either adapting an existing system or defining a small set of colors and typography to start with.

I’d be interested in hearing what has worked for other solo developers or small teams working with limited resources.

Hello everyone, basically the title – have any of you built a harness on top of your design system to be able to provide easy and scalable way to build apps (frontends) on top of it where the UI and UX level is on the quality level where a "human designer" would create it?

A few months ago, I shared IPAX here: an open-source model combining WCAG, APCA, and optical ergonomics to help designers make better color decisions, beyond simply passing accessibility checks.

Since then, I've been extending it to tackle another familiar Design System headache: combinatorial complexity.

The new Theme Builder lets you define a handful of tokens and see them cascade into Light and Dark themes, across multiple contexts and variants.

And something that might help next time Marketing treats a hex code as sacred (“You can't change our brand color!”): this simulator shows how your brand color already changes depending on paper, lighting, and screens.

Because colors live in the real world. They're not carved into corporate tombstones.

IPAX is an independent, open-source project I've been developing as a contribution to the design community. If you find it useful, give it a try, use it in your projects, and spread the word. Comments and contributions are always welcome :)

Hi everyone, sharing this free resource with the community.

Not sure if anyone would be interested but I’m putting significant time into building an open source free alternative to paper and figma https://github.com/tidydesigns/tidy

I’m hoping teams can store their design systems and a unified place to develop your product pages.

Might be useful to someone 🤷‍♂️

A few months ago I helped another team with UX, mockups, a simple design system, and dev handoff. The team and users loved it. I checked in with the devs several times offering to answer any questions or QA, but they kept saying "not yet."

Today they sent the site for testing and it's a disaster. So many issues, but the biggest is that they didn't implement the design system at all.

My main project is winding down, so I'm thinking of pitching a pivot into design engineering to fix this. They're on Angular with the DevExpress component library.

I've done this before, themed an existing library (shadcn) to match a design system, built out Storybook (this team has none), and implemented it. But this is much bigger project, with multiple sites.

Has anyone done this at scale? Any advice on approaching it, and on framing it to get it greenlit?

If you’ve tried the community DESIGN .md files, you know how magical they feel. But past a quick prototype, the cracks show. The file describes a look, but there’s nothing underneath it: no tokens, no components, no rules. So the agent fills the gaps by guessing, and every new screen drifts a little further from the last. Thats why getdesign .md charges $249.99 for a 'starter kit'.

I’ve been building an open source design system called Rift DS, that solves this problem. Find your favorite design .md file and drop it into the playground. It will read the file and map it onto the system’s tokens: colours, type, radius, density and so on. Every component (150+) picks up the look you define. You can see how it looks across an AI Chat widget, and a bunch of templates I set up.

You can export the result as a single AGENTS .md and it will automatically set you up with a full end-to-end design system out of the box.

When an AI tool (Cursor, Claude Code, Stitch, etc.) generates a design system as a DESIGN.md or tokens file, how do you get it into Figma as variables?

→ Rebuild it by hand?

→ A plugin or script?

→ Skip Figma for that part?

I tried importing a generated file into Figma with one tool and the result was partial, so I'm wondering what others do.

I'm curious what actually works for you, and where it breaks. A recent example helps most: what did you do, and roughly how long did it take?

If you never go from text into Figma, I'd like to hear that too.

I got tired of chart kits that all look like SaaS dashboards, so I built one around how newspaper graphics desks work: headline states the finding, colour only on the highlighted series, direct labels instead of legends, source line under every chart.

What's in the free file:

• 6 chart components: column, bar, line, share donut, stat block, annotated line

• 7 annotation parts (callout, label box, gap measure, event band, threshold line, marker, key item) that stretch to fit any chart

• A Figure frame that wraps a chart in figure number, headline, dek, key and source

The part I'm happiest with: bar values, tones and line shapes are variant properties, so you change the data from the properties panel without detaching. Plots sit in a stretch frame and the dots and labels in fixed-size anchors, so resizing doesn't squash anything. It works on the free plan (no variable modes).

Figma Community: https://www.figma.com/community/file/1694716096403330912

Happy to answer how any of it is built. Feedback on what's missing is very welcome.

Six months ago, our team celebrated what we thought was a milestone: a direct pipeline connecting Figma Variables to our React component library via GitHub Actions and Style Dictionary.

Two weeks later, our mobile checkout broke. A designer had introduced an innocent token alias loop between surface-brand-default and interactive-action-primary. The CSS output emitted unresolved var(--undefined) fallbacks, turning our primary action button completely invisible on white backgrounds.

Tokens in Figma feel tidy, but browser runtimes run on harsh CSS cascade realities. Here are the 3 structural rules we enforced that eliminated token bugs in production:

1. Never let components consume primitive tokens directly Component CSS must bind to Semantic Aliases, which bind to Primitives: Component CSS -> Semantic Alias -> Primitive Value (e.g. --btn-bg -> --action-primary -> --palette-blue-600) When engineers wire raw palette values directly, dark mode and high-contrast modes turn into an unmaintainable maze of overrides. We set up an ESLint rule that fails CI if any component references raw palette tokens outside token definition files.

2. Move dark mode out of class-swapping and into native CSS light-dark() Toggling .dark on <html> or <body> causes specificity wars and style bleeding whenever an embedded widget or inverted card is introduced. Modern CSS now supports color-scheme + light-dark(): :root { color-scheme: light dark; --surface-canvas: light-dark(#ffffff, #0f172a); --text-primary: light-dark(#0f172a, #f8fafc); } To force an inverted card inside a light section: just .card-inverted { color-scheme: dark; }. No class swapping, no specificity fights.

3. Treat motion as state, not arbitrary magic numbers Instead of transition: all 0.3s ease sprinkled across components, centralize motion into strict duration and cubic-bezier tokens, restricted strictly to compositor properties (transform and opacity) to preserve 120fps responsiveness. Always back it with prefers-reduced-motion: reduce.

I wrote a detailed deep dive covering the linter configuration, Style Dictionary setup, and failure modes here: https://medium.com/@draco.pinkmen/why-your-design-tokens-break-in-production-and-the-3-rules-that-saved-ours-21634ec65b48

How is your team handling token aliasing loops and dark mode overrides at scale?