Huekit Logo
Figma Plugin

Every Design System
One Click Import

Turn an empty Figma file into a complete design system foundation. Color scales, typography, spacing, and semantic tokens, all generated instantly.

Color ScalesTypographySpacing TokensSemantic Variables
Design System — Huekit — Figma
Primary
0
100
200
300
400
500
600
700
800
900
Secondary
0
100
200
300
400
500
600
700
800
900
Neutral
0
100
200
300
400
500
600
700
800
900
Semantic Colors
Success
Warning
Error
Info
Muted
Accent
Typography Scale
48px800Display 2xl
32px700Heading 1
24px600Heading 2
20px600Heading 3
18px400Body Large
16px400Body
14px400Small
12px400Caption
Spacing
2px
4px
8px
12px
16px
24px
32px
48px
64px
96px
128px
160px
Border Radius
0
2
4
8
12
16
24
∞
Shadows
sm
md
lg
xl
glow
Buttons
PrimarySecondaryGhost
DangerSuccessWarning
PillPill 2S
Inputs
Search placeholder...
Active focused input
Error state value
Switches & Tags
On
Off
NewBetaProAdminDraft
Cards
Avatars
JD
+3
Alerts
Success message here
Error message here
Icons
+24 more

Features

What You Get

Generate production-ready design tokens, variables, and styles in one click.

Automatic Color Scales

Generate 11-step color scales (50-950) automatically. Create harmonious palettes with perfect lightness progression for any base color.

WCAG Contrast Control

Automatic accessibility adjustments. Ensure all color combinations meet WCAG AA and AAA standards with real-time contrast checking.

Aa4.5:1 ratio

Light/Dark Mode

Support dual modes in a single collection. Generate semantic color mappings that work seamlessly across both themes.

Figma Variables

Native integration with Figma Variables. Export your design tokens as native Figma variables for instant use.

--color-primary#54E1DB
--color-secondary#3BBDB8
--color-accent#2A9D98
--color-surface#1F2F47

Ready Components

Button, Input, Card, Badge, and more. Pre-built components using your design system variables.

Button
Button
Input field...
Input
Badge
Badge
Card

Tailwind Export

Export in JSON and config formats. Direct integration with Tailwind CSS for seamless development workflow.

Exporting JSON...0%

Preset Libraries

Integrate Tailwind CSS and Radix Colors. Access popular color palettes and design system presets instantly.

Roadmap

What's Next

Building in the open. Here's what we've shipped and what's on the way.

Core MVP

Variable generation engine, multi-page Figma plugin, SCSS export pipeline, and automated style linting rules.

Shipped

Foundation + Components

Design token architecture, typography system with fluid type scales, and component state mode generation.

Shipped

UX & Performance

Smart color picker with real-time preview, algorithmic performance improvements, and smooth interactions.

Shipped

Major Refactor

Preset system architecture, kit-based project structure, and variable simplification for cleaner workflows.

Shipped
View Full Roadmap

Pricing

Simple, transparent pricing

Choose the plan that fits your design workflow. Upgrade or downgrade at any time.

Junior Designer

Get started with design system basics

Freeforever
Most Popular

Ambitious Designer

Unlimited files and advanced features for professionals

$5/month

+$3 per additional seat

Senior Designer

One payment. Everything. Forever.

$49.99/lifetime

per seat

Upgrade or downgrade at any time • Cancel anytime

FAQ

Frequently Asked Questions

Common questions about Huekit and how it works.

Huekit lets you generate a complete design system foundation with one click. Choose from popular presets like Tailwind or Radix Colors, or start with your own custom palette. The plugin creates color scales, typography styles, spacing tokens, and semantic variables directly in your Figma file. For existing projects, Huekit uses a smart algorithm to avoid conflicts with your current variables.
Absolutely. Huekit provides full control over all generated variables. You can adjust colors, modify typography scales, fine-tune spacing, and customize every aspect of your design system to match your brand guidelines.
Yes, Huekit automatically generates light and dark mode variants for all your design tokens. The plugin creates semantic color mappings that work seamlessly across both themes, ensuring consistent visual hierarchy.
Huekit supports multiple export formats including CSS, SCSS, and JSON. You can export variables directly to your codebase or copy them to clipboard. The plugin also integrates with Tailwind CSS for seamless development workflow.
Yes, Huekit works with any Figma file. It can analyze your existing components and styles to generate complementary variables, or create a completely new design system from scratch. The plugin respects your existing design decisions.
The Junior Designer plan includes basic variable generation for up to 3 design files. Ambitious Designer unlocks unlimited files, advanced features like automatic component state generation, dark mode support, priority support, and export to CSS, SCSS, and JSON. Senior Designer gives you everything in Ambitious Designer with a single payment and all future updates included.

Still have questions? Contact our team