mirror of
https://github.com/zed-industries/zed.git
synced 2024-11-08 07:35:01 +03:00
75 lines
2.4 KiB
Plaintext
75 lines
2.4 KiB
Plaintext
|
export const description = 'A list of useful design tools.'
|
||
|
|
|
||
|
|
# Design Tools
|
||
|
|
|
||
|
|
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.
|