Skip to main content
Glama
yhc984

Talk to Figma MCP

by yhc984

create_text

Add text elements to Figma designs by specifying position, content, font size, weight, color, and layer organization.

Instructions

Create a new text element in Figma

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
xYesX position
yYesY position
textYesText content
fontSizeNoFont size (default: 14)
fontWeightNoFont weight (e.g., 400 for Regular, 700 for Bold)
fontColorNoFont color in RGBA format
nameNoSemantic layer name for the text node
parentIdNoOptional parent node ID to append the text to

Implementation Reference

  • Core handler function for the 'create_text' tool. Creates a Figma TextNode, sets position, loads 'Inter' font based on weight, applies font size, sets text content using setCharacters helper, applies solid fill color, appends to specified parent or current page, and returns node details.
    async function createText(params) {
      const {
        x = 0,
        y = 0,
        text = "Text",
        fontSize = 14,
        fontWeight = 400,
        fontColor = { r: 0, g: 0, b: 0, a: 1 }, // Default to black
        name = "Text",
        parentId,
      } = params || {};
    
      // Map common font weights to Figma font styles
      const getFontStyle = (weight) => {
        switch (weight) {
          case 100:
            return "Thin";
          case 200:
            return "Extra Light";
          case 300:
            return "Light";
          case 400:
            return "Regular";
          case 500:
            return "Medium";
          case 600:
            return "Semi Bold";
          case 700:
            return "Bold";
          case 800:
            return "Extra Bold";
          case 900:
            return "Black";
          default:
            return "Regular";
        }
      };
    
      const textNode = figma.createText();
      textNode.x = x;
      textNode.y = y;
      textNode.name = name;
      try {
        await figma.loadFontAsync({
          family: "Inter",
          style: getFontStyle(fontWeight),
        });
        textNode.fontName = { family: "Inter", style: getFontStyle(fontWeight) };
        textNode.fontSize = parseInt(fontSize);
      } catch (error) {
        console.error("Error setting font size", error);
      }
      setCharacters(textNode, text);
    
      // Set text color
      const paintStyle = {
        type: "SOLID",
        color: {
          r: parseFloat(fontColor.r) || 0,
          g: parseFloat(fontColor.g) || 0,
          b: parseFloat(fontColor.b) || 0,
        },
        opacity: parseFloat(fontColor.a) || 1,
      };
      textNode.fills = [paintStyle];
    
      // If parentId is provided, append to that node, otherwise append to current page
      if (parentId) {
        const parentNode = await figma.getNodeByIdAsync(parentId);
        if (!parentNode) {
          throw new Error(`Parent node not found with ID: ${parentId}`);
        }
        if (!("appendChild" in parentNode)) {
          throw new Error(`Parent node does not support children: ${parentId}`);
        }
        parentNode.appendChild(textNode);
      } else {
        figma.currentPage.appendChild(textNode);
      }
    
      return {
        id: textNode.id,
        name: textNode.name,
        x: textNode.x,
        y: textNode.y,
        width: textNode.width,
        height: textNode.height,
        characters: textNode.characters,
        fontSize: textNode.fontSize,
        fontWeight: fontWeight,
        fontColor: fontColor,
        fontName: textNode.fontName,
        fills: textNode.fills,
        parentId: textNode.parent ? textNode.parent.id : undefined,
      };
    }
  • Dispatch switch statement in Figma plugin's command handler that routes 'create_text' command to the createText implementation.
        return await createRectangle(params);
      case "create_frame":
        return await createFrame(params);
      case "create_text":
        return await createText(params);
      case "set_fill_color":
        return await setFillColor(params);
      case "set_stroke_color":
        return await setStrokeColor(params);
      case "move_node":
        return await moveNode(params);
      case "resize_node":
        return await resizeNode(params);
      case "delete_node":
        return await deleteNode(params);
      case "get_styles":
        return await getStyles();
      case "get_local_components":
        return await getLocalComponents();
      case "get_team_components":
        return await getTeamComponents();
      case "create_component_instance":
        return await createComponentInstance(params);
      case "export_node_as_image":
        return await exportNodeAsImage(params);
      case "execute_code":
        return await executeCode(params);
      case "set_corner_radius":
        return await setCornerRadius(params);
      default:
        throw new Error(`Unknown command: ${command}`);
    }
  • MCP server registration of 'create_text' tool, including input schema validation with Zod and proxy handler that forwards parameters to Figma plugin via sendCommandToFigma.
    server.tool(
      "create_text",
      "Create a new text element in Figma",
      {
        x: z.number().describe("X position"),
        y: z.number().describe("Y position"),
        text: z.string().describe("Text content"),
        fontSize: z.number().optional().describe("Font size (default: 14)"),
        fontWeight: z.number().optional().describe("Font weight (e.g., 400 for Regular, 700 for Bold)"),
        fontColor: z.object({
          r: z.number().min(0).max(1).describe("Red component (0-1)"),
          g: z.number().min(0).max(1).describe("Green component (0-1)"),
          b: z.number().min(0).max(1).describe("Blue component (0-1)"),
          a: z.number().min(0).max(1).optional().describe("Alpha component (0-1)")
        }).optional().describe("Font color in RGBA format"),
        name: z.string().optional().describe("Optional name for the text node by default following text"),
        parentId: z.string().optional().describe("Optional parent node ID to append the text to")
      },
      async ({ x, y, text, fontSize, fontWeight, fontColor, name, parentId }) => {
        try {
          const result = await sendCommandToFigma('create_text', {
            x, y, text,
            fontSize: fontSize || 14,
            fontWeight: fontWeight || 400,
            fontColor: fontColor || { r: 0, g: 0, b: 0, a: 1 },
            name: name || 'Text',
            parentId
          });
          const typedResult = result as { name: string, id: string };
          return {
            content: [
              {
                type: "text",
                text: `Created text "${typedResult.name}" with ID: ${typedResult.id}`
              }
            ]
          };
        } catch (error) {
          return {
            content: [
              {
                type: "text",
                text: `Error creating text: ${error instanceof Error ? error.message : String(error)}`
              }
            ]
          };
        }
      }
    );
  • Helper function used by createText to safely set text.characters on the TextNode, handling font loading, mixed fonts with strategies (prevail, strict, experimental), and fallback to Inter Regular.
    const setCharacters = async (node, characters, options) => {
      const fallbackFont = (options && options.fallbackFont) || {
        family: "Inter",
        style: "Regular",
      };
      try {
        if (node.fontName === figma.mixed) {
          if (options && options.smartStrategy === "prevail") {
            const fontHashTree = {};
            for (let i = 1; i < node.characters.length; i++) {
              const charFont = node.getRangeFontName(i - 1, i);
              const key = `${charFont.family}::${charFont.style}`;
              fontHashTree[key] = fontHashTree[key] ? fontHashTree[key] + 1 : 1;
            }
            const prevailedTreeItem = Object.entries(fontHashTree).sort(
              (a, b) => b[1] - a[1]
            )[0];
            const [family, style] = prevailedTreeItem[0].split("::");
            const prevailedFont = {
              family,
              style,
            };
            await figma.loadFontAsync(prevailedFont);
            node.fontName = prevailedFont;
          } else if (options && options.smartStrategy === "strict") {
            return setCharactersWithStrictMatchFont(node, characters, fallbackFont);
          } else if (options && options.smartStrategy === "experimental") {
            return setCharactersWithSmartMatchFont(node, characters, fallbackFont);
          } else {
            const firstCharFont = node.getRangeFontName(0, 1);
            await figma.loadFontAsync(firstCharFont);
            node.fontName = firstCharFont;
          }
        } else {
          await figma.loadFontAsync({
            family: node.fontName.family,
            style: node.fontName.style,
          });
        }
      } catch (err) {
        console.warn(
          `Failed to load "${node.fontName["family"]} ${node.fontName["style"]}" font and replaced with fallback "${fallbackFont.family} ${fallbackFont.style}"`,
          err
        );
        await figma.loadFontAsync(fallbackFont);
        node.fontName = fallbackFont;
      }
      try {
        node.characters = characters;
        return true;
      } catch (err) {
        console.warn(`Failed to set characters. Skipped.`, err);
        return false;
      }
    };
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure but provides minimal information. It states this is a creation operation but doesn't mention whether it requires specific permissions, what happens on failure, whether the text becomes part of the document immediately, or what the return value might be. For a mutation tool with zero annotation coverage, this is a significant gap.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, clear sentence that states exactly what the tool does without any wasted words. It's appropriately sized for a tool with comprehensive schema documentation and gets straight to the point with no unnecessary elaboration.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a mutation tool with 8 parameters, no annotations, and no output schema, the description is insufficient. It doesn't explain what happens after creation (e.g., returns a node ID), error conditions, or behavioral constraints. The agent would need to guess about important aspects of tool behavior despite the good schema coverage.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The description adds no parameter information beyond what's already in the schema, which has 100% coverage with detailed descriptions for all 8 parameters. The baseline score of 3 is appropriate since the schema does all the heavy lifting. The description doesn't provide additional context about parameter relationships or usage patterns.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb ('Create') and resource ('new text element in Figma'), making the purpose immediately understandable. It distinguishes this tool from other creation tools like create_frame or create_rectangle by specifying it's for text elements. However, it doesn't explicitly differentiate from set_text_content (which modifies existing text) or other text-related tools, preventing a perfect score.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. There's no mention of when to choose create_text over set_text_content (for modifying existing text) or other text manipulation tools. It also lacks prerequisites like needing to be in a Figma document context or having appropriate permissions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

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/yhc984/cursor-talk-to-figma-mcp-main'

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