Design Tools
A collection of free, essential tools to speed up your design workflow. Everything you need from color conversion to type pairing.
Why Use Companion Design Utilities?
Figma is a comprehensive design canvas, but designers frequently need external calculators to handle asset weights, coordinate color formats, or scale visual harmony. Using external companion tools accelerates micro-decisions, keeping your canvas responsive.
Our suite of interactive helper utilities provides quick HSL/HEX translations, Google Font preview pair matching, CSS gradient exporters, and layout compression models to streamline asset creation and token naming workflows.
Best Practices for Asset Workflows:
- ✓ Convert colors to HSL for logical design system scaling rules.
- ✓ Compress raw images before importing them to prevent Figma canvas lag.
- ✓ Keep typography pairs limited to two functional families for hierarchy.
- ✓ Structure generative prompts using tokens to get predictable UI elements.
Color Converter
Convert between Hex, RGB, and HSL color formats instantly.
Palette Generator
Generate beautiful, harmonious color palettes for your designs.
Font Pairing
Find the perfect typography combinations for your project.
Gradient Picker
Create and customize stunning CSS gradients visually.
Image Compressor
Optimize and compress your images without quality loss.
Palette Browser
Explore a curated collection of professional color palettes.
Color Picker
Extract colors from images or use our advanced visual picker.
Figma Make Prompt Builder
Generate high-quality, structured prompts for Figma Make and AI design workflows.
Companion Tools FAQs
Common questions about HSL codes, image compressions, and font pairings.
Why does the Color Converter output HSL alongside HEX?
HEX values represent direct color keys. HSL (Hue, Saturation, Lightness) uses numerical parameters, which makes it much easier to programmatically calculate hover states, shade steps, and design system variables.
Does the Image Compressor upload my layout assets?
No. The Image Compressor operates entirely in your local browser sandbox using client-side JavaScript APIs. Your screenshots, mockups, and files are never uploaded to any remote servers, maintaining total privacy.
Can I copy color codes directly into the Figma interface?
Yes! Figma’s properties panel supports HEX, RGB, CSS strings, and HSL formats. Simply copy the generated utility output string and paste it into the color fill panel.
Are Google Font pairing combinations updated?
Yes, our Font Pairing tool dynamically references active Google Fonts database pairs, comparing weights and rendering scales.