Block turns a Figma component into a controlled editor: define the schema, expose the right controls, preview behavior, and sync changes back to canvas.
Product map
The same Block definition powers human controls, preview behavior, persistent values, nested content, and a more explicit foundation for future automation.
placeholder/product-config.png
Component set
Block definition
Generated panel
Preview and sync
01
Preview
02
Validate
03
Write
Four connected parts give a component a usable logic layer: authoring, editing, syncing, and structured state.
Configure mode
Create a Block definition on a Figma component, declare typed inputs, and save a reusable control surface.
View configure flow ->block.define()
Edit mode
Turn text, selects, booleans, colors, nested blocks, and collections into a clean editor for selected instances.
Open editor model ->Canvas sync
Use write, initial, and bind hooks to update text, variants, visibility, fills, layout, and repeated child instances.
See sync targets ->AI foundation
Typed values and nested data create a clearer contract for future automation, while staying human-operated today.
Review schema ->{ schema }
Typed state is ready for future automation
Product areas
Catch conflicting writers before a definition is usable.
Open a selected instance with controls that reflect the real canvas.
Compose one component interface inside another with stable keys.
Add, remove, persist, and reconcile repeated child instances.
Placeholder product image