Framelink connects your Figma designs directly to AI coding agents. The MCP provides comprehensive design data that helps agents understand your designs significantly better than a screenshot, and generates code that’s much closer to pixel-perfect straight out of the gate.
Quickstart
Connect Figma to your coding agent in about five minutes.
Check out this video to see the MCP server in action.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Framelink","colors":{"primary":"#0D9373"},"logo":{"light":"https://mintcdn.com/branch-labs/bghC0h1XT5HW2t8q/logo/light.svg?fit=max\u0026auto=format\u0026n=bghC0h1XT5HW2t8q\u0026q=85\u0026s=4d2363499f55bcf82c9e33ed7496bc57","dark":"https://mintcdn.com/branch-labs/bghC0h1XT5HW2t8q/logo/dark.svg?fit=max\u0026auto=format\u0026n=bghC0h1XT5HW2t8q\u0026q=85\u0026s=b016ae6e170339eb8f1278b555def6de","href":"https://www.framelink.ai"},"favicon":{"light":"https://mintcdn.com/branch-labs/bghC0h1XT5HW2t8q/logo/favicon-light.svg?fit=max\u0026auto=format\u0026n=bghC0h1XT5HW2t8q\u0026q=85\u0026s=eacef8f75bc64bd1987a964ec6572d86","dark":"https://mintcdn.com/branch-labs/bghC0h1XT5HW2t8q/logo/favicon-dark.svg?fit=max\u0026auto=format\u0026n=bghC0h1XT5HW2t8q\u0026q=85\u0026s=89b8491b9ad2c276e7706e6fb2a67e6e"},"navbar":{"links":[{"href":"https://discord.gg/MeE3UEjdGN","type":"discord"}],"primary":{"type":"github","href":"https://github.com/GLips/Figma-Context-MCP"}},"contextual":{"options":["copy","view","chatgpt","claude","cursor","vscode"],"display":"header"},"styling":{"latex":false},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"branch-labs","hasAudioNarration":false,"actualSubdomain":"branch-labs","customDomains":["docs.framelink.ai"],"gitSource":{"type":"github","owner":"framelinkai","repo":"framelink-docs","deployBranch":"main","contentDirectory":"","isPrivate":false,"mountPath":"","label":""},"chroma":{"latestBuiltDeploymentHistoryId":"6ad150c0cf49c36747ec04ee","collectionId":"1e954399-ef8c-4d6a-9659-c80a77440436","liveDeploymentHistoryId":"6ad150c0cf49c36747ec04ee","schemaVersion":"v3"},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6ad152adaf4f07ffd10931c2","clientVersion":"0.0.3859","searchFilterCounts":[{"language":"default","tag":"Guides","count":7}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableContextualStarterQuestions":false,"enableAskAiSearchBar":true},"hasChatPermissions":true,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-v7-file-tree","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"pause-universal-search-reconcile","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"per-site-search-delta","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-branches-v2-autocommit","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-branches-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-private-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"teamspace","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-nav-generations","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-agent-model-picker","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"client-snapshot-docs-config","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"isAtlas":false},"customCss":[],"page":{"pagePath":"index","slug":"/","pageMetadata":{"title":"Framelink MCP for Figma","sidebarTitle":"Introduction","description":"Framelink connects your Figma designs directly to AI coding agents. The MCP provides comprehensive design data that helps agents understand your designs significantly better than a screenshot, and generates code that's much closer to pixel-perfect straight out of the gate.","href":"/index"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Framelink connects your Figma designs directly to AI coding agents. The MCP provides comprehensive design data that helps agents understand your designs significantly better than a screenshot, and generates code that’s much closer to pixel-perfect straight out of the gate.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={p:`p`,..._provideComponents(),...props.components},{Card,Frame,Heading,OptimizedFrame}=_components;if(!Card)_missingMdxReference(`Card`,true);if(!Frame)_missingMdxReference(`Frame`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!OptimizedFrame)_missingMdxReference(`OptimizedFrame`,true);return _jsxs(_Fragment,{children:[_jsx(Card,{title:`Quickstart`,icon:`rocket`,href:`/quickstart`,horizontal:true,children:_jsx(_components.p,{children:`Connect Figma to your coding agent in about five minutes.`})}),`\n`,_jsx(Heading,{level:`2`,id:`video-demo`,children:`Video demo`}),`\n`,_jsx(_components.p,{children:`Check out this video to see the MCP server in action.`}),`\n`,_jsx(Frame,{children:_jsx(OptimizedFrame,{className:`mint-aspect-video mint-w-full`,src:`https://www.youtube.com/embed/6G9yb-LrEqg`,title:`Framelink MCP for Figma demo`,allow:`accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture`,allowFullScreen:true})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Framelink MCP for Figma","sidebarTitle":"Introduction","description":"Framelink connects your Figma designs directly to AI coding agents. The MCP provides comprehensive design data that helps agents understand your designs significantly better than a screenshot, and generates code that's much closer to pixel-perfect straight out of the gate.","href":"/index"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Video demo","slug":"video-demo","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"dynamicCss":".mint-aspect-video {\n aspect-ratio: 16 / 9\n}\n.mint-w-full {\n width: 100%\n}","subdomain":"branch-labs","siteName":"Framelink","title":"Framelink MCP for Figma - Framelink","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-15T22:16:27.698Z","originalFileLocation":"index.mdx"},"headHtml":"\u003cmeta data-mint-head name=\"description\" content=\"Framelink connects your Figma designs directly to AI coding agents. The MCP provides comprehensive design data that helps agents understand your designs significantly better than a screenshot, and generates code that\u0026#x27;s much closer to pixel-perfect straight out of the gate.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Framelink\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/branch-labs/LJWetQD8Qs_97g0O/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/branch-labs/LJWetQD8Qs_97g0O/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/branch-labs/LJWetQD8Qs_97g0O/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/branch-labs/LJWetQD8Qs_97g0O/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/branch-labs/LJWetQD8Qs_97g0O/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/branch-labs/LJWetQD8Qs_97g0O/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/branch-labs/LJWetQD8Qs_97g0O/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/branch-labs/LJWetQD8Qs_97g0O/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/branch-labs/LJWetQD8Qs_97g0O/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Framelink MCP for Figma - Framelink\">\u003cmeta data-mint-head property=\"og:description\" content=\"Framelink connects your Figma designs directly to AI coding agents. The MCP provides comprehensive design data that helps agents understand your designs significantly better than a screenshot, and generates code that\u0026#x27;s much closer to pixel-perfect straight out of the gate.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Framelink\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.framelink.ai\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Framelink MCP for Figma - Framelink\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Framelink connects your Figma designs directly to AI coding agents. The MCP provides comprehensive design data that helps agents understand your designs significantly better than a screenshot, and generates code that\u0026#x27;s much closer to pixel-perfect straight out of the gate.\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/branch-labs/LJWetQD8Qs_97g0O/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Framelink\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#0D9373\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.framelink.ai\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/index.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.framelink.ai/#organization\",\"name\":\"Framelink\",\"url\":\"https://docs.framelink.ai\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/branch-labs/bghC0h1XT5HW2t8q/logo/light.svg?fit=max\u0026auto=format\u0026n=bghC0h1XT5HW2t8q\u0026q=85\u0026s=4d2363499f55bcf82c9e33ed7496bc57\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.framelink.ai#website\",\"name\":\"Framelink\",\"url\":\"https://docs.framelink.ai\",\"publisher\":{\"@id\":\"https://docs.framelink.ai/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.framelink.ai/#webpage\",\"url\":\"https://docs.framelink.ai/\",\"name\":\"Framelink MCP for Figma\",\"description\":\"Framelink connects your Figma designs directly to AI coding agents. The MCP provides comprehensive design data that helps agents understand your designs significantly better than a screenshot, and generates code that's much closer to pixel-perfect straight out of the gate.\",\"dateModified\":\"2026-10-15T22:16:27.698Z\",\"isPartOf\":{\"@id\":\"https://docs.framelink.ai#website\"},\"breadcrumb\":{\"@id\":\"https://docs.framelink.ai/#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.framelink.ai/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Guides\",\"item\":\"https://docs.framelink.ai/index\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Framelink MCP for Figma\",\"item\":\"https://docs.framelink.ai/\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.framelink.ai/#article\",\"headline\":\"Framelink MCP for Figma\",\"name\":\"Framelink MCP for Figma\",\"description\":\"Framelink connects your Figma designs directly to AI coding agents. The MCP provides comprehensive design data that helps agents understand your designs significantly better than a screenshot, and generates code that's much closer to pixel-perfect straight out of the gate.\",\"url\":\"https://docs.framelink.ai/\",\"mainEntityOfPage\":{\"@id\":\"https://docs.framelink.ai/#webpage\"},\"dateModified\":\"2026-10-15T22:16:27.698Z\",\"publisher\":{\"@id\":\"https://docs.framelink.ai/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.framelink.ai#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Framelink\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Framelink","nav":{"global":null,"groups":[{"group":"Guides","pages":[{"title":"Framelink MCP for Figma","sidebarTitle":"Introduction","description":"Framelink connects your Figma designs directly to AI coding agents. The MCP provides comprehensive design data that helps agents understand your designs significantly better than a screenshot, and generates code that's much closer to pixel-perfect straight out of the gate.","href":""},{"title":"Quickstart","description":"Connect Figma to your coding agent, then build something from a real design. Setup takes about five minutes by hand, or one paste if you let your agent do it.","href":"/quickstart"},{"title":"Configuration","description":"Complete reference for all configuration options available in the Framelink MCP for Figma, including CLI arguments and environment variables.","href":"/configuration"},{"title":"CLI usage","description":"Use the Framelink CLI to pull simplified Figma design data without running a server.","href":"/fetch"},{"title":"Best practices","description":"How to get the most out of the Framelink MCP for Figma.","href":"/best-practices"},{"title":"Troubleshooting","description":"Troubleshooting guide for common issues with the Framelink MCP for Figma.","href":"/troubleshooting"},{"title":"Alternative server configurations","description":"Run the Framelink MCP for Figma as a local HTTP server, or from a clone of the repository.","href":"/alternate-methods"}]}]},"title":"Framelink MCP for Figma - Framelink","buildId":"dpl_D7EzQaYVSUPvr6H5eCdmRjtFr6Mz","deploymentId":"dpl_D7EzQaYVSUPvr6H5eCdmRjtFr6Mz","dynamics":["07c022d89b"],"chunks":["Frame-CHcor-JQ.js","DynamicMarkdown-Bk3kiVSb.js"]}