Figma

Pregledujte oblikovanja v Figmi, pridobivajte oblikovalske tokene, zajemajte posnetke okvirjev in dostopajte do oblikovalskih spremenljivk neposredno iz terminala.

MCP Server·3 razdelkov·1 min branja

designcoding

Install Prompt

Paste this into Claude Code to set it up:

Strežnik Figma MCP želim dodati v svojo postavitev Claude Code.

POMEMBNO: Za ~/.claude.json nikoli ne uporabljajte orodij Read/Edit. Namesto tega uporabite jq prek Bash.

Predpogoji: Potrebujete osebni dostopni token Figma. Ustvarite ga v Figma > Settings > Personal access tokens.

Za dodajanje strežnika MCP zaženite ta ukaz (your-access-token nadomestite s svojim dejanskim tokenom):
```bash
jq '.mcpServers["figma"] = {"type": "stdio", "command": "npx", "args": ["-y", "@anthropic/figma-mcp"], "env": {"FIGMA_ACCESS_TOKEN": "your-access-token"}}' ~/.claude.json > /tmp/claude-json-tmp && mv /tmp/claude-json-tmp ~/.claude.json
```

Po dodajanju znova zaženite Claude Code. Strežnik se poveže z API-jem Figma in agentu omogoči dostop do vaših oblikovalskih datotek, komponent, spremenljivk in drugega.

01Kaj počne

Premostite vrzel med oblikovanjem in kodo

Strežnik Figma MCP vašemu agentu AI omogoči, da neposredno bere vaše oblikovalske datoteke. Namesto ročnega prevajanja predloge iz Figme v kodo lahko agent pregleda okvirje, pridobi barve in tipografijo, prebere zgradbo komponent in te podatke uporabi za pisanje natančne kode CSS ali komponent. To občutno zmanjša razkorak med tem, kar je oblikovalec zamislil, in tem, kar je na koncu zgrajeno.

🔍

Pregled oblikovanjaBerite hierarhije okvirjev, lastnosti komponent in podrobnosti postavitve. Agent razume zgradbo oblikovanja in jo lahko prevede v kodo.

🎨

Oblikovalski tokeniPridobite barve, tipografijo, razmike in druge oblikovalske spremenljivke. Ustvarite lastne lastnosti CSS ali nastavitve Tailwind neposredno iz vaše datoteke Figma.

📸

Posnetki okvirjevZajemajte posnetke posameznih okvirjev ali komponent. Uporabno kot vizualna referenca med izvedbo ali za dokumentacijo.

02Nastavitev

# Add to ~/.claude.json under mcpServers
"figma": {
  "type": "stdio",
  "command": "npx",
  "args": ["-y", "@anthropic/figma-mcp"],
  "env": {
    "FIGMA_ACCESS_TOKEN": "your-access-token"
  }
}

Vaš dostopni token Figma omogoča bralni dostop do vseh datotek, ki jih smete videti. Pri skupinskih projektih poskrbite, da ima vaš token ustrezne obsege za datoteke, ki jih želite dati agentu v pregled.

03Vzorci uporabe

💻

Iz oblikovanja v kodoPrilepite URL okvirja iz Figme in prosite agenta, naj ga izvede. Prebere zgradbo oblikovanja, pridobi sloge in napiše komponento HTML/CSS ali React.

📐

Usklajevanje oblikovalskega sistemaPridobite oblikovalske tokene iz spremenljivk Figma in ustvarite ujemajoče se lastne lastnosti CSS, nastavitve Tailwind ali datoteke teme za svojo kodo.