> ## Documentation Index
> Fetch the complete documentation index at: https://docs.humic.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma

> Connect your Humic design system to Figma and sync tokens as variables.

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

```bash theme={null}
npx @humicdev/cli sync --target figma
```

## Variable collections

Humic organizes your tokens into Figma variable collections by type:

| Collection     | Token types                                                                        |
| -------------- | ---------------------------------------------------------------------------------- |
| **Color**      | `color`                                                                            |
| **Typography** | `font.size`, `font.weight`, `font.family`, `font.lineHeight`, `font.letterSpacing` |
| **Dimension**  | `spacing`, `radius`                                                                |
| **Effect**     | `shadow`, `opacity`                                                                |
| **Motion**     | `duration`, `easing`                                                               |
| **Other**      | `z-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.

```json theme={null}
{
  "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 token           | Figma variable            |
| --------------------- | ------------------------- |
| `color.brand.primary` | Color / brand / primary   |
| `spacing.page.gutter` | Dimension / page / gutter |
| `font.size.body`      | Typography / size / body  |