Use the Figma MCP server to access design files, extract assets, and sync design tokens. Use this skill when working with Figma designs or implementing UI components.
This skill covers using the Figma MCP server to interact with Figma design files, extract design specifications, download assets, and sync design tokens with the codebase.
Use Figma MCP tools when:
The Figma MCP server provides these tools (prefix: mcp_figma_):
mcp_figma_get_file - Get Figma file contents
Parameters:
file_key (required): Figma file key from URLversion (optional): Specific file versiondepth (optional): Tree depth to fetch (default: all)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 keynode_ids (required): Array of node IDsExample usage:
mcp_figma_get_file_nodes({
file_key: "ABC123XYZ",
node_ids: ["123:456", "789:012"],
});
mcp_figma_get_components - Get component information
Parameters:
file_key (required): Figma file keyExample 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 keyExample usage:
const variants = mcp_figma_get_component_sets({
file_key: "ABC123XYZ",
});
mcp_figma_get_styles - Get style definitions
Parameters:
file_key (required): Figma file keyExample usage:
const styles = mcp_figma_get_styles({
file_key: "ABC123XYZ",
});
// Returns: { fills, strokes, effects, text, grids }
mcp_figma_get_images - Export images from nodes
Parameters:
file_key (required): Figma file keynode_ids (required): Array of node IDsformat (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",
});
mcp_figma_get_comments - Get file comments
Parameters:
file_key (required): Figma file keyExample usage:
const comments = mcp_figma_get_comments({
file_key: "ABC123XYZ",
});
mcp_figma_post_comment - Add comment to file
Parameters:
file_key (required): Figma file keymessage (required): Comment textnode_id (optional): Node to comment onExample usage:
mcp_figma_post_comment({
file_key: "ABC123XYZ",
message: "Implemented button component",
node_id: "123:456",
});
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");
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),
}));
Download assets:
const images = mcp_figma_get_images({
file_key: "ABC123XYZ",
node_ids: ["icon-node-id"],
format: "svg",
});
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>
);
}
Comment on Figma:
mcp_figma_post_comment({
file_key: "ABC123XYZ",
message: "Button component implemented in lexico-components",
node_id: buttonNode.id,
});
Get style definitions:
const styles = mcp_figma_get_styles({
file_key: "ABC123XYZ",
});
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;
}, {});
Update Tailwind config:
// packages/lexico-components/tailwind.config.ts
export default {
theme: {
extend: {
colors: {
...colorTokens,
},
},
},
};
Update CSS variables:
/* packages/lexico-components/src/styles/globals.css */
:root {
--primary: 210 100% 50%;
--secondary: 200 50% 60%;
/* ... other tokens from Figma */
}
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);
Export as SVG:
const svgs = mcp_figma_get_images({
file_key: "ABC123XYZ",
node_ids: iconNodeIds,
format: "svg",
});
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`,
);
}
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,
}));
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,
};
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'
function figmaTypographyToCSS(textStyle: FigmaTextStyle) {
return {
fontFamily: textStyle.fontFamily,
fontSize: `${textStyle.fontSize}px`,
fontWeight: textStyle.fontWeight,
lineHeight: `${textStyle.lineHeightPx}px`,
letterSpacing: `${textStyle.letterSpacing}px`,
};
}
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;
}
// 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);
// 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);
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}`);
}
}
}
Permission denied:
Node not found:
Image export fails:
Style parsing errors: