design-tools.md

 1[⬅ Back to Index](./index.md)
 2
 3# Design Tools & Links
 4
 5Generally useful tools and resources for design.
 6
 7## General
 8
 9[Names of Signs & Symbols](https://www.prepressure.com/fonts/basics/character-names#curlybrackets)
10
11[The Noun Project](https://thenounproject.com/) - Icons for everything, attempts to describe all of human language visually.
12
13[SVG Repo](https://www.svgrepo.com/) - Open-licensed SVG Vector and Icons
14
15[Font Awsesome](https://fontawesome.com/) - High quality icons, has been around for many years.
16
17---
18
19## Color
20
21[Opacity/Transparency Hex Values](https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4)
22
23[Color Ramp Generator](https://lyft-colorbox.herokuapp.com)
24
25[Designing a Comprehensive Color System
26](https://www.rethinkhq.com/videos/designing-a-comprehensive-color-system-for-lyft) - [Linda Dong](https://twitter.com/lindadong)
27
28---
29
30## Figma & Plugins
31
32[Figma Plugins for Designers](https://www.uiprep.com/blog/21-best-figma-plugins-for-designers-in-2021)
33
34[Icon Resizer](https://www.figma.com/community/plugin/739117729229117975/Icon-Resizer)
35
36[Code Syntax Highlighter](https://www.figma.com/community/plugin/938793197191698232/Code-Syntax-Highlighter)
37
38[Proportional Scale](https://www.figma.com/community/plugin/756895186298946525/Proportional-Scale)
39
40[LilGrid](https://www.figma.com/community/plugin/795397421598343178/LilGrid)
41
42Organize your selection into a grid.
43
44[Automator](https://www.figma.com/community/plugin/1005114571859948695/Automator)
45
46Build photoshop-style batch actions to automate things.
47
48[Figma Tokens](https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens)
49
50Use tokens in Figma and generate JSON from them.
51
52---
53
54## Design Systems
55
56### Naming
57
58[Naming Design Tokens](https://uxdesign.cc/naming-design-tokens-9454818ed7cb)
59
60### Storybook
61
62[Collaboration with design tokens and storybook](https://zure.com/blog/collaboration-with-design-tokens-and-storybook/)
63
64### Example DS Documentation
65
66[Tailwind CSS Documentation](https://tailwindcss.com/docs/container)
67
68[Material Design Docs](https://material.io/design/color/the-color-system.html#color-usage-and-palettes)
69
70[Carbon Design System Docs](https://www.carbondesignsystem.com)
71
72[Adobe Spectrum](https://spectrum.adobe.com/)
73  - Great documentation, like [Color System](https://spectrum.adobe.com/page/color-system/) and [Design Tokens](https://spectrum.adobe.com/page/design-tokens/).
74  - A good place to start if thinking about building a design system.