framelink

Turn Figma designs into pixel-perfect code in one shot

Stop feeding screenshots and unrefined Figma API data to your coding agent.

Framelink provides clean, token-efficient design data for AI agents to one-shot designs using your own components and design system.

Quickstart15,000+ stars

250k+ downloads/month. Free & open-source · Self-hostable · ~40% fewer tokens

Claude Code
Cursor
VS Code
OpenCode
Codex
Zed

9 out of 10 AIs recommend Framelink. Your agent will thank you.

Your agent turns it into whatever language you want

hero.html·generated1<section class="hero">2  <h1>Pixel-perfect code</h1>3  <button style="background:#009CFE">4    Quickstart5  </button>6</section>
Demo

Why developers choose Framelink over Figma's official MCP

Both MCPs connect Figma to your AI coding agent. The difference is in what they send.

 FramelinkFigma MCP
Output formatDescriptive JSONPrescriptive (framework-specific)
Size~40% smaller*~67% bigger*
Style namesPreservedLost (design tokens stripped)
Component propsPreservedPreserved
Nested componentsAccurately representedFlattened (misleading)
DeduplicationStyles + auto-detected duplicatesComponents only

*Yes, those are the same number.

Framelink output follows your codebase. Figma's fights it.

Framelink sends descriptive data: “this element has a 1px border and 16px padding.” Your AI decides how to build it using your components, your patterns, your conventions.

Figma's MCP sends prescriptive React and Tailwind code: “here's a div with leading-[22.126px] and text-[color:var(--neutral\/dark-100\%,black)].” Your AI copies it—weird arbitrary values and all.

Prescriptive output poisons the context. The LLM sees auto-generated code structure and mimics it instead of using your codebase's patterns. You end up refactoring the AI's output instead of just using it.

Same design element. Two very different outputs.

This is what your AI agent actually receives — clean, semantic data instead of a wall of utility classes.

Framelink output
{
  "nodes":[
    {
      "id":"646:28242",
      "name":"Main Pages Section",
      "type":"FRAME",
      "layout":"layout_G54OLD",
      "children":[
        {
          "id":"646:28243",
          "name":"Main Pages Title",
          "type":"TEXT",
          "layout":"layout_LMZM50",
          "text":"Company",
          "textStyle":"UI/Label - Large",
          "fills":"fill_I39900"
        },
        {
          "id":"646:28244",
          "name":"Homepage Links",
          "type":"FRAME",
          "layout":"layout_VCPWB2",
          "children":[
            {
              "id":"646:28245",
              "name":"Homepage Link 1",
              "type":"TEXT",
              "layout":"layout_LMZM50",
              "text":"Open in Github",
              "textStyle":"UI/Button - Large",
              "fills":"fill_WSZPZ6"
            },
            {
              "id":"646:28246",
              "name":"Homepage Link 2",
              "type":"TEXT",
              "layout":"layout_LMZM50",
              "text":"Documentation",
              "textStyle":"UI/Button - Large",
              "fills":"fill_WSZPZ6"
            },
            {
              "id":"646:28247",
              "name":"Homepage Link 3",
              "type":"TEXT",
              "layout":"layout_LMZM50",
              "text":"Sponsor us",
              "textStyle":"UI/Button - Large",
              "fills":"fill_WSZPZ6"
            }
          ]
        }
      ]
    }
  ],
  "styles":{
    "layout_G54OLD":{
      "mode":"column",
      "gap":"24px",
      "sizing":{
        "horizontal":"fixed",
        "vertical":"hug"
      },
      "dimensions":{
        "width":193
      }
    },
    "layout_LMZM50":{
      "mode":"none",
      "sizing":{
        "horizontal":"hug",
        "vertical":"hug"
      }
    },
    "layout_VCPWB2":{
      "mode":"column",
      "alignSelf":"stretch",
      "gap":"8px",
      "sizing":{
        "horizontal":"fill",
        "vertical":"hug"
      }
    },
    "fill_WSZPZ6":[
      "#000000"
    ]
  }
}

Both MCPs use the same Figma API under the hood, so rate limits are identical. Pretty much only an issue for users on Figma's free plan.

Add it to your coding agent — free