Skip to main content
Humic syncs your design tokens to Figma as Variables, so your design files always use the same values as your codebase.

​
How it works

  1. You connect a Figma file to your design system in Humic
  2. Humic creates variable collections in Figma, grouped by token type
  3. Each collection has Light and Dark modes
  4. When you sync, Humic updates the variables to match your tokens

​
Connecting Figma

​
From the Humic dashboard

  1. Open your design system and go to Settings → Figma
  2. Click Connect Figma File
  3. Authorize Humic in the browser popup
  4. Paste your Figma file URL

​
From the CLI

npx @humicdev/cli sync --target figma

​
Variable collections

Humic organizes your tokens into Figma variable collections by type:
CollectionToken types
Colorcolor
Typographyfont.size, font.weight, font.family, font.lineHeight, font.letterSpacing
Dimensionspacing, radius
Effectshadow, opacity
Motionduration, easing
Otherz-index, boolean
Each collection has Light and Dark modes. Color tokens use the light and dark hex values from your color scales. Non-color tokens use the same value in both modes.

​
Sync types

By default, Humic syncs all color tokens to Figma. You can configure which token types to sync in your design system settings. 
{
  "figma_sync_types": ["color", "spacing", "radius", "font.size"]
}

​
Token naming in Figma

Token keys map directly to Figma variable names. The dot-notation creates a folder structure in Figma:
Humic tokenFigma variable
color.brand.primaryColor / brand / primary
spacing.page.gutterDimension / page / gutter
font.size.bodyTypography / size / body