Design tools
Jump to navigation
Jump to search
| Selection of tools not organized yet | https://dev.to/lissy93/super-useful-css-resources-1ba3?utm_source=tldrnewsletter |
Figma plugins
| Plugin | for | find |
|---|---|---|
| Unsplash | - | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| Material Design Icons | - | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| Lorem ipsum | - | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| Chart | - | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| Google Sheets Sync | - | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| Color Palettes | - | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| Wireframe | - | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| Viewports | - | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| Anima | - | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| Iconify | 40.000+ icons | https://www.figma.com/community/plugin/735098390272716381 |
Chrome extensions
| Extension | for | find |
|---|---|---|
| CSS Peeper | Extract CSS | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| SVG-grabber | Extract SVG | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| Muzli | Stay Inspired | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| WhatFont | Extract text CSS | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| Site Palette | Extract Colors | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| Full Page Screen Capture | Full Page Screen Capture | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| Smallpdf | Edit, Compress and Convert PDF | (https://www.google.com/search?q=mediawiki+how+to+edit+page) |
| Hypothesis | Shared Web & PDF Annotation | https://chrome.google.com/webstore/detail/hypothesis-web-pdf-annota/bjfhmglciegochdpefhhlphglcehbmek |
Color
Typography
| Tool | for | find |
|---|---|---|
| Google fonts | free fonts with CDN | https://fonts.google.com/ |
| Glyphter | Create your own icon font | https://glyphter.com/ |
| Fontello | Generate icon font | https://fontello.com/ |
| Font combinator | Find quick basic font combinations | https://www.canva.com/font-combinations/ |
Images / Illustrations
| Tool | for | find |
|---|---|---|
| Pexels | Licence-free stock photos | https://www.pexels.com/ |
| Lorem picsum | Easy licence-free images for webdev | https://picsum.photos/ |
| Humaaans | Mix & match illustrations of humans | https://humaaans.com/ |
| Open peeps | Hand draw humans | https://www.openpeeps.com/ |
| Instant logo search | Find known brand logos | http://instantlogosearch.com/ |
| Ouch | Free vector illustrations | https://icons8.com/ouch |
| Undraw | Free vector illustrations | https://undraw.co/ |
Animation
| Tool | for | find |
|---|---|---|
| Animate.css | Webdev css premade animations | https://animate.style/ |
| Easing cheatsheet | Quick overview (+code) of easings | https://easings.net/ |
CSS
| Tool | for | find |
|---|---|---|
| Neumorphism | Generate soft UI shadow | https://neumorphism.io/ |
| Background patterns | Basic css background shapes | https://www.magicpattern.design/tools/css-backgrounds |
Prototype
| Tool | for | find |
|---|---|---|
| Grid print | Printable grids for fast prototyping | https://gridprint.in/ |
| The mockup club | Free mockups | https://themockup.club/ |
Other
| Tool | for | find |
|---|---|---|
| Blobmaker | Generate SVG blobs | https://www.blobmaker.app/ |
| Shape divider | Generate dividers HTML + CSS or SVG | https://www.shapedivider.app/ |
| Svg Wave | Generate SVG waves | https://svgwave.in/ |