Figma plugin · Now in beta

From static to smart components

Block wraps design-system components with typed controls, direct canvas writes, and clear ownership rules so teams can edit components without digging through variants. It is a practical first step toward AI-ready design systems: pixels coupled with explicit logic.

Install plugin Read docs

One schema for text, booleans, variants, sliders, colors, and repeatable content.

Block definition

button.block.js

Synced

// Wrap your Figma component with typed inputs
block.define({
  inputs: {
    label: {
      type: "text", label: "Label", default: "Submit",
      write(node, value) { node.findChild("_label").setText(value) }
    },
    variant: {
      type: "select", label: "Variant",
      options: ["Primary", "Secondary", "Danger"], default: "Primary",
      write(node, v) { node.setProperty("Variant", v) }
    },
    disabled: {
      type: "boolean", label: "Disabled", default: false,
      write(node, v) { node.setProperty("Disabled", v ? "True" : "False") }
    },
  },

  bind(inputs, node) {
    node.findChild("Tooltip").setVisible(inputs.disabled);
  },
});

Generated panel

Button

Labeltext

Submit

Variantselect

Primary

Disabled

Every control has one job, one canvas target, and one predictable write path.

Inputs, not variant hunting

Define text, boolean, select, slider, and color inputs in plain JS. Your team sets values in a clean panel — no scrolling through nested variant combinations.

Learn more

Canvas always in sync

Each input owns a canvas target. write() pushes every change instantly. initial() reads the current state when the editor opens — start from where the design already is.

Learn more

A foundation for AI-ready workflows

Typed inputs turn visual choices into structured component state. That does not make the plugin agent-operated today, but it creates the contract future automation can rely on.

Learn more

Component logic layer

A clean interface for all the logic hiding inside your Figma components

A structured API that gives every Figma component a clear logic layer your team can use today, with clearer state for future AI workflows.

Read the API docs

Text inputs

Boolean toggles

Select variants

Slider controls

Color bindings

Realtime canvas sync

NodeProxy API

Bind logic

Ownership rules

AI foundation

Label

Variant

Disabled

Color

Everything you need to give components a logic layer

View full API

textnumberbooleanselectslidercolor

Six input types, one schema

text, number, slider, boolean, select, color — all declared in a plain JS object. Your IDE knows the shape. Validation catches mistakes before they hit canvas.

Read docs

Direct canvas writes

write() fires on every input change and pushes the value to exactly the Figma layer it owns. One input, one target — no branching, no side effects.

Read docs

Canvas hydration on open

initial() reads current Figma state when the editor opens — so the panel always reflects the real component, not a stale default.

Read docs

Bind for cross-input logic

bind(inputs, node) runs after every change. Use it for conditional visibility, computed strings, and layout updates that depend on two or more inputs together.

Read docs

Ownership enforcement

Block validates that no two inputs write to the same canvas target. Conflicting writers are flagged before the definition compiles — not discovered at runtime.

Read docs

NodeProxy — your canvas API

Traverse, read, and write Figma layers inside any handler. findChild, setText, setProperty, setVisible, setFill — the full surface lives on every node.

Read docs

Give your components a clear logic layer

One block.define() call is enough to wrap the first component, connect pixels to logic, and make its intent visible.

Install the plugin Read the docs