FigClank: Docs

Overview

The FigClank MCP provides read-only access to design documents, enabling agents to:

Understand document structure
Extract design system information
Query specific nodes
Export assets
Generate code

Workflow Steps

Step 1: Select Target Screen

First, get a lightweight snapshot of the document and find the target screen.

// Get document snapshot
const snapshot = await mcp.call('documents_getSnapshot', {
  documentId: 'your-document-id',
});

// Query for the target frame/screen
const screens = await mcp.call('nodes_query', {
  documentId: 'your-document-id',
  version: snapshot.version, // Pin version for consistency
  query: {
    type: 'FRAME',
    nameContains: 'Login', // or exact name: 'Login Screen'
  },
  limit: 10,
  detailLevel: 'min',
});

// Select the target screen
const targetScreen = screens.items[0];

Step 2: Pull the Screen Subtree

Get the full node tree for the selected screen with layout and style information.

// Get subtree with depth limit
const subtree = await mcp.call('nodes_getSubtree', {
  documentId: 'your-document-id',
  version: snapshot.version,
  nodeId: targetScreen.id,
  depth: 6,
  maxNodes: 500,
  fields: ['id', 'name', 'type', 'layout', 'style', 'text', 'componentRef'],
  detailLevel: 'full',
});

Step 3: Resolve Component Instances

For each INSTANCE node, get the component definition to understand reusable patterns.

// Find all INSTANCE nodes in the subtree
const instances = subtree.nodes.filter(n => n.type === 'INSTANCE');

// Resolve each component
for (const instance of instances) {
  if (instance.componentRef?.componentId) {
    const component = await mcp.call('components_get', {
      documentId: 'your-document-id',
      version: snapshot.version,
      componentId: instance.componentRef.componentId,
    });
  }
}

Step 4: Get Design Tokens and Styles

Extract the design system for consistent theming.

// Get design tokens
const tokens = await mcp.call('tokens_get', {
  documentId: 'your-document-id',
  version: snapshot.version,
});

// Get text styles
const textStyles = await mcp.call('styles_list', {
  documentId: 'your-document-id',
  version: snapshot.version,
  type: 'TEXT',
});

// Get color/fill styles
const fillStyles = await mcp.call('styles_list', {
  documentId: 'your-document-id',
  version: snapshot.version,
  type: 'FILL',
});

Step 5: Export Assets

Export icons and images as needed.

// Export icon as SVG
const iconSvg = await mcp.call('export_svg', {
  documentId: 'your-document-id',
  version: snapshot.version,
  nodeId: iconNodeId,
});

// Note: PNG export has limited server-side support
// Prefer SVG for icons and vector graphics

Step 6: Generate Code

With all the information gathered, generate the code:

tokens.ts - Design tokens (colors, spacing, typography, shadows)
components/ - Reusable component library based on COMPONENT definitions
screens/ - Screen/page components based on FRAME structures

Component Mapping

Design Node Type	Code Component
`FRAME with auto layout`	`Flex container (div, View)`
`FRAME with fixed`	`Absolute container`
`TEXT`	`Typography component`
`RECTANGLE`	`Styled div, View, or Box`
`INSTANCE`	`Mapped component`
`VECTOR/ELLIPSE`	`SVG or icon component`

Best Practices

1. Always Pin Version

Use the version parameter for all document-scoped calls to ensure consistency.

2. Use Field Projection

Request only the fields you need to reduce payload size.

// For initial discovery, use 'min' detail level
await mcp.call('nodes_query', { ..., detailLevel: 'min' });

// For actual generation, use 'full' or specific fields
await mcp.call('nodes_getSubtree', { ..., detailLevel: 'full' });

3. Get Tokens Early

Load design tokens at the start to inform all subsequent code generation.

4. Batch Component Resolution

Resolve all unique components once, then reference the cached definitions.

5. Export Assets Sparingly

Only export assets when actually needed for the code.

Handling Large Designs

For designs with many nodes:

Paginate: Use cursor and limit parameters
Depth limit: Set reasonable depth (6-10) for getSubtree
Max nodes: Set maxNodes to prevent huge responses
Query first: Use nodes_query to find specific elements

Use inspect_screenSummary for quick analysis before diving deep. It includes layout sections, components used, colors used, typography used, and total node count.