---
title: "Figma plugin"
description: "What the Systhema Figma plugin does, how to get it, and troubleshooting."
requested_language: sk
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/sk/next/design/figma
version: unreleased (main)
docs_index: https://docs.systhema.app/sk/next/llms.txt
---
> This page isn't translated yet. Showing English.


The Systhema Figma plugin (`@systhemaui/figma`) is the plugin Systhema uses as the source of truth for design tokens. It exports Figma variables and styles as W3C DTCG JSON, and supports a full round-trip: re-importing a previously exported set back into Figma.

## Why a Figma plugin

Token files in a Systhema project (`src/tokens/*.json`) are not hand-edited. They come out of this plugin. Editing JSON tokens by hand introduces drift between what designers see in Figma and what the codebase ships — Systhema avoids that by treating Figma's variable graph as canonical.

## Install

The plugin is distributed to licensed teams. It is not published to the Figma Community or a registry.

To load it, open Figma desktop, choose **Plugins → Development → Import plugin from manifest…** and pick the plugin's `manifest.json`. It then appears under **Plugins → Development → Systhema**.

The plugin runs locally only: its manifest declares `networkAccess.allowedDomains: ["none"]`, so it makes no outbound HTTP calls.

## Using the plugin

- [Exporting tokens](https://docs.systhema.app/sk/next/design/figma/export.md): one-click export of variables and styles, and what the export contains.
- [Round-trip import](https://docs.systhema.app/sk/next/design/figma/import.md): preview and apply a previously exported set back into Figma.

## Troubleshooting

- **"Discovery failed"** in the plugin UI — usually a corrupted or unsupported variable type. Check the Figma file's variables panel for variables with no value in the active mode.
- **Empty `colorSystem.{theme}.tokens.json`** after export — the collection probably has no variables in that mode. Add at least one variable in the mode and re-export.
- **Import preview shows "0 collections"** — the `manifest.json` is missing or has the wrong `generator.name`. Verify the ZIP was produced by `@systhemaui/figma`.
- **`pnpm systhema-core sync` errors after import** — the new tokens probably introduce an unresolved reference (e.g. `{primitives.gray.1000}` where `gray.1000` doesn't exist). Either add the referenced primitive in Figma or fix the alias.
- **A brand font flashes as a serif on first paint** — the project's `font.value.tokens.json` probably predates the fallback stack (`"$value": "Switzer"` with nothing after it). Re-export from Figma with a current plugin build, or run `systhema upgrade`, which back-propagates the stack onto projects still on the stock family.
- **A colour with opacity re-imports unchanged** — the import tried to write the composition back and Figma refused; the warning carries the message it gave (see [Colors with opacity](https://docs.systhema.app/sk/next/design/figma/export.md#colors-with-opacity)). The existing value is kept rather than flattened, so change the colour or the opacity variable it points at instead, or detach it in Figma first if you really want the flat value.
- **Re-export produces a large diff with no design changes** — Figma occasionally renumbers variable ids after a file copy or library swap. The values are stable; only the `$extensions.com.figma.variableId` fields churn. Accept the diff; it doesn't affect runtime.