get_file_styles
Retrieve all published design system tokens from a Figma file, including colors, text styles, and effects for consistent design implementation.
Instructions
Get all published styles defined in the file.
HOW IT WORKS:
Returns design system tokens: colors, text styles, effects
These are the official styles defined in Figma
Compact output, no chunking needed
TYPICAL WORKFLOW:
get_file_styles → global design tokens
extract_styles(frame) → frame-specific tokens
Combine for complete design system
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| file_key | Yes | Figma file key |
Implementation Reference
- src/tools/handlers/styles.js:48-93 (handler)Core handler function that fetches Figma file styles using figmaClient.getStyles, categorizes them into colors, text, effects, and grids, and returns a formatted JSON response.export async function getFileStyles(ctx, fileKey) { const { chunker, figmaClient } = ctx; const styles = await figmaClient.getStyles(fileKey); const organized = { colors: [], text: [], effects: [], grids: [], }; for (const style of styles.meta?.styles || []) { const category = style.style_type === "FILL" ? "colors" : style.style_type === "TEXT" ? "text" : style.style_type === "EFFECT" ? "effects" : style.style_type === "GRID" ? "grids" : null; if (category) { organized[category].push({ name: style.name, key: style.key, description: style.description, }); } } const totalStyles = organized.colors.length + organized.text.length + organized.effects.length + organized.grids.length; const response = chunker.wrapResponse( { fileKey, styles: organized }, { step: "File styles retrieved", progress: `${totalStyles} styles`, nextStep: "Use extract_styles(frame) for frame-specific tokens", } ); return { content: [{ type: "text", text: JSON.stringify(response, null, 2) }] }; }
- src/tools/schemas.js:200-219 (schema)Tool schema defining the name, description, and input schema (requiring file_key) for the get_file_styles tool.name: "get_file_styles", description: `Get all published styles defined in the file. HOW IT WORKS: - Returns design system tokens: colors, text styles, effects - These are the official styles defined in Figma - Compact output, no chunking needed TYPICAL WORKFLOW: 1. get_file_styles → global design tokens 2. extract_styles(frame) → frame-specific tokens 3. Combine for complete design system`, inputSchema: { type: "object", properties: { file_key: { type: "string", description: "Figma file key" }, }, required: ["file_key"], }, },
- src/index.js:66-67 (registration)Switch case registration in the main server handler that dispatches calls to the getFileStyles handler function.case "get_file_styles": result = await handlers.getFileStyles(this.ctx, args.file_key);
- src/tools/handlers/index.js:4-4 (registration)Re-export of the getFileStyles handler from styles.js, making it available via the handlers namespace.export { extractStyles, getFileStyles } from "./styles.js";