Layers is a thoroughly documented, all-encompassing design system. Built by industry veterans, its focus lies on allowing designers and developers alike to quickly and easily create lovable products.
Discussion
Would you recommend this product?
No reviews yet
Howdy, friends! Been working on this design system for a while now, trying to leverage the crazy cool addition of Auto Layout in Figma. You're probably just wondering "How the heck is this any different from other design systems?" The key difference is that Layers is built to be accessible. This means we've taken contrast ratios into account, looked at optimizing legibility, clearly distinguished active state, and made the components work for as large a group of users as possible. Don't worry about accessibility issues, such as color blindness or spatial cognition problems. We've done that work for you.
This looks so great, Paul! I particularly love the auto layout aspect and the Figma preview of the library!
Looks beautifully clean and well designed! How does it work license-wise including Feather and Inter as part of the (for profit) product?
@suparchie Both Inter & Feather are licensed with license types that allow the sale of goods that use those products. As we're not selling the fonts or icons themselves nor on their own, there's no issues.
Can I use this as a total Figma newbie?
@manuel_merz That is the goal, yes. As long as you know how to add assets to your frames, you're good to go. We're also in the process of adding a few screens to explain how to get started, and how to customize the design system.
@paul_van_oijen A quick tutorial would be great 🤙 Thanks Paul
As someone who is quasi-familiar with the complexities of the crappy decisions by the WAI on color contrast and readability standards that are now encoded into WCAG (and §508), I'm skeptical. What can you tell us about how you've developed and tested these for accessibility? Does the system have any specs or expectations for implementation, or is this purely a visual-accessibility play? In any case, thank you for building this on top of Figma!
@coreyward Great question! Visual accessibility plays a large role, but it doesn't just end there. We're rather opinionated on the do's and don'ts of each component, and this is one of the things we'll continue to expand on in later iterations. Having worked on data dense products for a good amount of my career myself, I have rather strong opinions on things such as zebra striping and on testing for and establishing reading patterns in data tables, for the purpose of assisting in spatial cognition. Or about virtually always including labels and alt text for inputs and images respectively. We are very much aware that accessibility doesn't end at ensuring proper contrast ratios in your color palette. The plan is to include these opinions —among others— as guidelines within the Design System in version beyond this v1. Happy to go further into detail if you'd like!