3 ms·

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 abil

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.

danielvaughn 3y ago
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.
- finite_depth 3y ago
  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.
madeofpalk 3y ago
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).
Brajeshwar 3y ago
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-optimize-design-grep/ https://brajeshwar.com/2013/hijacking-developer-tools-optimi...
stugrey 3y ago
Luro [0] by Dave Rupert has been developed to solve just this problem. [0] https://luroapp.com/ https://luroapp.com/
- ProxCoques 3y ago
  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).
- madeofpalk 3y ago
  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?
tribby 3y ago
> 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 https://github.com/moroshko/react-scanner
cjcenizal 3y ago
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.

danielvaughn 3y ago

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.

finite_depth 3y ago
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.

madeofpalk 3y ago

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).

Brajeshwar 3y ago

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-optimize-design-grep/ https://brajeshwar.com/2013/hijacking-developer-tools-optimi...

stugrey 3y ago

Luro [0] by Dave Rupert has been developed to solve just this problem. [0] https://luroapp.com/ https://luroapp.com/

ProxCoques 3y ago
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).
madeofpalk 3y ago
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?

tribby 3y ago

> 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 https://github.com/moroshko/react-scanner

cjcenizal 3y ago

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.