Hacker News Reader

Comment by ProxCoques | Hacker News Reader

I know the "technology-specific implementation" is optional, but one thing that bugs me (as a designer) is that no design system I've ever used has had any ability to tell me where, how often, or even whether a particular component is in use in the production UI. So if I wanted to change it, what's the impact? Nor can I tell by looking at the production UI whether something that looks like a component is actually one, or just an "impostor" that won't change if the component I've changed is updated.

A possible exception to this is some CMS systems I've dealt with that can sometimes tell you this, but they don't typically cover the whole of the product's UX. But I do wish the tech stacks would recognize this issue.

View on HN

Luro [0] by Dave Rupert has been developed to solve just this problem.

[0] https://luroapp.com/

Ah interesting - and endorsed I see by Brad Frost too (although it's interesting he doesn't identify the issue in this Ecosystem post, so perhaps he does't see it as quote the holy grail, but hey).

I'm skeptical this would work with crawling for anything other than the most basic toy websites. How can this identify components that use generated class names (any css-in-js, css modules, etc)? Can it pull prop usage out?

I gave it a try on just our public login page and it said "no pages found" - perhaps it doesn't work for single page apps?

I think this is done by CSS Post-processors like PostCSS. Just as post-processors removed un-used classes; it would be to get a log or manually run it to get how often a class is used to tell you which components powered by that class is used in product/dev or wherever.

I’ve been away from development for quite a while but I remember using simpler tools before the days of easy-to-use post processors.

Here is how to use Grep to look for occurrences of specific classes, elements, etc to tweak/track or do something with it. https://brajeshwar.com/2013/hijacking-developer-tools-optimi...

> has had any ability to tell me where, how often, or even whether a particular component is in use in the production UI

I built a dashboard to display this for the design system I work on at my day job to give product designers better visibility into production, using a library called react-scanner[0] and some logic related to the way our different product repos are structured / places where the component names are different between figma and react. there are probably other libraries for this sort of thing in different ecosystems, and you can always build your own with a parser as well.

[0] https://github.com/moroshko/react-scanner

This is something we’ve built internally and I’ve found it super useful, even though it basically just reports on occurrences, not exact usage (can easily say how many usages of Button, but not the green Button).

This is a really interesting use case. Because the Figma components are not directly tied to the code, you’d need strict naming convention adherence if you wanted to build a tool that would support that.

Not necessarily. Figma outputs the appropriate CSS - I think you could probably pattern-match one to the other with a relatively simple model by looking at sizes, colors, shadow settings, defined states, and perhaps even by rendering it out and doing image matching.

What I do is ctrl-f in the codebase to look for the name of the React component. This tells me how often it’s being used, and I can see exactly where and how.

Reply on news.ycombinator.com