Create a frame (screen, section, card, container). Automatically applies auto-layout with design-intelligent defaults.

Create text with design-intelligent typography. Font weight is auto-resolved (e.g. "bold" → "Bold", "600" → "Semi Bold").

Create a rectangle shape.

Create a circle or oval.

Create a line or divider.

Create a vector graphic from SVG markup. Use for icons, logos, illustrations.

Create a reusable component from the current selection or a new frame.

Instantiate an existing component.

Combine component variants into a variant set.

Create a design-intelligent component with proper auto-layout, padding, and sizing. Uses component intelligence defaults.

Configure auto-layout on a frame. All spacing is 8px grid-snapped.

Create a design-intelligent page section (hero, features, pricing, CTA, testimonials, FAQ, footer, stats, logos, comparison, team).

Create a complete page design with multiple sections. Design-intelligent layout, spacing, and typography throughout.

Create a data table with headers, rows, and proper spacing.

Create a form layout with labeled inputs, validation states, and submit button.

Create a navigation bar with logo, links, and CTA button.

Create a grid of cards with proper spacing and alignment.

Create a sidebar + main content layout with proper proportions.

Create a page footer with columns, links, and copyright.

Create a page header/hero with heading, subheading, and CTA.

Modify properties of any existing node.

Set fill on a node. Supports solid, linear gradient, radial gradient, and multiple fills.

Add border/stroke to a node.

Add shadows, blur, or background blur effects.

Set an image fill on a node from URL.

Apply mixed styling within a text node. Style specific character ranges differently.

Set responsive constraints on a node.

Remove a node from the canvas.

Move a node into a different parent frame.

Duplicate a node.

Group multiple nodes together.

Ungroup a group node.

Resize a node with optional constraint preservation.

Align multiple nodes relative to each other.

Set corner radius with per-corner control.

Set node opacity.

Set blend mode.

Toggle clip content on a frame.

Rename a node.

Lock/unlock a node.

Show/hide a node.

Change z-order of a node.

Set how a child behaves in auto-layout.

Flatten a node into a single vector.

Rotate a node.

Draw custom vector paths using SVG-like path data.

Perform boolean operations on shapes.

Create a regular polygon.

Create a star shape.

Offset/expand a vector path.

Create an arrow shape.

Create a common UI icon from built-in set.

Create a horizontal or vertical divider line.

Get the currently selected nodes with full properties.

Get the full page layer tree with types, names, and hierarchy.

Get detailed properties of a specific node including fills, effects, auto-layout, and text styles.

Get detailed properties of multiple nodes.

Search for nodes by name, type, or properties.

Get all local paint, text, and effect styles in the file.

Get all local variable collections and variables.

List all components in the file.

List all pages in the document.

Get document name, pages, and metadata.

Select nodes and optionally scroll viewport to them.

Focus viewport on a specific node.

Get all annotations/comments on the document or a specific node.

Create or update an annotation with markdown support.

Get all fonts available in the Figma file.

Get CSS representation of a node (for developer handoff).

Extract all colors used in the current selection.

Measure distance between two nodes.

Create a design token collection with modes (e.g. Light/Dark).

Create a design variable/token.

Bind a variable to a node property.

List all variable collections and their variables.

Update a variable value.

Delete a variable.

Generate a complete design token system from a brand color. Creates color, spacing, radius, and typography collections.

Import design tokens from JSON (W3C Design Token format).

Export all design tokens as JSON, CSS custom properties, SCSS, or Tailwind config.

Switch the active mode on a variable collection.

Export a node as SVG markup.

Export a node as PNG.

Generate React + Tailwind code from a Figma node tree.

Generate design specifications document for developer handoff.

Batch export all exportable assets (icons, images) from a node tree.

Take a screenshot of the current canvas view or a specific node.

Copy CSS properties of a node to clipboard.

Generate a complete stylesheet from a design file.

Export all colors used as a palette.

Export all text styles as a typography system.

Export a complete inventory of all components with usage counts.

Export all spacing values used as a spacing token system.

Run a full accessibility audit on a node tree. Checks contrast, touch targets, font sizes, focus indicators.

Check color contrast ratio between two colors.

Auto-fix all touch targets below 44px in a node tree.

Run design lint rules: spacing consistency, naming conventions, color usage, font sizes, alignment.

Auto-fix all spacing values to nearest 8px grid value.

Check layer naming conventions. Flags generic names like "Frame 123", "Group 5".

AI-powered design improvement suggestions based on the design intelligence engine.