Hex Color Cards

About this plugin

About – Hex Color Cards

Hex Color Cards is a professional utility that transforms HEX codes into beautiful, exportable color cards directly on your Figma canvas. Whether you are building a design system, a brand guideline, or a UI kit, this tool automates the tedious work of creating and naming color swatches.

Features:

🎨 Visual Picker & HEX: Pick colors visually or type exact HEX codes.

🏷️ Smart Auto-Naming: Automatically suggests names (e.g., "Sky Blue") if you leave the name field blank.

📋 One-Click Copy: Instantly copy HEX or RGB values to your clipboard.

📐 Dynamic Hug-Height: Cards automatically adjust their height to fit your text perfectly on export.

🚀 Figma Native Export: Neatly organizes all cards into a single row with consistent spacing.

⚡ Live Feedback: Modern toast notifications confirm every action.

How it works:

1. Pick or Type Your Color Select a color using the eyedropper icon or type a HEX code (e.g., #ff6a6a). Add an optional custom name to identify your brand colors.

2. Build Your Preview List Click + Add to stack your colors. You can remove individual cards or reset the entire list at any time.

3. Export to Figma Canvas Hit Export to place your neatly organized palette on the canvas. Every card is an Auto Layout frame ready for your design system.

Tips:

Optional Naming: You don't have to name every color; the plugin handles it for you!

Total Control: Use "Reset All" to wipe your workspace and start a new palette in seconds.

1. Clean Workflow: The cards "Hug" their content, ensuring no awkward empty spaces in your documentation.