Skip to main content
Glama

convert-figma-to-code

Convert Figma design layers to production-ready code blocks for websites, layouts, and themes using the Flowbite UI framework and Tailwind CSS.

Instructions

Converts a Figma layer to a code block

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
figmaNodeUrlYesThe URL of the Figma node to convert

Implementation Reference

  • src/index.ts:675-703 (registration)
    MCP tool registration for 'convert-figma-to-code' with schema definition and handler function
    server.tool( 'convert-figma-to-code', 'Converts a Figma layer to a code block', { figmaNodeUrl: z.string().describe('The URL of the Figma node to convert'), }, async ({ figmaNodeUrl }): Promise<CallToolResult> => { try { return { content: [ { type: 'text', text: `Code block converted`, }, ], }; } catch (error) { console.error(`Error converting Figma node to code: ${error}`); return { content: [ { type: 'text', text: `Error converting Figma node to code: ${error}`, }, ], } } } );
  • Zod schema definition for the figmaNodeUrl parameter
    { figmaNodeUrl: z.string().describe('The URL of the Figma node to convert'), },
  • Handler function that processes the convert-figma-to-code request (currently a stub implementation)
    async ({ figmaNodeUrl }): Promise<CallToolResult> => { try { return { content: [ { type: 'text', text: `Code block converted`, }, ], }; } catch (error) { console.error(`Error converting Figma node to code: ${error}`); return { content: [ { type: 'text', text: `Error converting Figma node to code: ${error}`, }, ], } } }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/zoltanszogyenyi/flowbite-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server