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}`,
            },
          ],
        }
      }
    }

Tool Definition Quality

Score is being calculated. Check back soon.

Install Server

Other Tools

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/themesberg/flowbite-mcp'

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