Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
awesome-designops
Awesome DesignOps is an awesome style list that curates the best design ops news, tools, tutorials, articles and more.
https://github.com/jondot/awesome-designops
Last synced: 2 days ago
JSON representation
-
Design Teams
-
Sketch
-
Handoff
- Measure - must have Sketch plugin for generating measurements for handoff.
- 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
- html-sketchapp-cli - a CLI for html-sketchapp to create Sketch libraries.
- Salsa - export iOS components to Sketch (from Yelp).
- Cactus - version control for Sketch. Free for public repo, and open source.
- react-sketchapp styleguide demo - you can use this to bootstrap your design system
-
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
-
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
- Fontpad - the only plugin that lets you edit/create fonts inside Sketch (free).
- 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.
- Single border - create a "fake" single border for when you need that.
- Paddy - generate padding.
- 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
- Cloudstitch addon - use Cloudstitch for the data.
- Content Generator - another popular content generator.
-
-
React
-
Templates
- Color Pickers
- Rebass - a modern and general purpose UI component library
-
-
Design Systems
- Grommet V2 - HP ([Apache 2.0](https://tldrlegal.com/license/apache-license-2.0-(apache-2.0))). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://v2.grommet.io/components) | <img src="sketch.png" width="16" style="margin-bottom:-2px"/> [Sketch](https://github.com/grommet/grommet-design) | [Blog](https://blog.grommet.io/)
- Primer - Github ([MIT](https://tldrlegal.com/license/mit-license)). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://primer.style/components) | <img src="sketch.png" width="16" style="margin-bottom:-2px"/> [Sketch](https://styleguide.github.com/primer/tools/sketch-templates/) | :book: [Guideline](https://styleguide.github.com/primer/principles/) | [Blog](https://styleguide.github.com/primer/whats_new/)
- Polaris - Shopify ([MIT](https://tldrlegal.com/license/mit-license)). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://github.com/Shopify/polaris) | <img src="sketch.png" width="16" style="margin-bottom:-2px"/> [Sketch](https://github.com/Shopify/polaris/releases) | :book: [Guideline](https://polaris.shopify.com/guides/principles#navigation)
- Lightning - Salesforce ([:warning: Salesforce](#)). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://github.com/salesforce-ux/design-system) | <img src="sketch.png" width="16" style="margin-bottom:-2px"/> [Sketch](https://www.lightningdesignsystem.com/downloads/) | :book: [Guideline](https://www.lightningdesignsystem.com/guidelines/overview/)
- Priceline Design System - Priceline ([MIT](https://tldrlegal.com/license/mit-license)). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://github.com/pricelinelabs/design-system/) | <img src="sketch.png" width="16" style="margin-bottom:-2px"/> [Sketch](https://github.com/pricelinelabs/design-system-sketch/releases/latest)
- Pluralsight Design System - Pluralsight ([Apache 2.0](https://tldrlegal.com/license/apache-license-2.0-(apache-2.0))). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://github.com/pluralsight/design-system) | <img src="sketch.png" width="16" style="margin-bottom:-2px"/> [Sketch](https://design-system.pluralsight.com/design-assets/) | :book: [Guideline](https://design-system.pluralsight.com/patterns/voice-tone/)
- Ring UI - Jetbrains ([Apache 2.0](https://tldrlegal.com/license/apache-license-2.0-(apache-2.0))). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://github.com/JetBrains/ring-ui)
- Backpack - Skyscanner ([Apache 2.0](https://tldrlegal.com/license/apache-license-2.0-(apache-2.0))). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://github.com/Skyscanner/backpack) | <img src="sketch.png" width="16" style="margin-bottom:-2px"/> [Sketch](https://backpack.github.io/using/getting-started#sketch-resources) | :book: [Guideline](https://backpack.github.io/style-guide/copywriting)
- Evergreen - Segment IO ([MIT](https://tldrlegal.com/license/mit-license)). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://evergreen.surge.sh/components/)
- Canvas - Hubspot ([:warning: Hubspot](#)). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://github.com/HubSpot/canvas) | :book: [Guideline](https://canvas.hubspot.com/styles/design-principles) | [Blog](https://medium.com/hubspot-product/people-over-pixels-b962c359a14d)
- Zendesk Garden - Zendesk ([Apache 2.0](https://tldrlegal.com/license/apache-license-2.0-(apache-2.0))). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://github.com/zendeskgarden/react-components)
- Hackclub Design System - Hackclub ([MIT](https://tldrlegal.com/license/mit-license)). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://github.com/hackclub/design-system)
- Joyent UI Toolkit - Joyent ([MPL 2.0](https://tldrlegal.com/license/mozilla-public-license-2.0-(mpl-2))). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit)
- Tachyons - Tachyons ([MIT](https://tldrlegal.com/license/mit-license)). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React(ported css)](https://github.com/jxnblk/tachyons-components) | <img src="sketch.png" width="16" style="margin-bottom:-2px"/> [Sketch(custom)](https://github.com/tachyons-css/tachyons/issues/284)
- Pivotal UI - Pivotal ([MIT](https://tldrlegal.com/license/mit-license)). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://github.com/pivotal-cf/pivotal-ui/tree/master/src/react)
- Gestalt - Pinterest ([Apache 2.0](https://tldrlegal.com/license/apache-license-2.0-(apache-2.0))). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://github.com/pinterest/gestalt)
- SEEK UI - SEEK ([MIT](https://tldrlegal.com/license/mit-license)). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://github.com/seek-oss/seek-style-guide) | <img src="sketch.png" width="16" style="margin-bottom:-2px"/> [Sketch](https://github.com/seek-oss/style-guide-resources-for-sketch) | :book: [Guideline](http://seek-oss.github.io/seek-style-guide/)
- Mineral UI - CA Technologies ([Apache 2.0](https://tldrlegal.com/license/apache-license-2.0-(apache-2.0))). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](http://mineral-ui.com/component-status) | <img src="sketch.png" width="16" style="margin-bottom:-2px"/> [Sketch](https://github.com/mineral-ui/design-assets)
- Joyent UI Toolkit - Joyent ([MPL 2.0](https://tldrlegal.com/license/mozilla-public-license-2.0-(mpl-2))). <img src="react.svg" width="24" style="margin-bottom:-2px"/>[React](https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit)
-
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
- 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.
- styled-system - a design system powerup for styled-components
- Vueds - If you prefer building design systems with vue.js
- Docgen addon - generates documenation for Storybook using React docgen.
- Readme addon - render README files in storybook.
- React docgen - extract documentation from React components.
- Compositor Kit - a new way to develop, document and test React component libraries.
- Rebass grid - responsive grid built with styled-system.
-
-
Colors
-
Templates
- Themer - generate color themes for various applications. [Plugin for Sketch Palletes](https://github.com/mjswensen/themer/tree/master/packages/themer-sketch-palettes).
-
-
Accessibility
-
Templates
- Bulb Design Tools - list of automated tools for testing for accessibility
-
Programming Languages
Categories
Sub Categories
Keywords
sketch
21
sketch-plugin
18
react
9
design-tools
6
design-systems
4
javascript
3
sketch-app
3
symbols
3
design-system
3
sketchapp
3
css
2
json
2
documentation
2
front-end
2
webpack
2
skpm
2
ui
2
library
2
plugin
2
styleguide
2
storybook
2
components
2
design
2
color-picker
1
chrome
1
ui-kit
1
registry
1
sketch-template
1
electron
1
foundation-site
1
foundation-cli
1
webview
1
debugger
1
devtools
1
foundation
1
design-specs
1
measurement
1
spec
1
adobe
1
gravitdesigner
1
svg
1
viewer
1
xd
1
fonts
1
sass
1
sketch-css
1
react-renderer
1
react-sketchapp
1
style-guides
1
cocoapod
1