🛠️

Tools & resources

GETTING STARTED

PILLARS OF VISUAL DESIGN

DIVE DEEPER

GET INSPIRED

NEXT & MORE

🛠️ Tools and resources

Figma - From ideation to high-fidelity prototype, everything in one app
Protopie - an advanced prototyping tool for dynamic & multimodal interactions
Loom - From the first presentation to the final pixel, design teams move faster and more efficiently with async video messaging.
Notion - From UX writing to design system documentation

Noise — again, this is very self-explanatory name; you can add noise to your designs (free)
LottieFiles — Lottie animations for your designs
Figmify: Convert web pages into Figma layers.
Stark — one of the best tools that will help you create accessible designs
Blush: Customize hand-drawn illustrations.
Charts - Beautiful charts in figma
Isometric - Isometric allows you to create isometric layers without manually having to set them up.
Arc: Create curved text in Figma.
Roto: Create 3D models from Figma designs.
Palettes: Generate and save colour palettes.
Gradient Map: Create a cool gradient map directly from the selected image in Figma.

‣

Iconify: Access to a huge library of icons.
Figma Measure: Add detailed design measurements.
Unsplash: Insert images directly from Unsplash.
A11y - Color Contrast Checker: Check color accessibility.
Content Reel: Populate designs with text, images, and avatars.
Design Lint: Identify and fix design inconsistencies.
Figmotion - Add motion to your designs.
Breakpoints - Preview responsive layout inside a Figma frame and share animated prototype.

Apple fonts — Perfect for Apple devices Just go with SF FONT
Google Fonts — Font suits for all languages
Inter - my favorite free font
Free fonts by Awwards - Amazing free types
Type scale - a selection of font styles that can be used across an app, ensuring a flexible yet consistent style that accommodates a range of purposes
Font Sizes in UI Design: The Complete Guide - Extensive guidelines with specific examples for iOS, Android and web
WhatFont (chrome extension) - The easiest way to identify fonts on web pages.

Mindfully curated colour palettes -A collection of unique color combinations for your design projects. Steal them. Use them. Make something beautiful.
Colorbox - Accessible color generator
BrandColors — When you are starting as a designer, use these colors and understand how they maintain hue
Colour Hunt — Trendy colours
Webgradients — Give a spark
Building Your Color Palette - the ultimate and most actionable guide to building your colour palate for UI design

Icons Basics — Understand about pixel perfection
Material Design Icons — Download and analyze how they are making perfect icons
Noun Project — Just good icons
Brand Icons — All big companies’ logo in SVG, you dont need to google it.
Iconify: Access to a huge library of icons.
Pikaicons: Unleash Your Creativity with Our Growing Collection of Charming Icons, Designed to Make You Stand Out.

Blush: Customizable hand-drawn illustrations.
humaaans: Mix-&-match illustrations of humans.
Open Doodles: Free sketchy illustration library.
Undraw — Use these as a dummy when you are starting a project.
Ideogram: Helping people become more creative with AI
Absurd Design: Illustrations that give a unique visual style.
Desi log: Free illustration pack of Indian characters with mix-and-match components. Get them here

‣

Ouch!: Illustrations for UI/UX presentations.
Drawkit: Hand-drawn vector illustration resources.
IRA Design: Build your own illustrations using hand-made colored sketches.
Freepik: Provides both free and premium vectors, stock photos, PSDs, and icons.
Noun Project: Icons and illustrations for everything.
SVGRepo: A collection of high-quality SVGs, offering free downloads and customization.

‣

← Previous

On this page