zed/docs/design-tools.md

[⬅ Back to Index](./index.md)

# Design Tools & Links

Generally useful tools and resources for design.

## General

[Names of Signs & Symbols](https://www.prepressure.com/fonts/basics/character-names#curlybrackets)

[The Noun Project](https://thenounproject.com/) - Icons for everything, attempts to describe all of human language visually.

[SVG Repo](https://www.svgrepo.com/) - Open-licensed SVG Vector and Icons

[Font Awsesome](https://fontawesome.com/) - High quality icons, has been around for many years.

---

## Color

[Opacity/Transparency Hex Values](https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4)

[Color Ramp Generator](https://lyft-colorbox.herokuapp.com)

[Designing a Comprehensive Color System
](https://www.rethinkhq.com/videos/designing-a-comprehensive-color-system-for-lyft) - [Linda Dong](https://twitter.com/lindadong)

---

## Figma & Plugins

[Figma Plugins for Designers](https://www.uiprep.com/blog/21-best-figma-plugins-for-designers-in-2021)

[Icon Resizer](https://www.figma.com/community/plugin/739117729229117975/Icon-Resizer)

[Code Syntax Highlighter](https://www.figma.com/community/plugin/938793197191698232/Code-Syntax-Highlighter)

[Proportional Scale](https://www.figma.com/community/plugin/756895186298946525/Proportional-Scale)

[LilGrid](https://www.figma.com/community/plugin/795397421598343178/LilGrid)

Organize your selection into a grid.

[Automator](https://www.figma.com/community/plugin/1005114571859948695/Automator)

Build photoshop-style batch actions to automate things.

[Figma Tokens](https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens)

Use tokens in Figma and generate JSON from them.

---

## Design Systems

### Naming

[Naming Design Tokens](https://uxdesign.cc/naming-design-tokens-9454818ed7cb)

### Storybook

[Collaboration with design tokens and storybook](https://zure.com/blog/collaboration-with-design-tokens-and-storybook/)

### Example DS Documentation

[Tailwind CSS Documentation](https://tailwindcss.com/docs/container)

[Material Design Docs](https://material.io/design/color/the-color-system.html#color-usage-and-palettes)

[Carbon Design System Docs](https://www.carbondesignsystem.com)

[Adobe Spectrum](https://spectrum.adobe.com/)
  - Great documentation, like [Color System](https://spectrum.adobe.com/page/color-system/) and [Design Tokens](https://spectrum.adobe.com/page/design-tokens/).
  - A good place to start if thinking about building a design system.