Huekit Logo
Figma Plugin

Design Systems, Icons,
and Mockups in Figma

Generate WCAG-ready variables, foundations, typography, and component pages, then browse icon packs and create 3D device mockups without leaving Figma.

Design TokensEditor ThemesIcon Libraries3D Mockups
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.

Design System Generator

Generate 11-step color scales, semantic tokens, typography, spacing, radius, size foundations, and Figma documentation pages from your source colors.

WCAG Contrast + Modes

Check contrast and generate light/dark semantic mappings. Licensed workflows can auto-adjust color choices toward WCAG AA targets.

Aa4.5:1 ratio

Presets + Editor Themes

Import Tailwind CSS, Radix Colors, Open Props, Primer, Bootstrap, USWDS, Atlassian, Material, IBM Carbon, and Fluent 2, or start from editor themes.

Figma Variables

Create native Figma collections for colors, foundations, and component tokens, with Light and Dark modes wired for real design work.

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

Advanced Repair + Automation

Generate from local assets or the current Figma file, preview safe repairs, and apply token, typography, spacing, radius, and size bindings.

Button
Button
Input field...
Input
Badge
Badge
Card

JSON + Tailwind Export

Export generated colors, foundations, typography, effects, and preset data as Design Tokens JSON or a Tailwind config file.

Exporting JSON...0%

Resources Workspace

Browse Solar and Freehand icon packs, generate icon pages, upload screens, and render 3D iPhone, MacBook, and iMac mockups.

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

Generate core systems and use free resources

Freeforever
Most Popular

Ambitious Designer

Advanced generation, repair, and export workflows

$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 can start from your own colors, official presets, or editor themes. It creates color scales, semantic tokens, foundation variables, typography styles, component examples, and documentation pages directly in your Figma file.
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.
Huekit supports Tailwind CSS, Radix Colors, Tachyons, Open Color, Open Props, Primer Primitives, Bootstrap, USWDS, Atlassian, Material Design, IBM Carbon, and Fluent 2. It also supports editor theme sources like Dracula, Catppuccin, Tokyo Night, and One Dark.
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.
Licensed plans can export generated tokens as standard Design Tokens JSON or as a Tailwind config file. Exports include generated colors, foundations, typography, effects, and preset-derived token data when available.
Yes. You can create a new system from scratch, generate from the current Figma file, or use Audit & Repair to preview and apply token, typography, spacing, radius, and size bindings to existing UI.
Resources currently includes searchable Solar and Freehand icon packs, selected icon imports, icon-page generation, and 3D device mockups for iPhone 17 Pro, MacBook Pro 16-inch M3, and iMac 24-inch. Mockups support screen upload, selected-layer paste, image controls, PNG export, and import back into Figma.
Junior Designer includes core color, semantic token, basic foundation, documentation page, icon library, and mockup workflows. Ambitious Designer unlocks premium presets, editor theme blending, full foundations, typography styles, automated generation, audit and repair, JSON/Tailwind exports, component variable mode, and WCAG adjustment. Senior Designer gives you the paid feature set with a single lifetime payment.

Still have questions? Contact our team