FigmaMind MCP Server

# Supported Component Types This document describes in detail each component type supported by FigmaMind, including their specific properties and usage examples. ## Supported Components The system currently supports the following component types: 1. [Button](#button) 2. [Header](#header) 3. [Input](#input) 4. [OnboardingInput](#onboardinginput) 5. [Keyboard](#keyboard) 6. [List](#list) 7. [Text](#text) 8. [RadioButton](#radiobutton) 9. [OnboardCodeField](#onboardcodefield) --- ## Button Button components are identified by the name containing "button" or by specific properties. ### Extracted Properties | Property | Type | Description | |----------|---------|-------------------------------------------------------------| | text | String | Text displayed on the button | | style | String | Button style (primary, secondary, tertiary, etc.) | | states | Object | Button states (disabled, hover, pressed, etc.) | | icon | Object | Information about icons associated with the button | ### Output Example ```json { "id": "2139:96739", "name": "bottom-button", "type": "button", "size": { "width": 390, "height": 88 }, "position": { "x": 0, "y": 412, "relativeX": 0, "relativeY": 0.49 }, "properties": { "text": "Next", "style": "primary", "states": {} }, "alignment": { "horizontal": "center", "margins": { "left": 0, "right": 0 } } } ``` --- ## Header Header components are identified by the name containing "header" or by their position at the top of the screen. ### Extracted Properties | Property | Type | Description | |----------------|---------|----------------------------------------------------| | title | String | Title displayed in the header | | hasBackButton | Boolean | Indicates if the header has a back button | | hasCloseButton | Boolean | Indicates if the header has a close button | ### Output Example ```json { "id": "2045:33565", "name": "header", "type": "header", "size": { "width": 390, "height": 102 }, "position": { "x": 0, "y": 0, "relativeX": 0, "relativeY": 0 }, "properties": { "title": "9:41", "hasBackButton": false, "hasCloseButton": false }, "alignment": { "horizontal": "center", "margins": { "left": 0, "right": 0 } } } ``` --- ## Input Input components identified by the name containing "input" or by the frame structure. ### Extracted Properties | Property | Type | Description | |------------|---------|----------------------------------------------------| | placeholder | String | Placeholder text displayed when the field is empty | | type | String | Input type (text, number, email, password, etc.) | | states | Object | Field states (focused, filled, error, etc.) | ### Output Example ```json { "id": "I2045:33566;338:7141", "name": "input", "type": "input", "size": { "width": 342, "height": 35 }, "position": { "x": 24, "y": 188, "relativeX": 0.06, "relativeY": 0.22 }, "properties": { "placeholder": "Enter your business name", "type": "text", "states": {} }, "alignment": { "horizontal": "center", "margins": { "left": 24, "right": 24 } } } ``` --- ## OnboardingInput Advanced version of the input component, specific for onboarding flows, with support for validation and labels. ### Extracted Properties | Property | Type | Description | |------------|---------|----------------------------------------------------------| | placeholder | String | Placeholder text | | label | String | Descriptive field label | | type | String | Input type (text, number, email, password, etc.) | | validation | Object | Validation rules (optional) | | states | Object | Field states (focused, filled, error, etc.) | ### Output Example ```json { "id": "2045:33566", "name": "Onboarding/default", "type": "onboardingInput", "size": { "width": 342, "height": 111 }, "position": { "x": 24, "y": 112, "relativeX": 0.06, "relativeY": 0.13 }, "properties": { "placeholder": "Enter your business name", "label": "", "type": "text", "validation": null, "states": {} }, "alignment": { "horizontal": "center", "margins": { "left": 24, "right": 24 } } } ``` --- ## Keyboard Virtual keyboard components identified by the name containing "keyboard". ### Extracted Properties | Property | Type | Description | |---------------|---------|----------------------------------------------------| | keyboardType | String | Keyboard type (alphabetic, numeric, etc.) | | hasSpecialKeys | Boolean | Indicates if the keyboard has special keys | ### Output Example ```json { "id": "2139:96790", "name": "4. alphabetic-keyboard", "type": "keyboard", "size": { "width": 390, "height": 310 }, "position": { "x": 0, "y": 500, "relativeX": 0, "relativeY": 0.59 }, "properties": { "keyboardType": "alphabetic", "hasSpecialKeys": true }, "alignment": { "horizontal": "center", "margins": { "left": 0, "right": 0 } } } ``` --- ## List List components identified by the name containing "list" or by the frame structure with repeated items. ### Extracted Properties | Property | Type | Description | |------------|---------|----------------------------------------------------| | items | Array | Array of items in the list | | style | String | List style (bullets, numbered, etc.) | | separator | Boolean | Indicates if there are separators between items | ### Output Example ```json { "id": "list123", "name": "list-example", "type": "list", "size": { "width": 342, "height": 200 }, "position": { "x": 24, "y": 250, "relativeX": 0.06, "relativeY": 0.3 }, "properties": { "items": [ { "text": "Item 1", "icon": "check" }, { "text": "Item 2", "icon": "check" }, { "text": "Item 3", "icon": "check" } ], "style": "bullets", "separator": true }, "alignment": { "horizontal": "center", "margins": { "left": 24, "right": 24 } } } ``` --- ## Text Simple text components. ### Extracted Properties | Property | Type | Description | |------------|---------|----------------------------------------------------| | text | String | Text content | | style | String | Text style (heading, body, caption, etc.) | | formatting | Object | Formatting information (bold, italic, etc.) | ### Output Example ```json { "id": "text456", "name": "text-paragraph", "type": "text", "size": { "width": 342, "height": 60 }, "position": { "x": 24, "y": 200, "relativeX": 0.06, "relativeY": 0.24 }, "properties": { "text": "This is a sample text paragraph.", "style": "body", "formatting": { "align": "left", "fontSize": 16 } }, "alignment": { "horizontal": "center", "margins": { "left": 24, "right": 24 } } } ``` --- ## RadioButton Radio button or option components. ### Extracted Properties | Property | Type | Description | |-----------|---------|----------------------------------------------------| | label | String | Radio button label text | | selected | Boolean | Button selection state | | group | String | Identifier of the radio button group | ### Output Example ```json { "id": "radio789", "name": "radio-option", "type": "radioButton", "size": { "width": 300, "height": 24 }, "position": { "x": 45, "y": 300, "relativeX": 0.12, "relativeY": 0.36 }, "properties": { "label": "Option A", "selected": true, "group": "optionsGroup" }, "alignment": { "horizontal": "left", "margins": { "left": 45, "right": 45 } } } ``` --- ## OnboardCodeField Specialized components for verification code input. ### Extracted Properties | Property | Type | Description | |------------|---------|----------------------------------------------------| | label | String | Descriptive field text | | digitCount | Number | Number of code digits | | separator | Boolean | Indicates if there are separators between digits | | states | Object | Field states (filled, error, success) | ### Output Example ```json { "id": "code123", "name": "verification-code", "type": "onboardCodeField", "size": { "width": 342, "height": 80 }, "position": { "x": 24, "y": 350, "relativeX": 0.06, "relativeY": 0.41 }, "properties": { "label": "Verification Code", "digitCount": 6, "separator": true, "states": {} }, "alignment": { "horizontal": "center", "margins": { "left": 24, "right": 24 } } } ``` ## How to Add Support for New Components To add support for a new component type: 1. Create a transformer function in `src/transformers/index.js`: ```javascript function transformNewComponent(component) { // Extract relevant properties return { // Specific properties for this component }; } ``` 2. Update the `identifyComponentType` function to recognize the new component: ```javascript function identifyComponentType(component) { // ... existing code ... if (component.name.toLowerCase().includes('newtype')) { return 'newType'; } // ... existing code ... } ``` 3. Add the function to the transformer mapping: ```javascript const transformerMap = { // ... existing transformers ... 'newType': transformNewComponent }; ``` 4. Update the documentation to include the new component type