figma-to-react-mcp/dist/src/utils/figma-parser.js

Convert Figma designs to React components automatically. MCP server with GitHub, Figma, and Playwright integrations for seamless design-to-code workflow.

export class FigmaUrlParser {
    static FIGMA_URL_REGEX = /https:\/\/(?:www\.)?figma\.com\/(?:file|design)\/([a-zA-Z0-9]+)\/([^/?]+)(?:\?.*node-id=([^&]+))?/;
    static FIGMA_NODE_REGEX = /node-id=([^&]+)/;
    static parseFigmaUrl(url) {
        try {
            const match = url.match(this.FIGMA_URL_REGEX);
            if (!match) {
                return null;
            }
            const [, fileId, fileName, nodeId] = match;
            if (!fileId) {
                return null;
            }
            const result = {
                fileId,
            };
            if (nodeId) {
                result.nodeId = this.decodeNodeId(nodeId);
            }
            if (fileName) {
                result.fileName = decodeURIComponent(fileName.replace(/-/g, " "));
            }
            return result;
        }
        catch (error) {
            console.error("Failed to parse Figma URL:", error);
            return null;
        }
    }
    static extractFileId(input) {
        if (/^[a-zA-Z0-9]+$/.test(input) && input.length > 10) {
            return input;
        }
        const urlInfo = this.parseFigmaUrl(input);
        if (urlInfo) {
            return urlInfo.fileId;
        }
        throw new Error("Invalid Figma file ID or URL format");
    }
    static extractNodeId(input) {
        if (/^\d+[-:]\d+$/.test(input)) {
            return input.replace("-", ":");
        }
        const nodeMatch = input.match(this.FIGMA_NODE_REGEX);
        if (nodeMatch && nodeMatch[1]) {
            return this.decodeNodeId(nodeMatch[1]);
        }
        return null;
    }
    static decodeNodeId(encodedNodeId) {
        try {
            const decoded = decodeURIComponent(encodedNodeId);
            return decoded.replace(/%3A/g, ":");
        }
        catch {
            return encodedNodeId;
        }
    }
    static isValidFileId(fileId) {
        return /^[a-zA-Z0-9]{22,}$/.test(fileId);
    }
    static isValidNodeId(nodeId) {
        return /^\d+:\d+$/.test(nodeId);
    }
    static createFigmaUrl(fileId, nodeId, fileName) {
        const baseUrl = `https://www.figma.com/file/${fileId}/${fileName || "design"}`;
        if (nodeId) {
            const encodedNodeId = encodeURIComponent(nodeId);
            return `${baseUrl}?node-id=${encodedNodeId}`;
        }
        return baseUrl;
    }
    static getInputHelpMessage() {
        return `
Figma input can be:
1. Full Figma URL: https://www.figma.com/file/abc123/My-Design?node-id=1%3A2
2. File ID only: abc123def456
3. Design share link: https://www.figma.com/design/abc123/My-Design

For specific frames/components, include the node-id parameter in the URL.
    `.trim();
    }
}
//# sourceMappingURL=figma-parser.js.map