ardakaracizmeli / design-system-checklist Goto Github PK
View Code? Open in Web Editor NEWAn open-source checklist to help you plan, build and grow your design system.
Home Page: https://designsystemchecklist.com
An open-source checklist to help you plan, build and grow your design system.
Home Page: https://designsystemchecklist.com
The Development section under Tooling could use more resources (links)
Small correction (or refinement) about icon names.
Name your icons based on what they are, not what they represent. For instance, a trash icon should be named trash, not delete. You can still add related keywords to improve discoverability.
Hmm. I pretty much disagree here. A standard "play" button icon should be called "play" not "triangle". Perhaps the checklist copy could be clearer about what is meant by naming? And what do I mean by naming?
I work primarily with accessibility, and have instructed our designers to make sure that all icons have an 'accessible name'. Our design system has a large collection of icons, and the Figma project associates each one with such a name. UI controls should always have accessible names, and if the control has an icon instead of a text label, the easiest way to do this is to name the icon itself.
We have gone so far as to hard-code these names into an aria-label
on the SVG assets themselves. (You need to add role="img"
as well for this trick to work). Here's an example, it's an icon used to label a button which clears an input field (circle with cross inside).
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Clear" height="24px" width="24px">
<g fill="currentColor"><path d="M8.795 8.794a1.005 1.005 0 0 1 1.421 0L12 10.578l1.784-1.783a1.005 1.005 0 1 1 1.422 1.421L13.422 12l1.784 1.784a1.005 1.005 0 0 1-1.422 1.421L12 13.422l-1.784 1.784a1.005 1.005 0 0 1-1.421-1.422L10.579 12l-1.784-1.784a1.005 1.005 0 0 1 0-1.422Z"></path>
<path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10 10-4.477 10-10Zm-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z"></path>
</g>
</svg>`
If a dev uses those assets (e.g inside a <button>
), they get an accessible name "for free".
This is only a partial solution to the problem of naming icons accessibly. An icon may be used in an unconventional way, requiring a different name, or may be "purely decorative" (in which case, wrap it in a div or span with aria-hidden="true"
) International versions will need to change the attribute value too.
But having a default accessible name is almost always better than no accessible name at all.
Core / List / Divided variant states:
"Lists with dividers are the best practice advised by many platform guidelines (especially on mobile)."
I am unable to find the resources or sources that illustrates, verify or details this statement.
Checked: Material, Apple Human Interface Guidelines, Foundation, Bootstrap, Fluent, Equinor, DNB.
The links at the foot of each category page are not linking through to the right target pages.
Great checklist.
Correct me if I'm wrong, but there's only dark theme right?
Would be nice to have light mode, especially during working hours, I prefer light mode.
Thanks!
Can we do internationalization? I'm willing to do the pt-BR translation. Any idea on how so i can start a PR?
BTW, I'm loving this project! Already shared it across some ppl at my team and we're eager to start using!
What do you think about evolving the project even further? Adding new patterns, updating dependencies, and more?
Not an issue, really, but since Design Systems are about uniformity and all that I'm sure I'm not the first one to notice that the last user handle link on About page is, rather surprisingly, a mailto
:
Hello, we're @ardakaracizmeli, @DmitryBelyaev and @StevenBaguley.
Great work btw! <3
For interactive components such as:
there should be focused state for keyboard accessibility
Hi!! I use and really like your checklist, but I don't know where to open this topic, I'm sorry if I open the discussion in the wrong environment.
I would like to contribute with the translation into Portuguese (Brazil)/PT-BR if possible.
Hey big fan of the overall idea of this, one suggestion:
Under https://designsystemchecklist.com/category/tooling/ "Figma" is listed as checkbox. There are alternative tools out there to design teams such as Sketch, FramerX, AdobeXD and others. It shouldn't really matter which is used. At the moment it kind of reads like an advertisement Figma.
Was just wondering the thinking behind this, and whether it could be reworded to be more neutral.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.