2023-06-12 13:02:49 +00:00
[⬅ Back to Index ](./index.md )
2023-06-12 13:00:59 +00:00
# Design Tools & Links
2023-05-22 14:03:10 +00:00
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.
