introducing LAYERS

An accessibility-first design system. Build products for everyone.

Layers [Design System]

Components of the Layers Design System for Figma

An inclusive design system

Our design system is explicitly designed to help you create products that are usable and useful, to everyone.

Icon of an eye

Accessibile

Layers was built accessibility-first. Meaning we're building a design system that works for everyone.

Icon of a file

Well-documented

All our components are accompanied by documentation, describing its intended use cases and limitations.

Icon of an open book

Robust library

Layers features over 350 well-documented components, blocks, and example products.

Icon of Figma's Auto-Layout feature

Auto Layout

Nearly every component in our Design System has Auto Layout support. Don't waste your time resizing.

Icon of a mobile phone

Responsive

Layers is responsive out of the box. No need to separately style your mobile components.

Icon of a pen

Easily customizable

Easily swap out the color palette and text styles and adapt the design system to your needs.

Color Palettes

Color for all

Layers uses a set of well-defined colors, that have been thoroughly tested to optimize for legibility across the color blindness spectrum. The pallette consists of both functional colors, such as greens for success states and reds for critical errors, as well as interchangeable brand colors.

Colors can also be easily swapped out, to make the design system your own.

base grids

Pixel perfect

All of our elements are built on top of a 2pt grid. It forms the geometric foundation of everything we design at Layers. This means that our components easily snap together to build complex layouts.

This includes not just our components such as buttons and input fields, but also every increment in font size, line height, and even shadow values.

customize

Make it your own

Adapting Layers to suit your brand and style is quick and easy. Change fonts and colors on the fly to whatever your project requires. Update the color and text styles, and your changes will echo throughout the entire design system.

Each component uses our pre-defined color and text styles, so that you can automatically change everything at a moment's notice.

Example of styles being swapped easily in the Layers design system for Figma

Automate

Auto Layout

Just about every component in the design system utilizes Auto-Layout. Leveraging the stellar automation features of Figma helps you save hours of time, and speeds up the pace of your product development.

Spend less time resizing components and working out the minute details, and more time focusing on the big picture.

Animation of automatically laid out elements in the Layers Design System for Figma

open source

Impeccable Foundation

Layers is built on two fantastic, open-sourced resources; Our typeface and iconography are both free to use however you please. Layers uses Inter by Rasmus Andersson for its typeface, which is freely available on Google Fonts.

Our icon library is courtesy of Feather icons, which likewise is entirely free to use.

Iconography and typography included in the Layers Design System for Figma

stay up to date

Automatic Updates

Stay up-to-date with the latest changes and additions to Layers. The latest file will always be available in your Gumroad Library.

All of our files also come with an embedded changelog, so you can see exactly what changed and when.

Examples of updates notes for the Layers Design System for Figma

Built with Layers

All of these product examples are 100% built with Layers.

Shoe catalog built with Layers Design System for FigmaMobile recipe website built with Layers Design System for FigmaForms & Documents mobile app built with Layers Design System for FigmaMobile app for music playlists built with Layers Design System for Figma
Recipe website built with Layers Design System for Figma
Kanban board website built with Layers Design System for Figma
Social media tracking website built with Layers Design System for Figma

Powering great companies

Our products are used by design and product teams at some of the greatest companies out there.

Logo of ShopifyLogo of WayfairLogo of Shopify PlusLogo of LetsBuildLogo of Visuals By Impulse

Single

$59/yr

Max 1 user

Buy now

Features

All 350+ components

All 60+ blocks and example products

One year's worth of free updates

Unlimited project use

All-Access Pass

$89/yr

Per user

Explore All-Access

Features

Unlimited access to all existing and upcoming projects

Priority access to all new products

Unlimited project use

One user per pass, volume discounts available.

Team

$99/yr

Max 5 users

Buy now

Features

All 350+ components

All 60+ blocks and example products

One year's worth of free updates

Unlimited project use