Skip to main content

Figma + Claude — dizayn va kod ko'prik

Figma + Claude

Eng katta dizayn-development og'riq: dizayner Figma'da chiroyli ekran chizadi, dasturchi uni kodda implementatsiya qilishi kerak. Pixel-perfect — qiyin. Konsistentlik — yo'q. Token'lar to'g'rilash — soatlar.

Figma MCP — bu ko'prikni avtomatlashtiradi. Claude Code va Figma orasidagi rasmiy ulanish. Bu darslikda — to'liq workflow: dizayndan kod, koddan dizayn va o'rtada Code Connect.

Figma MCP nima?​

Figma MCP — Figma kompaniyasining rasmiy Model Context Protocol serveri. Claude (yoki boshqa agent) Figma fayllaringizga to'g'ridan-to'g'ri ulanadi:

  • Dizaynni o'qish (frame, komponent, token, layer hierarchy)
  • Dizaynni yaratish/o'zgartirish (yangi frame, komponent)
  • Screenshot olish (visual reference uchun)
  • FigJam (oqim, diagramma)
  • Code Connect mapping (komponent → kod faylga)

O'rnatish​

Claude Code'da Figma MCP qo'shish:

claude mcp add figma --transport http https://mcp.figma.com/mcp

Yoki .mcp.json ga qo'lda:

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Birinchi marta ulanganda — OAuth orqali Figma akkauntga ruxsat berasiz. Brauzer ochiladi → ruxsat → token saqlanadi.

Asosiy use case'lar​

1. Design-to-code (Figma → kod)​

Eng keng tarqalgan. Dizayner sahifa chizdi, siz uni React komponentga aylantirib chiqasiz.

> Mana Figma URL: https://figma.com/file/abc123/Landing?node-id=12:34
> Bu sahifani React + Tailwind komponent qilib yoz.
> Mavjud dizayn-tizim bizning repo'da /src/design-system/ - undan komponentlardan foydalan.

Claude qiladi:

  1. get_design_context orqali Figma node'ni o'qiydi
  2. Layer hierarchy + style'lar (color, spacing, typography)
  3. Code Connect mapping bo'lsa — mavjud komponentlardan foydalanadi
  4. Tailwind classes generatsiya qilish
  5. Repo'dagi style guide bilan moslashtiradi

Natija: oddiy "Figma copy-paste" emas, balki layihaning design system'iga moslashgan kod.

2. Code-to-design (kod → Figma)​

Teskari yo'l: sizning kod komponent bor, lekin dizaynda yo'q. Claude Figma'da yangi frame yaratadi.

> Bizning Header komponent (src/components/Header.tsx) - mana uning shtatlari:
> - default, scrolled, mobile-open.
> Figma'da yangi sahifa yarat, har bir holatini frame qilib chiq.

Foyda: koddan boshlangan loyihalar — dizayn fayl mavjud emas. Claude reverse engineer qiladi.

3. Design tokens sinxronlash​

Token'lar — color, spacing, font-size va h.k. Dizayn-tizim asosi.

> Figma'dagi (file XYZ) design tokens'larni o'qib chiq va bizning
> tailwind.config.ts ga injektsiya qil. Eskilarini o'chirma - majburlash.

Claude get_variable_defs MCP funksiyasi bilan barcha o'zgaruvchilarni oladi → kodga aylantiradi.

4. Code Connect — komponent mapping​

Eng kuchli. Code Connect — Figma komponentning kod versiyasiga ko'rsatma.

Misol: Figma'da Button komponent → kod'da src/components/Button.tsx. Bunday map qo'yilsa, Claude design-to-code qilganda takror yozmaydi, balki import { Button } from ... qiladi.

> Mana Figma'dagi Button komponentning URL.
> Bizning src/components/Button.tsx faylga uni map qil.

Bu — yagona pixel-perfect emas, balki arxitektura jihatdan to'g'ri kod.

5. FigJam — oqim va diagramma​

Figma'ning whiteboard versiyasi. Claude FigJam'da:

> User onboarding flow'imni FigJam'da diagramma qilib chiq:
> 1. Sign up -> Email verification -> Welcome
> 2. Branch: oddiy user / premium user

Natija: tayyor sticky note + arrow diagram. Loyihada arxitektura sxema, user journey, retrospektiv lavhalari uchun.

Skill — /figma-use​

Figma MCP'ni ishlatishdan oldin majburiy skill bor: /figma-use. U Claude'ga "Figma MCP ishlatish principlari"ni o'qitadi:

  • Qaysi tool qachon
  • Qanday qilib design context'ni samarali olish
  • Cache strategiyasi (catta fayllar uchun)
  • Error handling

Claude Code'da:

> /figma-use

Bu — use_figma chaqirishdan oldin yuklash kerak.

Workflow misol: Landing page​

Aytaylik, sizda 4 ta Landing variant Figma'da:

> Figma file XYZ'da 4 ta Landing variant bor.
> 1. Hammasini ko'rib chiq, har birining UX-ga sharhi yoz
> 2. Eng yaxshisini React + Tailwind qilib yoz
> 3. Bizning design-system'ga mosla
> 4. Bir varianti uchun A/B test tayyorla

Claude:

  1. 4 ta variantni get_design_context + get_screenshot
  2. Har biri haqida 2-3 paragraph analiz
  3. "Variant B eng yaxshi - clearer CTA, lekin hero image yomonroq"
  4. Kod generatsiya
  5. Mavjud Button, Input komponentlardan foydalanish
  6. A/B test variant yozish

Vaqt: 30 daqiqa. Inson 4-6 soat sarflashi mumkin edi.

Eng kuchli: Design system avtomatlashtirish​

Loyihalar uchun design system qurish — oylik mehnat. Figma MCP bilan:

> Skill: /figma-generate-library
> Bizning kod base'imizdan (src/components/) Figma'da to'liq dizayn-tizim quring.
> Har bir komponent uchun: variants, props, states, documentation.

Bu — koddan boshlab Figma library qurish. Komponentlar avtomatik prop'lar bilan, har biri bilan working code link bor.

Reverse: Figma'da dizayn-tizim bor, sizda kod yo'q → /figma-generate-design skill bilan koddan barcha komponent yaratiladi.

Cheklovlar​

  • Catta fayllar sekin: 1000+ layer'li fayl — kontekst ko'p, sekin. Faqat kerakli node-id bilan ishlash
  • Custom plug-inlar: Figma MCP — rasmiy. Lekin ko'pchilik kompaniyalar custom plug-in ishlatadi. Ulanmaydi
  • Animatsiya: Figma'da bo'lgan smart animate, prototyping flow — MCP orqali murakkab. Kod versiyasi qo'l bilan
  • OAuth ishlash mumkin emas serverda: Headless agent (VPS'da yashashda) Figma MCP'ga ulanish qiyin. Token tashqaridan
  • Litsenziyalash: Figma MCP — Figma Professional yoki yuqorroq talab qilishi mumkin (2025 holatida bepul edi)

Code Connect — chuqurroq​

Code Connect — eng murakkab, lekin eng foydali. Asosiy ideya:

Figma Button  ->  code: src/components/Button.tsx
                    └─ prop "variant"  ->  Figma variant property
                    └─ prop "size"  ->  Figma "Size" property

Bunday map'lar qo'yilsa, Figma MCP design-to-code qilganda:

// Avtomatik chiqadi (component map bor):
[Button variant="primary" size="lg"] Submit [/Button]

// Bo'lmasa (inline style):
[button className="bg-blue-500 text-white px-6 py-3 rounded..."] Submit [/button]

Birinchi variant — to'g'ri, layihangizning conventions ga moslashgan. Ikkinchi — ad-hoc inline.

Code Connect'ni qanday yaratish​

Skill: /figma-code-connect. Yoki qo'lda:

  1. Figma'da komponent URL'ni oling
  2. Kod faylda atribute (komment yoki manifest)
  3. mcp__figma__add_code_connect_map chaqirib o'rnating

Bir marta sozlangach — abadiy. Yangi dizaynlar avtomatik map'ni topadi.

Boshqa AI dizayn vositalari​

Figma MCP — rasmiy. Lekin alternativa:

VositaO'ziga xosligi
AnimaFigma → React/Vue/Angular eksport, animatsiya bilan
LocofyFigma → kod, lekin barcha freymworklar
Builder.ioVisual editor + AI generation
v0.dev (Vercel)Text-to-UI, Figma plug-in
Galileo AIText-to-design (Figma'ga import)

Figma MCP — eng integratsiya teran (Figma'ning rasmiy). Boshqalar — partial.

Anti-paternlar​

  • Hamma narsa MCP qiladi: Figma MCP — context o'qish + yozish. U dizayner emas. Yomon dizaynni "fix" qilmaydi
  • Code Connect'siz design system: har safar inline style — design drift. Mapping bir marta qo'ying
  • Token'larni qo'lda kuzatish: design tokens sinxron qilish — MCP avtomatlashtiradi. Qo'l ishi — bug
  • Catta fayl 1 ta MCP call'da: 50+ frame — context overflow. Chunk qiling
  • Production deploy MCP orqali: Figma MCP — development. Production CI/CD da qo'lga ishonish

Boshlash uchun checklist​

  • Figma akkaunt + 1 ta test fayl
  • Claude Code'da claude mcp add figma --transport http https://mcp.figma.com/mcp
  • /figma-use skill'ni o'qib chiqing
  • Birinchi: kichik komponent (Button) — design-to-code
  • Code Connect — birinchi map yaratish
  • Design tokens — Tailwind config'ga sync
  • Skill ishlatish: /figma-generate-design, /figma-generate-library, /figma-code-connect

3 ta loyiha — Figma MCP ishlatish reflex bo'ladi. Pixel-perfect implementation muammosi yo'qoladi.

Privacy​

Figma MCP — sizning fayllarga to'g'ridan-to'g'ri ulanadi. Claude (Anthropic) infrastruktura orqali. Anthropic siyosati: train data emas, lekin logs bor.

Sezgir (NDA) Figma fayllar uchun — Figma Enterprise + privacy review.

Keyingi qadamlar​