Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
| FIGMA_ACCESS_TOKEN | Yes | Figma Personal Access Token used to authenticate with the Figma REST API. |
Capabilities
Features and capabilities supported by this server
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| get_file | Get a Figma file structure and metadata. Returns the document tree, components, and styles. |
| get_node | Get specific nodes from a Figma file by their IDs. More efficient than getting the full file when you know what nodes you need. |
| get_components | List all components in a Figma file. Returns component keys, names, and descriptions. |
| get_styles | Get all styles (colors, text styles, effects, grids) from a Figma file. |
| get_variables | Get design tokens/variables from a Figma file. Includes colors, spacing, and other tokenized values. |
| export_image | Export a Figma node as an image (PNG, JPG, SVG, or PDF). Returns a URL to the exported image. |
| create_frame | Create a new frame in Figma. Frames are the primary container for designs. Requires the Figma plugin to be connected. |
| create_rectangle | Create a rectangle shape in Figma. Can have fills and rounded corners. |
| create_text | Create a text node in Figma. Supports font customization and alignment. |
| update_node | Update properties of an existing Figma node. Can modify position, size, text, visibility, and more. |
| apply_auto_layout | Apply auto-layout to a frame. Auto-layout automatically arranges children horizontally or vertically with consistent spacing. |
| set_fills | Set fill colors/gradients on a node. Replaces all existing fills. |
| delete_node | Delete a node from the Figma document. |
| get_selection | Get the currently selected nodes in Figma. |
| capture_webpage | Capture a webpage screenshot and analyze its DOM structure. Detects UI components like buttons, inputs, cards, navigation. Returns capture ID for use with reconstruct_page. |
| reconstruct_page | Reconstruct a captured webpage in Figma. Creates frames, shapes, and text based on the captured DOM structure. Requires capture_webpage to be called first. |
| generate_ui | Generate a UI design from a text description. Parses the prompt for common UI patterns (header, hero, cards, form, footer) and creates corresponding Figma elements. |
| analyze_codebase | Analyze a codebase to extract component definitions, props, and design tokens. Supports React, Vue, Svelte, Angular. Extracts Tailwind config and CSS variables. |
| sync_design_tokens | Compare and sync design tokens between Figma and code. Can extract tokens from Figma variables/styles or from codebase analysis. |
| plugin_status | Check if the Figma plugin is connected. Write operations require the plugin. |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
No prompts | |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
No resources | |