Skip to main content
Glama

figma_create_frame

Create an auto-layout container frame with design system variable bindings as a fallback when no component exists for a section or layout.

Instructions

Creates an auto-layout container frame (layout primitive) — the fallback when NO DS component exists for a section or layout. Every fill/padding/gap/radius binds to DS variables; component-like names are gated (pass confirmedNoComponent + primitiveOverrideReason for confirmed gaps). Name frames after their HTML role ("Header Section", "Card: Revenue"). Key params: parentId (omit for page-level artboard), direction, layoutSizing*, *Variable bindings, GRID mode. Check mimic_map_components FIRST. Phase 2+.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
xNoX position in pixels. Required for page-level artboards. Use rightmost existing artboard x + width + 80.
yNoY position in pixels. Defaults to 0 for artboards.
gapNoRaw item spacing in pixels. Use gapVariable when DS has spacing variables.
fillNoRaw hex color for background fill (e.g. "#ffffff"). Fallback when no DS styles/variables.
nameYesSemantic name describing the HTML role (e.g., "Header Section", "Metrics Row", "Card: Revenue"). Never use generic names like "Frame".
widthNoFixed width in pixels.
heightNoFixed height in pixels.
strokeNoRaw hex color for stroke (e.g. "#e4e6ee"). Fallback when no DS stroke variables.
paddingNoRaw uniform padding in pixels. Use paddingVariable when DS has spacing variables.
maxWidthNoMax width constraint.
parentIdNoParent node ID. Omit for page-level.
directionNoAuto-layout direction. Prefer HORIZONTAL or VERTICAL — NONE breaks portability. Use layoutPositioning ABSOLUTE for overlay children instead.
gridRowGapNoRaw row gap in pixels. Only used when layoutMode is GRID.
layoutModeNoSet to GRID to use CSS-grid-style layout (Grid automation, May 2026) instead of auto-layout. Requires gridRowCount/gridColumnCount. Errors clearly on Figma versions that do not support GRID layoutMode — fall back to direction HORIZONTAL/VERTICAL in that case.
paddingTopNoRaw top padding in pixels.
fillStyleIdNoDS fill style key for background (from figma_list_ds (kind: "fill_styles")). Preferred over fillVariable when DS has fill styles but no variables.
gapVariableNoDS variable path for item spacing.
gridRowSpanNoWhen this frame is a child of a GRID-layoutMode parent, how many rows it should span.
paddingLeftNoRaw left padding in pixels.
clipsContentNoClip content to frame bounds.
cornerRadiusNoRaw corner radius in pixels. Use cornerRadiusVariable when DS has radius variables.
fillVariableNoDS variable path for background fill.
gridRowCountNoNumber of grid rows. Only used when layoutMode is GRID.
paddingRightNoRaw right padding in pixels.
strokeWeightNoStroke weight in pixels.
gridColumnGapNoRaw column gap in pixels. Only used when layoutMode is GRID.
paddingBottomNoRaw bottom padding in pixels.
gridColumnSpanNoWhen this frame is a child of a GRID-layoutMode parent, how many columns it should span.
strokeVariableNoDS variable path for stroke color.
gridColumnCountNoNumber of grid columns. Only used when layoutMode is GRID.
paddingVariableNoDS variable path for uniform padding.
layoutPositioningNoSet to ABSOLUTE to position this frame as an overlay inside an auto-layout parent (out of flow but still contained). Use for grid lines, positioned labels, etc.
gridRowGapVariableNoDS spacing variable path for GRID row gap.
paddingTopVariableNoDS variable path for top padding.
paddingLeftVariableNoDS variable path for left padding.
confirmedNoComponentNoSet true only after DS/library search confirms no component exists for this role.
cornerRadiusVariableNoDS variable path for corner radius.
layoutSizingVerticalNoVertical sizing mode.
paddingRightVariableNoDS variable path for right padding.
counterAxisAlignItemsNoCounter axis alignment.
gridColumnGapVariableNoDS spacing variable path for GRID column gap.
paddingBottomVariableNoDS variable path for bottom padding.
primaryAxisAlignItemsNoPrimary axis alignment.
layoutSizingHorizontalNoHorizontal sizing mode.
primitiveOverrideReasonNoRequired with confirmedNoComponent for component-like primitives. Explain why this frame must be custom.

Schema Changelog

Changes observed during successful MCP inspections.

  1. Changed61 schema fields changedv3.0.0
    • addedInput schema / properties / clipsContent / description
      Added value: +"Clip content to frame bounds."
    • addedInput schema / properties / confirmedNoComponent
      Added value: +{
      +  "description": "Set true only after DS/library search confirms no component exists for this role.",
      +  "type": "boolean"
      +}
    • changedInput schema / properties / cornerRadius / description
      Previous value: -"Corner radius. DS variable path (e.g., \"radius-xl\") preferred. Raw px allowed in permissive mode only."New value: +"Raw corner radius in pixels. Use cornerRadiusVariable when DS has radius variables."
    • changedInput schema / properties / cornerRadius / type
      Previous value: -[
      -  "number",
      -  "string"
      -]New value: +"number"
    • changedInput schema / properties / cornerRadiusVariable / description
      Previous value: -"DS radius variable path (e.g., \"Radius/radius-xl\"). Bound via setBoundVariable. Preferred over raw cornerRadius number."New value: +"DS variable path for corner radius."
    • addedInput schema / properties / counterAxisAlignItems / description
      Added value: +"Counter axis alignment."
    • removedInput schema / properties / counterAxisSizingMode
      Removed value: -{
      -  "description": "AUTO = hug contents along counter axis.",
      -  "enum": [
      -    "FIXED",
      -    "AUTO"
      -  ],
      -  "type": "string"
      -}
    • changedInput schema / properties / direction / description
      Previous value: -"Auto-layout direction. NONE = no auto-layout."New value: +"Auto-layout direction. Prefer HORIZONTAL or VERTICAL — NONE breaks portability. Use layoutPositioning ABSOLUTE for overlay children instead."
    • addedInput schema / properties / fill
      Added value: +{
      +  "description": "Raw hex color for background fill (e.g. \"#ffffff\"). Fallback when no DS styles/variables.",
      +  "type": "string"
      +}
    • removedInput schema / properties / fillHex
      Removed value: -{
      -  "description": "Fallback hex color if fillVariable is not available.",
      -  "type": "string"
      -}
    • removedInput schema / properties / fillNone
      Removed value: -{
      -  "description": "Set true for no fill (transparent).",
      -  "type": "boolean"
      -}
    • addedInput schema / properties / fillStyleId
      Added value: +{
      +  "description": "DS fill style key for background (from figma_list_ds (kind: \"fill_styles\")). Preferred over fillVariable when DS has fill styles but no variables.",
      +  "type": "string"
      +}
    • changedInput schema / properties / fillVariable / description
      Previous value: -"Design token variable path for background fill, e.g. \"Colors/Background/bg-primary\"."New value: +"DS variable path for background fill."
    • changedInput schema / properties / gap / description
      Previous value: -"Gap between children. DS variable path (e.g., \"spacing-3xl\") preferred. Raw px number allowed in permissive mode only."New value: +"Raw item spacing in pixels. Use gapVariable when DS has spacing variables."
    • changedInput schema / properties / gap / type
      Previous value: -[
      -  "number",
      -  "string"
      -]New value: +"number"
    • changedInput schema / properties / gapVariable / description
      Previous value: -"DS spacing variable path for gap (e.g., \"Spacing/spacing-3xl\"). Bound via setBoundVariable. Preferred over raw gap number."New value: +"DS variable path for item spacing."
    • addedInput schema / properties / gridColumnCount
      Added value: +{
      +  "description": "Number of grid columns. Only used when layoutMode is GRID.",
      +  "type": "number"
      +}
    • addedInput schema / properties / gridColumnGap
      Added value: +{
      +  "description": "Raw column gap in pixels. Only used when layoutMode is GRID.",
      +  "type": "number"
      +}
    • addedInput schema / properties / gridColumnGapVariable
      Added value: +{
      +  "description": "DS spacing variable path for GRID column gap.",
      +  "type": "string"
      +}
    • addedInput schema / properties / gridColumnSpan
      Added value: +{
      +  "description": "When this frame is a child of a GRID-layoutMode parent, how many columns it should span.",
      +  "type": "number"
      +}
    • addedInput schema / properties / gridRowCount
      Added value: +{
      +  "description": "Number of grid rows. Only used when layoutMode is GRID.",
      +  "type": "number"
      +}
    • addedInput schema / properties / gridRowGap
      Added value: +{
      +  "description": "Raw row gap in pixels. Only used when layoutMode is GRID.",
      +  "type": "number"
      +}
    • addedInput schema / properties / gridRowGapVariable
      Added value: +{
      +  "description": "DS spacing variable path for GRID row gap.",
      +  "type": "string"
      +}
    • addedInput schema / properties / gridRowSpan
      Added value: +{
      +  "description": "When this frame is a child of a GRID-layoutMode parent, how many rows it should span.",
      +  "type": "number"
      +}
    • addedInput schema / properties / height / description
      Added value: +"Fixed height in pixels."
    • removedInput schema / properties / layoutAlign
      Removed value: -{
      -  "enum": [
      -    "MIN",
      -    "CENTER",
      -    "MAX",
      -    "STRETCH",
      -    "INHERIT"
      -  ],
      -  "type": "string"
      -}
    • removedInput schema / properties / layoutGrow
      Removed value: -{
      -  "description": "1 = fill remaining space in parent.",
      -  "type": "number"
      -}
    • addedInput schema / properties / layoutMode
      Added value: +{
      +  "description": "Set to GRID to use CSS-grid-style layout (Grid automation, May 2026) instead of auto-layout. Requires gridRowCount/gridColumnCount. Errors clearly on Figma versions that do not support GRID layoutMode — fall back to direction HORIZONTAL/VERTICAL in that case.",
      +  "enum": [
      +    "GRID"
      +  ],
      +  "type": "string"
      +}
    • addedInput schema / properties / layoutPositioning
      Added value: +{
      +  "description": "Set to ABSOLUTE to position this frame as an overlay inside an auto-layout parent (out of flow but still contained). Use for grid lines, positioned labels, etc.",
      +  "enum": [
      +    "AUTO",
      +    "ABSOLUTE"
      +  ],
      +  "type": "string"
      +}
    • addedInput schema / properties / layoutSizingHorizontal
      Added value: +{
      +  "description": "Horizontal sizing mode.",
      +  "enum": [
      +    "FIXED",
      +    "HUG",
      +    "FILL"
      +  ],
      +  "type": "string"
      +}
    • addedInput schema / properties / layoutSizingVertical
      Added value: +{
      +  "description": "Vertical sizing mode.",
      +  "enum": [
      +    "FIXED",
      +    "HUG",
      +    "FILL"
      +  ],
      +  "type": "string"
      +}
    • addedInput schema / properties / maxWidth
      Added value: +{
      +  "description": "Max width constraint.",
      +  "type": "number"
      +}
    • changedInput schema / properties / name / description
      Previous value: -"Layer name"New value: +"Semantic name describing the HTML role (e.g., \"Header Section\", \"Metrics Row\", \"Card: Revenue\"). Never use generic names like \"Frame\"."
    • changedInput schema / properties / padding / description
      Previous value: -"Uniform padding. DS variable path preferred. Raw px allowed in permissive mode only."New value: +"Raw uniform padding in pixels. Use paddingVariable when DS has spacing variables."
    • changedInput schema / properties / padding / type
      Previous value: -[
      -  "number",
      -  "string"
      -]New value: +"number"
    • addedInput schema / properties / paddingBottom / description
      Added value: +"Raw bottom padding in pixels."
    • changedInput schema / properties / paddingBottom / type
      Previous value: -[
      -  "number",
      -  "string"
      -]New value: +"number"
    • addedInput schema / properties / paddingBottomVariable
      Added value: +{
      +  "description": "DS variable path for bottom padding.",
      +  "type": "string"
      +}
    • addedInput schema / properties / paddingLeft / description
      Added value: +"Raw left padding in pixels."
    • changedInput schema / properties / paddingLeft / type
      Previous value: -[
      -  "number",
      -  "string"
      -]New value: +"number"
    • addedInput schema / properties / paddingLeftVariable
      Added value: +{
      +  "description": "DS variable path for left padding.",
      +  "type": "string"
      +}
    • addedInput schema / properties / paddingRight / description
      Added value: +"Raw right padding in pixels."
    • changedInput schema / properties / paddingRight / type
      Previous value: -[
      -  "number",
      -  "string"
      -]New value: +"number"
    • addedInput schema / properties / paddingRightVariable
      Added value: +{
      +  "description": "DS variable path for right padding.",
      +  "type": "string"
      +}
    • addedInput schema / properties / paddingTop / description
      Added value: +"Raw top padding in pixels."
    • changedInput schema / properties / paddingTop / type
      Previous value: -[
      -  "number",
      -  "string"
      -]New value: +"number"
    • addedInput schema / properties / paddingTopVariable
      Added value: +{
      +  "description": "DS variable path for top padding.",
      +  "type": "string"
      +}
    • changedInput schema / properties / paddingVariable / description
      Previous value: -"DS spacing variable path for uniform padding. Bound to all 4 sides via setBoundVariable."New value: +"DS variable path for uniform padding."
    • addedInput schema / properties / parentId
      Added value: +{
      +  "description": "Parent node ID. Omit for page-level.",
      +  "type": "string"
      +}
    • removedInput schema / properties / parentNodeId
      Removed value: -{
      -  "description": "Append to this parent. Omit to place on current page.",
      -  "type": "string"
      -}
    • addedInput schema / properties / primaryAxisAlignItems / description
      Added value: +"Primary axis alignment."
    • removedInput schema / properties / primaryAxisSizingMode
      Removed value: -{
      -  "description": "AUTO = hug contents along primary axis. Defaults to FIXED when width+height are set.",
      -  "enum": [
      -    "FIXED",
      -    "AUTO"
      -  ],
      -  "type": "string"
      -}
    • addedInput schema / properties / primitiveOverrideReason
      Added value: +{
      +  "description": "Required with confirmedNoComponent for component-like primitives. Explain why this frame must be custom.",
      +  "type": "string"
      +}
    • addedInput schema / properties / stroke
      Added value: +{
      +  "description": "Raw hex color for stroke (e.g. \"#e4e6ee\"). Fallback when no DS stroke variables.",
      +  "type": "string"
      +}
    • removedInput schema / properties / strokeHex
      Removed value: -{
      -  "description": "Fallback hex for border color.",
      -  "type": "string"
      -}
    • changedInput schema / properties / strokeVariable / description
      Previous value: -"Variable path for border color."New value: +"DS variable path for stroke color."
    • addedInput schema / properties / strokeWeight
      Added value: +{
      +  "description": "Stroke weight in pixels.",
      +  "type": "number"
      +}
    • removedInput schema / properties / strokeWidth
      Removed value: -{
      -  "description": "Border width in px.",
      -  "type": "number"
      -}
    • addedInput schema / properties / width / description
      Added value: +"Fixed width in pixels."
    • addedInput schema / properties / x / description
      Added value: +"X position in pixels. Required for page-level artboards. Use rightmost existing artboard x + width + 80."
    • addedInput schema / properties / y / description
      Added value: +"Y position in pixels. Defaults to 0 for artboards."
  2. First observedv1.4.0

TDQS

A4.8/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

The description details behavioral traits: binds to DS variables, gates component-like names with confirmedNoComponent and primitiveOverrideReason, mentions GRID mode and its error behavior on unsupported Figma versions. Annotations are minimal, so description carries burden and does so effectively.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is fairly dense but front-loads the main purpose. It lists key points without excessive verbosity. Could be slightly trimmed but overall efficient.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (45 parameters, no output schema), the description covers high-level usage, constraints, and ties to other tools. Missing details about return value are acceptable without an output schema. Provides adequate context.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters5/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, but description adds significant value by highlighting key parameters (parentId, direction, layoutSizing, variable bindings, GRID mode), explaining naming conventions, and clarifying the gating mechanism. Goes well beyond the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool creates an auto-layout container frame as a fallback when no DS component exists. It distinguishes from siblings by emphasizing it is a layout primitive and mentions checking mimic_map_components first.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly says to use this tool when no DS component exists, and to check mimic_map_components first. Also implies not to use when a component is available, and references phase 2+ for additional context.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.