Mcp Figma

Example usage:

// Get full file
mcp_figma_get_file({
  file_key: "ABC123XYZ",
});

// Get specific version
mcp_figma_get_file({
  file_key: "ABC123XYZ",
  version: "1234567890",
});

mcp_figma_get_file_nodes - Get specific nodes from file

Parameters:

• file_key (required): Figma file key
• node_ids (required): Array of node IDs

Example usage:

mcp_figma_get_file_nodes({
  file_key: "ABC123XYZ",
  node_ids: ["123:456", "789:012"],
});

Component Operations

mcp_figma_get_components - Get component information

Parameters:

• file_key (required): Figma file key

Example usage:

const components = mcp_figma_get_components({
  file_key: "ABC123XYZ",
});
// Returns: { components: { [key]: { name, description, ... } } }

mcp_figma_get_component_sets - Get component variants

Parameters:

• file_key (required): Figma file key

Example usage:

const variants = mcp_figma_get_component_sets({
  file_key: "ABC123XYZ",
});

Style Operations

mcp_figma_get_styles - Get style definitions

Parameters:

• file_key (required): Figma file key

Example usage:

const styles = mcp_figma_get_styles({
  file_key: "ABC123XYZ",
});
// Returns: { fills, strokes, effects, text, grids }

Image Operations

mcp_figma_get_images - Export images from nodes

Parameters:

• file_key (required): Figma file key
• node_ids (required): Array of node IDs
• format (optional): 'png', 'jpg', 'svg', 'pdf' (default: 'png')
• scale (optional): 1, 2, 3, 4 (default: 1)

Example usage:

// Export as PNG
mcp_figma_get_images({
  file_key: "ABC123XYZ",
  node_ids: ["123:456"],
  format: "png",
  scale: 2,
});

// Export as SVG
mcp_figma_get_images({
  file_key: "ABC123XYZ",
  node_ids: ["789:012"],
  format: "svg",
});

Comments Operations

mcp_figma_get_comments - Get file comments

Parameters:

• file_key (required): Figma file key

Example usage:

const comments = mcp_figma_get_comments({
  file_key: "ABC123XYZ",
});

mcp_figma_post_comment - Add comment to file

Parameters:

• file_key (required): Figma file key
• message (required): Comment text
• node_id (optional): Node to comment on

Example usage:

mcp_figma_post_comment({
  file_key: "ABC123XYZ",
  message: "Implemented button component",
  node_id: "123:456",
});

Workflow Patterns

Implementing Components from Figma

1. Get component specifications:

   const file = mcp_figma_get_file({
     file_key: "ABC123XYZ",
   });
   
   // Find button component
   const buttonNode = file.document.children
     .find((page) => page.name === "Components")
     .children.find((component) => component.name === "Button");
   

2. Extract design tokens:

   const styles = mcp_figma_get_styles({
     file_key: "ABC123XYZ",
   });
   
   // Parse color styles
   const colors = styles.fills.map((fill) => ({
     name: fill.name,
     value: rgbToHex(fill.color),
   }));
   

3. Download assets:

   const images = mcp_figma_get_images({
     file_key: "ABC123XYZ",
     node_ids: ["icon-node-id"],
     format: "svg",
   });
   

4. Implement component:

   // packages/lexico-components/src/components/Button.tsx
   import { Button as ShadcnButton } from "./ui/button";
   
   export function Button({ variant, size, children }) {
     // Implementation matching Figma specs
     return (
       <ShadcnButton
         variant={variant}
         size={size}
       >
         {children}
       </ShadcnButton>
     );
   }
   

5. Comment on Figma:

   mcp_figma_post_comment({
     file_key: "ABC123XYZ",
     message: "Button component implemented in lexico-components",
     node_id: buttonNode.id,
   });
   

Syncing Design Tokens

1. Get style definitions:

   const styles = mcp_figma_get_styles({
     file_key: "ABC123XYZ",
   });
   

2. Parse colors:

   const colorTokens = styles.fills.reduce((acc, fill) => {
     const name = fill.name.toLowerCase().replace(/\s+/g, "-");
     const value = rgbToHex(fill.color);
     acc[name] = value;
     return acc;
   }, {});
   

3. Update Tailwind config:

   // packages/lexico-components/tailwind.config.ts
   export default {
     theme: {
       extend: {
         colors: {
           ...colorTokens,
         },
       },
     },
   };
   

4. Update CSS variables:

   /* packages/lexico-components/src/styles/globals.css */
   :root {
     --primary: 210 100% 50%;
     --secondary: 200 50% 60%;
     /* ... other tokens from Figma */
   }
   

Extracting Icon Assets

1. Find icon frames:

   const file = mcp_figma_get_file({
     file_key: "ABC123XYZ",
   });
   
   const iconPage = file.document.children.find(
     (page) => page.name === "Icons",
   );
   
   const iconNodeIds = iconPage.children.map((node) => node.id);
   

2. Export as SVG:

   const svgs = mcp_figma_get_images({
     file_key: "ABC123XYZ",
     node_ids: iconNodeIds,
     format: "svg",
   });
   

3. Save to project:

   for (const [nodeId, url] of Object.entries(svgs.images)) {
     const node = iconPage.children.find((n) => n.id === nodeId);
     const filename = node.name.toLowerCase().replace(/\s+/g, "-");
   
     // Download and save SVG
     await downloadAndSave(
       url,
       `packages/lexico-components/assets/icons/${filename}.svg`,
     );
   }
   

Project-Specific Usage

lexico-components Integration

Extract component library design:

// Get lexico-components Figma file
const file = mcp_figma_get_file({
  file_key: "lexico-components-file-key",
});

// Get all components
const components = mcp_figma_get_components({
  file_key: "lexico-components-file-key",
});

// Parse component hierarchy
const componentTree = buildComponentTree(file.document);

Sync shadcn customizations:

// Get button variants from Figma
const buttonVariants = mcp_figma_get_file_nodes({
  file_key: "lexico-components-file-key",
  node_ids: ["button-default", "button-primary", "button-outline"],
});

// Extract style specifications
const buttonStyles = buttonVariants.nodes.map((node) => ({
  variant: node.name,
  backgroundColor: node.fills[0].color,
  textColor: node.children[0].fills[0].color,
  padding: node.paddingLeft,
  borderRadius: node.cornerRadius,
}));

lexico Application Design

Get page layouts:

const file = mcp_figma_get_file({
  file_key: "lexico-app-file-key",
});

// Find search page design
const searchPage = file.document.children
  .find((page) => page.name === "Pages")
  .children.find((frame) => frame.name === "Search");

// Extract layout specifications
const layout = {
  width: searchPage.absoluteBoundingBox.width,
  height: searchPage.absoluteBoundingBox.height,
  padding: searchPage.paddingLeft,
  gap: searchPage.itemSpacing,
};

Design Token Conversion

Color Conversion

function rgbToHex(color: { r: number; g: number; b: number }): string {
  const r = Math.round(color.r * 255);
  const g = Math.round(color.g * 255);
  const b = Math.round(color.b * 255);
  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
}

// Figma RGB (0-1) to hex
const hex = rgbToHex({ r: 0.2, g: 0.4, b: 0.8 });
// Result: '#3366cc'

Typography Conversion

function figmaTypographyToCSS(textStyle: FigmaTextStyle) {
  return {
    fontFamily: textStyle.fontFamily,
    fontSize: `${textStyle.fontSize}px`,
    fontWeight: textStyle.fontWeight,
    lineHeight: `${textStyle.lineHeightPx}px`,
    letterSpacing: `${textStyle.letterSpacing}px`,
  };
}

Spacing Conversion

function extractSpacingScale(file: FigmaFile) {
  // Find spacing tokens in Figma
  const spacingPage = file.document.children.find(
    (page) => page.name === "Tokens/Spacing",
  );

  const spacingTokens = spacingPage.children.reduce((acc, node) => {
    const name = node.name.replace("spacing/", "");
    acc[name] = node.absoluteBoundingBox.width;
    return acc;
  }, {});

  return spacingTokens;
}

Common Use Cases

Component Audit

// Get all components in Figma
const figmaComponents = mcp_figma_get_components({
  file_key: "ABC123XYZ",
});

// Get all components in code
const codeComponents = listCodeComponents("packages/lexico-components");

// Find missing implementations
const missing = Object.keys(figmaComponents.components).filter(
  (name) => !codeComponents.includes(name),
);

console.log("Components not yet implemented:", missing);

Design Version History

// Get file versions
const file = mcp_figma_get_file({
  file_key: "ABC123XYZ",
});

const currentVersion = file.version;

// Get previous version
const previousFile = mcp_figma_get_file({
  file_key: "ABC123XYZ",
  version: currentVersion - 1,
});

// Compare changes
const changes = compareFiles(previousFile, file);

Asset Export Pipeline

async function exportAllAssets(fileKey: string) {
  // Get file structure
  const file = mcp_figma_get_file({ file_key: fileKey });

  // Find assets page
  const assetsPage = file.document.children.find(
    (page) => page.name === "Assets",
  );

  if (!assetsPage) return;

  // Export each asset
  for (const node of assetsPage.children) {
    const images = mcp_figma_get_images({
      file_key: fileKey,
      node_ids: [node.id],
      format: node.name.endsWith(".svg") ? "svg" : "png",
      scale: 2,
    });

    // Download and save
    for (const [nodeId, url] of Object.entries(images.images)) {
      const filename = node.name;
      await downloadAndSave(url, `assets/${filename}`);
    }
  }
}

Troubleshooting

Permission denied:

• Verify Figma access token is valid
• Check file sharing permissions
• Request editor access for commenting

Node not found:

• Verify node ID is correct
• Check if node was deleted
• Use get_file to find current nodes

Image export fails:

• Check format is supported
• Verify node contains exportable content
• Try reducing scale factor

Style parsing errors:

• Check if styles are published
• Verify style type matches expected format
• Handle missing or null values

Best Practices

1. Cache file data to reduce API calls
2. Version control design tokens in git
3. Automate token sync with CI/CD
4. Document Figma file structure in README
5. Use consistent naming between Figma and code
6. Export assets in multiple formats (SVG + PNG)
7. Comment implementation status in Figma
8. Set up webhooks for design updates
9. Validate tokens before committing
10. Keep design system files organized

Security Considerations

• Protect Figma access tokens - never commit to git
• Use read-only tokens when possible
• Limit file access to team members only
• Audit token usage regularly
• Rotate tokens periodically

Related Documentation

• packages/lexico-components/AGENTS.md - Component library
• mcp-shadcn skill - shadcn component management
• Figma API Documentation - Official Figma API docs

See Also

• mcp-shadcn skill - For component implementation
• github-actions skill - For automated design sync