extract_styles
Extract design tokens like colors, fonts, and spacing from Figma frames to generate CSS or theme files with organized JSON output.
Instructions
Extract all design tokens from a frame.
HOW IT WORKS:
Collects colors, fonts, spacing, border radius, shadows
Returns organized JSON ready for CSS/theme generation
No chunking needed (compact output)
TYPICAL WORKFLOW:
get_frame_info → understand structure
extract_styles → design tokens
Use tokens to build theme/CSS
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| file_key | Yes | Figma file key | |
| page_name | Yes | Page name (partial match) | |
| frame_name | Yes | Frame name (partial match) |
Implementation Reference
- src/tools/handlers/styles.js:3-46 (handler)The main handler function that executes the extract_styles tool: fetches Figma file, page, and frame; collects design tokens (colors, fonts, sizes, radii, spacing, shadows) using collectStyles; formats and returns chunked JSON response.export async function extractStyles(ctx, fileKey, pageName, frameName) { const { chunker, figmaClient } = ctx; const file = await figmaClient.getFile(fileKey, 2); const page = figmaClient.findPageByName(file, pageName); if (!page) throw new Error(`Page "${pageName}" not found`); const frameRef = figmaClient.findFrameByName(page, frameName); if (!frameRef) throw new Error(`Frame "${frameName}" not found`); const frame = await figmaClient.getNode(fileKey, frameRef.id); const styles = { colors: new Set(), fonts: new Set(), fontSizes: new Set(), borderRadii: new Set(), spacing: new Set(), shadows: [], }; collectStyles(frame, styles); const response = chunker.wrapResponse( { frame: frame.name, designTokens: { colors: [...styles.colors].sort(), fonts: [...styles.fonts].sort(), fontSizes: [...styles.fontSizes].sort((a, b) => a - b), borderRadii: [...styles.borderRadii].sort((a, b) => a - b), spacing: [...styles.spacing].sort((a, b) => a - b), shadows: styles.shadows, }, }, { step: "Design tokens extracted", progress: `${styles.colors.size} colors, ${styles.fonts.size} fonts`, nextStep: "Use these tokens to build your theme/CSS, or extract_assets for icons/images", } ); return { content: [{ type: "text", text: JSON.stringify(response, null, 2) }] }; }
- src/tools/schemas.js:123-144 (schema)The input schema and description for the extract_styles tool, defining required parameters: file_key, page_name, frame_name.name: "extract_styles", description: `Extract all design tokens from a frame. HOW IT WORKS: - Collects colors, fonts, spacing, border radius, shadows - Returns organized JSON ready for CSS/theme generation - No chunking needed (compact output) TYPICAL WORKFLOW: 1. get_frame_info → understand structure 2. extract_styles → design tokens 3. Use tokens to build theme/CSS`, inputSchema: { type: "object", properties: { file_key: { type: "string", description: "Figma file key" }, page_name: { type: "string", description: "Page name (partial match)" }, frame_name: { type: "string", description: "Frame name (partial match)" }, }, required: ["file_key", "page_name", "frame_name"], }, },
- src/index.js:57-59 (registration)The dispatch registration in the main server request handler switch statement, mapping 'extract_styles' tool name to handlers.extractStyles function call.case "extract_styles": result = await handlers.extractStyles(this.ctx, args.file_key, args.page_name, args.frame_name); break;
- src/tools/handlers/index.js:4-4 (registration)Export of the extractStyles handler from styles.js, making it available via the handlers namespace imported in src/index.js.export { extractStyles, getFileStyles } from "./styles.js";