اتصال کلاد به Figma: از طرح تا کد

۲۳ آبان ۱۴۰۵

اگر طرح سایت یا اپلیکیشن‌تان در Figma است، لازم نیست اسکرین‌شات بگیرید و برای کلاد توضیح بدهید. Figma یک سرور MCP دارد که کلاد (Claude Code) با آن مستقیم به فایل‌های شما دسترسی پیدا می‌کند: کامپوننت‌ها، رنگ‌ها و متغیرها، چیدمان فریم‌ها و محتوای FigJam را می‌خواند و از روی همان‌ها کد می‌نویسد. برعکسش هم ممکن است: صفحه‌ای را که ساخته‌اید به شکل لایه‌های قابل ویرایش به Figma بفرستد.

این سرور در همه پلن‌های Figma، حتی پلن رایگان، در دسترس است.

نصب

ساده‌ترین راه، افزونه (plugin) رسمی Figma برای کلاد است. تنظیمات سرور و مهارت‌های (skills) آماده Figma را با هم نصب می‌کند.

1. در ترمینال (در ویندوز در PowerShell) این دستور را بزنید:

   gclaude plugin install figma@claude-plugins-official

2. gclaude را اجرا کنید (اگر باز است، ببندید و دوباره باز کنید) و /plugin را بزنید.
3. با کلید جهت راست به زبانه Installed بروید، figma را انتخاب کنید و دو بار Enter بزنید. صفحه ورود Figma در مرورگر باز می‌شود.
4. در مرورگر Allow access را بزنید و به کلاد برگردید. با /plugin ببینید figma وصل شده باشد.

نصب دستی، بدون افزونه

اگر نصب افزونه نشد، سرور را مستقیم اضافه کنید (این روش مهارت‌های Figma را نصب نمی‌کند):

gclaude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

با --scope user در همه پوشه‌ها در دسترس است، نه فقط پوشه فعلی. بعد gclaude را باز کنید، /mcp را بزنید، figma را انتخاب کنید و Authenticate را بزنید. در مرورگر Allow access را تأیید کنید تا پیام Authentication successful. Connected to figma را ببینید.

سرور دسکتاپ

Figma یک سرور دیگر هم دارد که داخل اپلیکیشن دسکتاپ اجرا می‌شود، ولی خودش همان سرور اینترنتی بالا را توصیه می‌کند. سرور دسکتاپ فقط با صندلی Dev یا Full در پلن‌های پولی کار می‌کند: در اپ دسکتاپ یک فایل طراحی را باز کنید، با Shift+D به Dev Mode بروید، در نوار کناری Enable desktop MCP server را بزنید و بعد:

gclaude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

کلاد برای این اتصال مستقیم از کامپیوتر شما به سرورهای Figma وصل می‌شود، نه از راه درگاه کلاد. پس به همان دسترسی‌ای نیاز دارد که خودتان برای باز کردن Figma استفاده می‌کنید.

با کلاد و Figma چه کارهایی می‌شود کرد؟

• ساختن کد از روی طرح: لینک یک فریم را از Figma کپی کنید (روی فریم راست‌کلیک، Copy link to selection) و بگویید: «این فریم را با React و Tailwind بساز.» کلاد اندازه‌ها، فاصله‌ها، فونت‌ها و رنگ‌ها را از خود طرح برمی‌دارد، نه از حدس.
• رعایت سیستم طراحی: «رنگ‌ها و فاصله‌های این فایل را از متغیرهای Figma بخوان و فایل تنظیمات Tailwind پروژه را با آن‌ها یکی کن.»
• استفاده از کامپوننت‌های خودتان: اگر تیم‌تان Code Connect را راه انداخته، کلاد به جای ساختن دکمه و کارت تازه، همان کامپوننت‌های موجود در کد را به کار می‌برد.
• مقایسه طرح با سایت: «صفحه ورود سایتم را با این فریم مقایسه کن و هر جا فاصله، رنگ یا فونت فرق دارد درستش کن.» همراه با Playwright، کلاد سایت را هم در مرورگر می‌بیند.
• از FigJam به کار: «یادداشت‌های این بورد FigJam را بخوان و از آن‌ها فهرست کارها و ساختار صفحه‌های اپ را دربیاور.»
• از کد به Figma: «صفحه داشبوردی را که ساختی به Figma بفرست.» طراح تیم آن را به شکل لایه‌های قابل ویرایش می‌گیرد و رویش کار می‌کند.

چند نکته

• دقیق‌ترین نتیجه وقتی است که لینک یک فریم مشخص را بدهید، نه کل فایل. فریم‌های بزرگ را تکه‌تکه بسازید.
• طرحی که لایه‌هایش نام‌گذاری شده و از Auto layout و متغیرها استفاده می‌کند، کد تمیزتری می‌دهد.
• کلاد فقط به فایل‌هایی دسترسی دارد که حساب Figma شما به آن‌ها دسترسی دارد. برای قطع دسترسی، /mcp را بزنید و از تنظیمات figma خارج شوید، یا سرور را با gclaude mcp remove figma پاک کنید.

کدام بسته برای کدام کار

خواندن طرح‌های Figma توکن زیادی مصرف می‌کند، چون کلاد جزئیات هر فریم را می‌خواند. برای ساختن چند صفحه یا یک پروژه کامل، بسته استاندارد مناسب‌تر است.

قیمت‌ها شامل ۱۰٪ مالیات بر ارزش افزوده است.

دیدن بسته‌ها و قیمت‌ها