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