Figma plugin · Now in beta

From static to smart Figma 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 pluginRead docs

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

BlockBlock
Components
Todo List
Flight Card
Order Timeline
Team Roster
Stock Ticker
Notification Feed
Leaderboard
Calendar Week
Report Card
Account Usage
Report Card
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// Define your Block here.
// Add inputs inside `inputs`, then add `bind()` only when you need it.
// Tip: use Cmd/Ctrl+Enter to preview and Cmd/Ctrl+S to save.
 
block.define({
  inputs: {
    scores: {
      type: "collection",
      label: "Scores",
      blockKey: "score",
      view: "table",
      default: [],
      write(node, value) {
        node.findOne("_content").setBlockValues(value)
      },
      initial(node) {
        const blockData = node.findOne("_content").getBlockValues()
        return blockData
      },
    },
  },
 
  // bind(inputs, node) {
  //   // Keep component-wide behavior here.
  // },
});
 
⌘S save⇧⌘F formatTab snippet/indentFold from gutter
⟩_ Console

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
C User interface

Inputs editors can touch

Title
Theme
Featured
B Block scripting layer

Defines inputs, writes, and bindings

block.define({
inputs: {...},
bind(node) {...}
})
A Design system

The source components and variants

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