Design Systems

Design Systems
Useful websites and links related to Design Systems
Laying the Foundations (a book about design systems)
A book about design systems by Andrew Couldwell. This is real talk about creating design systems and digital brand guidelines. No jargon, no glossing over the hard realities, and no company hat. Just good advice, experience, and practical tips.
designsystemfoundations.com
Design System Checklist
An open-source checklist to help you plan, build and grow your design system.
designsystemchecklist.com
https://designsystemsrepo.com/
designsystemsrepo.com
Design Systems Handbook
Learn everything about design systems from leading experts and world-class teams, including Twitter, Salesforce, Airbnb, and more.
www.designbetter.co
Adele – Design Systems and Pattern Libraries Repository
Dozens of design systems and pattern libraries thoroughly analyzed. Learn, enjoy, contribute!
adele.uxpin.com
https://ether.thescenery.co/
ether.thescenery.co
Lucid
lucid.style
Specify | Design Data Platform (DDP)
Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets for your design system — automatically.
specifyapp.com
​
Design System / Branding / Assets Management
InVision | Digital product design, workflow & collaboration
InVision is the digital product design platform used to make the world’s best customer experiences. InVisionApp, Inc.
brand.ai
UXPin - UI Design and Prototyping Tool
Design tool like no other. Prototypes that feel real, with powers of code components, logic, states and design systems. Join for free!
www.uxpin.com
Download Lingo for Mac & Sketch Plugin | Lingo
With Lingo you can build and share your digital assets and style guides quickly by downloading the Lingo Mac app and Sketch plugin. Get started today!
www.lingoapp.com
https://zeroheight.com/
zeroheight.com
​
Design System Starter Packs
Straple Framework
www.straple.co
Design System for Sketch - Cabana
A Design System for Sketch that enables you to create UIs quicker, which means you can present your ideas much faster.
cabanadesignsystem.com
Atomize Design System
The most advanced UI design framework for Sketch and Figma
atomizedesign.com
Symbol Design 3
Symbol Design System 3 for Sketch
symboldesign.co
Nested Symbols & Auto-Updating Styleguides | Jan Losert - Store
The smartest template and your future starting point for every User Interfaces in Sketch. Stop wasting your time by crafting the same design systems and elements from scratch over and over and over again - and let the magic of this template’s nested symbols begin!
janlosert.com
UX Power Tools - A Design System UI Kit for Sketch
UX Power Tools is a design system UI kit for Sketch. It helps thousands of designers across the globe work faster, stay consistent, and deliver value.
www.uxpower.tools
Plaster - Mobile UI Kit and Design System for Sketch and Figma
Design beautiful Android & iOS applications with a powerful Mobile UI kit. Plaster — helps to create stunning mobile designs faster with thoughtful components and design rules.
plasterdesignsystem.com
Figma Material Design UI kit - Components and app templates
Material Design System for Figma is based on 100% guidelines compliance and contains an impressive amount of scalable and constrained components to accelerate the application development. Including 1000+ dark & light UI components / 120 templates / 1000+ material icons
www.setproduct.com
Prime Design System Kit - Your Design Starter Kit
Design with a Speed of Light. Get over 2000 Components connected with 600+ Configurable Styles. Prime is like 7 kits in One. It includes UI elements, Web & Mobile Templates, Illustrations, Icons, Charts and even Vector Device Mockups.
www.primedesignsystem.com
Web – Design System for Sketch & Figma
Slice — modular design system shaped from separate libraries to unify design with a consistent set of rules.
slice.design
​
Design System Documentation
Living Style Guides for Digital Products
With Catalog you combine design documentation with real, live     components in one single place, making collaboration between     designers and developers seamless.
www.catalog.style
https://compositor.io/
compositor.io
docsify
A magical documentation generator.
docsify.js.org
Fractal
Powerful component libraries & styleguides that fit the way you work.
fractal.build
GitBook - Where software teams break knowledge silos.
GitBook helps you publish beautiful docs and centralize your teams' knowledge. From technical teams to the whole company.
www.gitbook.com
patternplate
patternplate.github.io
Storybook: UI component explorer for frontend developers
Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
storybook.js.org
​
Design System Helper Tools
Modulator
hihayk.github.io
MakeUI - We'll take care of UI
MakeUI is a tool which can generate a customized UI kit for you, with your input of a few of your brand identity attributes.
makeui.design
​
Design System E-mail Tool
Email Design System and UI Kit for Sketch and Figma
This email system includes a Sketch file and Figma file with email templates and components to make your life easier designing responsive email templates and collaborating with Developers and Marketers.
htmlemail.io
Design System Boilerplates
OSKRHQ Design System
oskrhq-ds.surge.sh
Wireframes and Starter Kits
Sections Web Wireframe Kit for Skech & Figma [UI Kit & Design System]
Sections Wireframe Kit is made up of a large set of pre-constructed 330+ layouts in 17 popular categories. The main engine of this UX kit is its design system — which gives you a wide range of options to speed up your web prototyping experience.
sections.pixsellz.io
Wireframe UI Kit [Sketch, Figma, Adobe XD]
The Dot. Prototype easy and fast with ready to go UI wireframe kit. Beautiful easy to use wireframe UI kit with more than 440 web and mobile layouts.
www.ls.graphics
​
Wireframe Templates
Test App
alexadam.github.io
Design System Tokens
gstudioapp/groselha-tokens
Tokens base architecture. Contribute to gstudioapp/groselha-tokens development by creating an account on GitHub.
github.com
Design System Books
Marvel | Free eBook | Getting Started with Design Systems
A free guide to getting started with design systems. Simple in structure, human in explanation and packed with insight
marvelapp.com
Design Systems Code
Done Design System by UI Lib
Done is Open source design system based on Bootstrap 4. Organized SASS code makes product development easier and faster.
uilibrary.github.io
​
Interaction Design - Previous
User Flows
Next - UI
UI Kits
Last updated 1 year ago