It has been a hard work of months gathering and rating each system based on the following criteria:
◆ Number of components
We went through each Design System and UI Library one by one, counting and recounting each of the defined components.
◆ Popularity
We collected dozens of posts and mentions on LinkedIn, Twitter, Instagram, articles on Medium, blog posts, etc. And we organized them from the most mentioned to the least mentioned.
◆ Updated?
We review the date of their last commits, resolved issues, releases... to determine whether the System is still receiving maintenance or not.
◆ Does it have a Figma?
We reviewed in great detail whether the System had a public Figma. And if not, we checked if there was a popular Figma created by the community itself.
◆ Does it have an open repository?
This one was not so complicated. Most systems have a Github or a public repository, and generally, the link is visible on their page.
◆ Does it have a StorybookJS?
This was more complicated, as not all systems had a public playground. Many of them use tools like Stackblitz to be able to interact with their components.
UI Guideline was born out of our need to solve a problem that causes a real pain in the ass: Ineffective communication between the design and the development team. There is no common language between both worlds: designers say “Select list”, developers say “Dropdown list”. Designers say “Label”, developers say “Badge”. etc. etc. etc. Creating constant friction between teams, and not to mention when the teams have more than 5 members, it's a mess.
The idea so far is to allow any user to see all the information about "Possible Names" and "Reference Systems" for free.
But if the user wants to go deeper and know more about a component (e.g. Anatomy, Html structure, Figma & Sketch structure, etc) we're considering charge a yearly fee.
Actually, we don't know the exact price, because we didn't have in mind to charge, but we realize this project consumes us a lot of time going through every reference system, gathering all the good practices, synthesizing the information, etc.