figma_get_styles
Retrieve all color, text, effect, and grid styles from a Figma file, with optional CSS, Tailwind, Sass, TypeScript, or JSON exports for design system documentation.
Instructions
Get all styles (color, text, effects, grids) from a Figma file with optional code exports. Use when user asks for: text styles, color palette, design system styles, typography, or style documentation. Returns organized style definitions with resolved values. NOT for design tokens/variables (use figma_get_variables). Set enrich=true for CSS/Tailwind/Sass code examples. Supports verbosity control to manage payload size. TIP: For full design system extraction (tokens + components + styles combined), prefer figma_get_design_system_kit instead — it returns everything in one optimized call.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| enrich | No | Set to true when user asks for: CSS/Sass/Tailwind code, export formats, usage information, code examples, or design system exports. Adds resolved values, usage analysis, and export format examples. Default: false for backward compatibility | |
| fileUrl | No | Figma file URL (e.g., https://figma.com/design/abc123). Auto-detected from WebSocket Desktop Bridge connection. Only required if not connected. | |
| verbosity | No | Controls payload size: 'summary' (names/types only, ~85% smaller), 'standard' (essential properties, ~40% smaller), 'full' (everything). Default: standard | standard |
| include_usage | No | Include component usage information (requires enrich=true) | |
| export_formats | No | Which code formats to generate examples for. Use when user mentions specific formats like 'CSS', 'Tailwind', 'SCSS', 'TypeScript', etc. Automatically enables enrichment. Default: all formats | |
| include_exports | No | Include export format examples (requires enrich=true) |