Design tools

From MDD wiki
Revision as of 15:42, 7 December 2022 by Xiduzo (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search
Handy links
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

Tool for find
Color Space Color Palettes (https://www.google.com/search?q=mediawiki+how+to+edit+page)
Color Hunt Color Palettes (https://www.google.com/search?q=mediawiki+how+to+edit+page)
Gradient Hunt Gradient Color Palettes (https://www.google.com/search?q=mediawiki+how+to+edit+page)
Egg Gradient Gradient Color Palettes (https://www.google.com/search?q=mediawiki+how+to+edit+page)
Color Drop Color Palettes (https://www.google.com/search?q=mediawiki+how+to+edit+page)
Picular Color Palettes (https://www.google.com/search?q=mediawiki+how+to+edit+page)
Hue Snap Color Palettes (https://www.google.com/search?q=mediawiki+how+to+edit+page)
Color Adobe Color Palettes + tools https://color.adobe.com/nl/create/color-wheel
Colorsinspo Color Palettes + tools (https://www.google.com/search?q=mediawiki+how+to+edit+page)
Coolors Color Palettes https://coolors.co/
Scheme color Premade color pallets https://www.schemecolor.com/
Colour lovers Premade color pallets https://www.colourlovers.com/palettes
Color names Get the name of a color https://docs.google.com/spreadsheets/d/14ny2oB7g5Tof9TmKiaaDFv25XSCRt-LlBRJhIDz_3Mo
Ui gradients Create css for gradient https://uigradients.com/
Color pallete generator Create / search color palettes https://colors.muz.li/
Web gradients Web safe gradients https://webgradients.com/

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/