jondot / awesome-designops

Awesome DesignOps is an awesome style list that curates the best design ops news, tools, tutorials, articles and more.

Awesome DesignOps is an awesome style list that curates the best design ops news, tools, tutorials, articles and more. PRs are welcome.

Don't miss out! subscribe to our weekly newsletter

Table of Contents

• Design Systems
• Design Teams
• Reading
• Design System Tools
  • Components
• Testing
• Sketch
  • Workflow & Organization
  • Design
  • Content
  • Handoff
  • Development
  • Templates
• React
• Colors
• Accessibility

Design Systems

Criteria for design systems:

• Not just a component library
• Must include engineering point of views: React based, and infrastructure to bring up a whole design system including pipeline
• Better if includes design resources: sketch resources, design blog or design tone

• 🔥 Antd - AFX (Alibaba) (MIT). React | Sketch | 📖 Guideline
• 🔥 Atlaskit - Atlassian (ATL). React | Sketch | 📖 Guideline | Blog
• 🔥 Grommet V2 - HP (Apache 2.0). React | Sketch | Blog
• 🔥 Primer - Github (MIT). React | Sketch | 📖 Guideline | Blog
• 🔥 SEEK UI - SEEK (MIT). React | Sketch | 📖 Guideline
• 🔥 Polaris - Shopify (MIT). React | Sketch | 📖 Guideline
• 🔥 Lightning - Salesforce (⚠️ Salesforce). React | Sketch | 📖 Guideline
• 🔥 Priceline Design System - Priceline (MIT). React | Sketch
• 🔥 Pluralsight Design System - Pluralsight (Apache 2.0). React | Sketch | 📖 Guideline
• 🔥 Gestalt - Pinterest (Apache 2.0). React
• 🔥 Ring UI - Jetbrains (Apache 2.0). React
• 🔥 Carbon - IBM (Apache 2.0). React | Sketch | 📖 Guideline
• Backpack - Skyscanner (Apache 2.0). React | Sketch | 📖 Guideline
• Blueprint - Palantir (Apache 2.0). React | Sketch
• Mineral UI - CA Technologies (Apache 2.0). React | Sketch
• Evergreen - Segment IO (MIT). React
• Canvas - Hubspot (⚠️ Hubspot). React | 📖 Guideline | Blog
• Zendesk Garden - Zendesk (Apache 2.0). React
• Pivotal UI - Pivotal (MIT). React
• Fabric - Microsoft (⚠️ Microsoft). React | Sketch
• Hackclub Design System - Hackclub (MIT). React
• Joyent UI Toolkit - Joyent (MPL 2.0). React
• 🔥 Bulma - Bulma (MIT). React(ported css) | Sketch(custom)
• 🔥 Tachyons - Tachyons (MIT). React(ported css) | Sketch(custom)

Design Teams

• Airbnb
• Facebook
• Lyft

Reading

• Sketch Libraries
• Sketching in the browser - a great writeup about the code-to-sketch movement
• Design systems in Atomic Design - Brad Frost's book on atomic design and design systems.

Design System Tools

Components

• Storybook - Storybook is THE versatile framework for building design systems. You can use it it for design systems, showcase, testing, and handoff.
  • Docgen addon - generates documenation for Storybook using React docgen.
  • Readme addon - render README files in storybook.
  • Scissors addon - render components in many form factors (mobile, desktop, etc.).
• React Styleguidist - made for style guides and design systems from the start, works like magic. You can use React component in regular Markdown files to showcase components.
• React docgen - extract documentation from React components.
• Compositor Kit - a new way to develop, document and test React component libraries.
• styled-components - a modern styling library for React that does much more.
  • styled-system - a design system powerup for styled-components
  • Rebass grid - responsive grid built with styled-system.
• Vueds - If you prefer building design systems with vue.js

Testing

• TBD

Sketch

Workflow & Organization

• Sketch Runner - must have for sketch. Speed up your sketch workflow.
• Sketch Palletes - must have for maintaining color palletes.
• Symbol Organizer - organize all symbols (given rules) on a page.
• Move to Library

Design

• RenameIt - the best plugin for renaming inside Sketch.
• Images Reinvented - must have for images. Creates a mask by default.
• Select Similar - select similar layers based on common properties.
• Dock preview - a fun way to preview artboard on the dock.
• Fontpad - the only plugin that lets you edit/create fonts inside Sketch (free).
• Single border - create a "fake" single border for when you need that.
• Paddy - generate padding.
• Looper - create fun looping compositions.
• Automate Sketch - a Sketch multitool.
• Better Shadows - generate shadows with non-linear decay.
• Rough Sketch - generate hand-drawn variant of your composition. Works mostly.
• Chromatic Sketch - generate perceptually uniform gradients and color scales.

Content

• Data populator - must have for generating UI data, including your own customized data set.
  • Cloudstitch addon - use Cloudstitch for the data.
• Content Generator - another popular content generator.

Handoff

• Measure - must have Sketch plugin for generating measurements for handoff.
• Cactus - version control for Sketch. Free for public repo, and open source.
• Inker - redlines for SVG compositions.
• Storybook to Sketch - generate Sketch files from Storybook (React).
• Typography Export - export text styles to CSS, HTML, etc.
• react-sketchapp - turn React components into Sketch compositions
• react-sketchapp styleguide demo - you can use this to bootstrap your design system
• html-sketchapp - turn HTML pages into Sketch compositions
• html-sketchapp-cli - a CLI for html-sketchapp to create Sketch libraries.
• Salsa - export iOS components to Sketch (from Yelp).

Development

• Skpm - the plugin development tool that started it all.
  • Webview - a starter for Webview based plugins.
  • Devtools - devtools.
• Sketch API - the Javascript based API for Sketch plugins.

Templates

• Foundation UI

React

• Rebass - a modern and general purpose UI component library
• Color Pickers

Colors

• Themer - generate color themes for various applications. Plugin for Sketch Palletes.
• ColorBox - building color systems for accessible UIs that scale.

Accessibility

• Stark - Sketch plugin to validate accessibility in design time
• Bulb Design Tools - list of automated tools for testing for accessibility