Build a component & variants
Create masters, combine variants, and customize an instance.
- Build a frame or group for the reusable element and inspect its exact ID with
batch_get. - Promote it with
{"op":"create_component","id":"<frame-id>"}inbatch_design. The master stays on canvas, and the response includes its component ID. - For states such as Default and Hover, name each standalone master with axis values such as
Variant=Primary, State=DefaultandVariant=Primary, State=Hover, promote them, and pass their master node IDs tocombine_variants. The result returnscomponent_setandframe; the frame displays the variants as a grid. Plain master names instead form oneVariantaxis. Useget_design_systemto read the exact set and axis values. - To expand a set later, promote another
Axis=Valuemaster and calladd_variantswith the set ID and its master node ID.remove_varianttakes a member out as a standalone component,arrange_variantstidies the set frame, andrename_componentchanges a component or set name safely. - Expose a
variantaxis or a text, boolean, number, color, or instance-swap property withcreate_component_property. For a descendant field, bind it withbind_component_propertyusing the descendant node ID and a compatible target such as{"prop":"text_content"}. - Place a linked copy with
create_instance, passing the component or set ID and worldx/ycoordinates. Useset_instance_propertywith an exposed property ID or unique name and a value of the right type. - Change the master, screenshot an instance, and inspect its source under
components/<set>/<variant>/master.fnx.
{"label":"Place button","ops":[{"op":"create_instance","component":"<component-or-set-id>","x":480,"y":120}]}Master, variant-set, and exposed instance-property operations are in the external MCP schema. Read get_design_system after structural changes; invalid values fail and roll back the batch. Use rename_component rather than editing component metadata or folder names by hand.
In the editor, Go to main component on a variant-set instance opens the member the instance currently displays, including a member selected through a variable mode. Reset all overrides restores the resolved default member and its size. Save or discard a Code workspace draft before navigating to another component. A directly bound text-content variable controls its instance text; edit the variable or remove that binding before editing the text in place. Text reached through an exposed component-property alias remains editable.
The editor's Copy/Paste can carry a complete component or variant set with its captured definitions. If the original has been removed, Paste restores an independent usable copy. Cutting only part of a variant set is refused; select the whole set when it needs to move together. Review the saved FNX diff after structural changes.