Skip to content

Settings ​

Plugin Settings dialog — Display / AI / agent overrides / API keys tabsPlugin Settings dialog — Display / AI / agent overrides / API keys tabs

Accessible via the Settings button in the StatusBar (data-testid="settings-trigger"). The Settings-dialog values are per-user, cross-file — they are written to figma.clientStorage["systema_user_settings"] so they follow the user across every Figma file (desktop or web Figma). File-level layout state (zoom, split percent, scroll positions, sectionStates, selected theme, …) stays in the file's pluginData, and API keys also live in figma.clientStorage (per-user, never shared with collaborators).

The dialog has a left sidebar with four sections — Display, Helpers, AI, Danger Zone — and a header with Import / Export and Close buttons. A Reset all button sits at the bottom of the sidebar and only appears once a setting differs from its default. Below the Danger Zone nav, a small Made by Jamil Lazarev link (→ jamillazarev.com) credits the author.

Display ​

The Display section opens with an "Editor Display" group, then a "Color" subhead.

  • Show suggestions — toggle the suggestion footer panel. Drives both the Color Suggestions block (Palette tab — harmony chips: Complementary / Analogous / Triadic / Square / Tetradic / Split) and the Entity Suggestions block (Entities tab — per-pattern contrast / level / step pill rows)
  • Show info panels — toggle the descriptive info blocks inside editor sections
  • Show hotkeys — toggle the keyboard shortcut hints in the editor
  • Contrast cheatsheet — toggle the WCAG/APCA cheatsheet below the Contrasts field in entity editors
  • Editor footer — toggle the editor's bottom info panel (combines color suggestions, info text, hotkeys). Hotkey: Opt+1
  • Preview footer — toggle the preview's bottom info panel (hovered swatch / surface / container readout with clamp + chroma diagnostics). Inverse rows append an inv token to the entity name (Containers inv 0, Content inv 2) so direct vs inverse stays unambiguous; the suffix is added at render time and survives interactive composite cells where the displayed colour updates live with hover/press/drag events. Hotkey: Opt+2
  • Agents footer — toggle the agents footer panel under the chat. Hotkey: Opt+3
  • AI agents chat — toggle the chat panel itself. Hotkey: Opt+`
  • UI Theme (Figma / Light / Dark) — Figma follows the host theme; Light / Dark pin the plugin UI explicitly. Swatch outlines adapt automatically
  • Preview layout (Narrow / Wide) — Narrow: surfaces side-by-side, content stacked inside. Wide: surfaces stacked, content/containers laid out horizontally. Wide also flows per-condition groups (Enabled | Selected | Disabled) horizontally inside EntityRowView so they read at a glance instead of stacking vertically
  • Preview verbosity (Terse / Balanced / Verbose) — controls how much textual scaffolding the preview shows. Verbose = c-N N.NN + coF/chF labels around each swatch + 96-px wide swatch pills. Balanced (default) = labels dropped, swatches collapse to 40 × 16. Terse = every label hidden (section / row / condition headers + per-swatch labels). Paste-to-canvas walks the live DOM, so what isn't rendered isn't exported
  • AI Chat layout (Auto / Float) — Auto docks the chat as a third panel when the window is wide enough (≥1440px — EDITOR_PANEL_WIDTH + MIN_PREVIEW_WIDTH + CHAT_PANEL_WIDTH = 480 × 3) and floats it otherwise; Float forces the floating overlay regardless of width

Color (Display) ​

Under a "Color" subhead at the bottom of the Display section:

  • Preview filters — show/hide the entire preview filter block (entity color overrides, display filters)
  • Vision simulation (Preview / Editor / All) — controls whether the active CVD filter applies just to preview swatches, the editor only, or every pixel in the plugin UI

Helpers ​

  • Autosave — toggle plus a numeric input (10–600 seconds, default 60). Arrow keys step by 10s, Shift+arrow by 60s. When autosave fires, the Save button shows the same wave animation as a manual save
  • Preview transitions — toggle plus a numeric input (50–500 ms, default 150). Drives the global --systema-transition-duration CSS variable; flipping the switch off collapses every transition in the UI to 0 ms (state changes apply instantly). The override is scoped to elements that already declared transition-* (utility classes or inline styles), so popovers/tooltips that rely on Radix's inline top/left/transform aren't accidentally interpolated and snap into place as before

Color (Helpers) ​

Under a "Color" subhead at the bottom of the Helpers section:

  • Swatch borders (Auto / Always / Hidden) — adds dashed borders when the contrast between a swatch and its background is too low to distinguish edges. Auto = only when needed

AI ​

Settings — AI section: API keys, provider/model, temperature, debate limit, colour generationSettings — AI section: API keys, provider/model, temperature, debate limit, colour generation

The AI section is split into three subheads: API Keys, Configuration, and Color generation.

API Keys ​

  • Anthropic / OpenAI / OpenRouter / Gemini — one password field each, with an inline status indicator (spinner → green check / "Invalid"). Keys are stored per-user in figma.clientStorage (private, not shared with collaborators) and validated live on an 800 ms debounce — OpenRouter is validated against its auth-key endpoint (https://openrouter.ai/api/v1/auth/key), while Anthropic / OpenAI / Gemini hit their models endpoints. Image/screenshot attachments in chat currently require the Anthropic provider (other providers receive a text placeholder in place of the image); image analysis uses the model selected in Settings, not a fixed model. Text chat works on all four providers

Configuration ​

  • Provider (dropdown) — pick which provider drives the chat. The dropdown is filtered to providers whose key has validated; when exactly one key is valid the provider is auto-selected and the dropdown is disabled; with zero valid keys the full four-provider list is shown so you can switch and then add the key
  • Model — for OpenRouter, a free-text field (e.g. openai/gpt-4o); for every other provider, a dropdown populated dynamically from that provider's /v1/models endpoint after its key validates (Anthropic returns the live Claude lineup, OpenAI is filtered to GPT-4 / GPT-3.5 / o1–o4, Gemini pulls models with generateContent support). No model is hardcoded in the UI
  • Temperature — slider + numeric input (0 to 1 for Anthropic, 0 to 2 for the others; the helper text reads "0 = precise, {max} = creative"). Shift snaps to 0.5 steps, Alt to 0.01; double-click resets to 1
  • Debate limit — max sequential responses (2–20, default 4) when you @all or start a multi-agent debate. Arrow keys step by 1

Color generation ​

  • Auto-name AI colors (default off) — rename agent-proposed colors using the 31k color-name database before applying
  • Auto-collapse patches (default on) — AI patch confirmation cards open collapsed by default in the chat (helps once the chat fills with multi-step plans)

Per-agent personality knobs (model, temperature, verbosity, skepticism, management, playfulness) live on the Agent Dialog (the gear / info buttons on each agent card in the chat's Agents tab), not in this Settings dialog — see AI Features → Per-agent settings. The Settings header has Import / Export buttons that round-trip the entire dialog (Display + Helpers + AI, including API keys and per-agent overrides) as a systema-settings.json file.

Reset all ​

The Reset all button at the bottom of the sidebar restores most Display / Helpers / AI options to their defaults in one shot (it does not currently reset the contrast cheatsheet toggle, preview filters, AI temperature/model/provider, or the colour-generation toggles); a confirmation dialog offers an optional "Also clear API keys" checkbox. The button is hidden when nothing has been changed. Themes and chat history are not affected.

Danger Zone ​

ActionWhat it does
Agent edit permissions (toggle)managed-only (default): agents only see and modify variable collections that Systema itself created. all: agents can also read and modify foreign variable collections (other plugins, libraries, hand-made). They still cannot draw on the canvas. Implemented in src/plugin/code.ts figma-context-query / figma-rename-collection handlers, gated by the systema_managed plugin-data tag
Delete plugin dataWipes all themes, layout, settings, chat history, and Systema's collection tags. Existing variables stay in Figma but become unmanaged; returns the plugin to the welcome screen. Optional checkboxes: "Keep agent settings" (default on) and "Keep API keys" (default on, shown only when a key is set)
Delete Systema variablesRemoves every Systema-created variable collection. Config is preserved — Push Vars rebuilds the set. The confirm dialog runs a live usage scan and shows the variable count
Delete other variablesRemoves every non-Systema variable collection; Systema's own collections are untouched. Useful for cleaning up legacy variables
Unbind variables from nodesDetaches every node binding to Systema variables without deleting the variables. Nodes keep their current colors; the variables stay in the file