Design Tools

Find the best design tools for capturing intentions and transforming into process diagrams. Diagrams are best to explain complex decisons using UML, P&ID, mockups etc.

• Figma
• Exalidraw
• Diagrams.net
• Sketchup
• AutoCAD

See diagram library

Figma

FREE for Individuals

Key Features:

• Collaborate with others
• Works on all machines
• Interactive Mockups
• Storybook Integration

Tailwind Integration

Resources

• 100 Best Plugins

• Smashing Magazine Guide

• Figma for developers

• Twitter List

• Pixel Art Tools

• Motion Canvas

Excalidraw

Great for quickly whiteboarding ideas that can have permanance.

excalidraw.com

Can be used inside obsidian.

Diagrams.net

Great for UML.

https://www.diagrams.net/

Used to great effect to explain concepts in courses from Stephen Grider.

Sketchup

3D design for architecture and landscape.

https://www.sketchup.com/

AutoCAD

Professional Engineering drawings

Free Design Assets

Free images, icons, patterns

TODO: update for AI.

• kaboompics
• nos.twnsnd
• picjumbo
• gratisography
• getrefe.tumblr
• imcreator
• freepik
• thestocks
• Designers Pics
• Giphy
• Pattern Library
• Pixabay
• substack.net
• Unsplash

SVGs and Icons

Use svgomg to clean up SVGs.

• Heroicons
• Icon Finder
• SVG Repo
• 120+ SVG Shapes

Typography

• Type Design Resources
• Modern Font Stacks