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/ |