Figma MCP — لما الذكاء الاصطناعي يصمم معاك في Figma
لو بتصمم على Figma — وأنت غالباً بتصمم على Figma — في تغيير كبير حصل الفترة الأخيرة ومش ناس كتير واخدة بالها منه.
Figma أطلقت رسمياً دعم بروتوكول MCP (Model Context Protocol) اللي بيخلي أي أداة AI تقدر تقرأ ملفات التصميم بتاعتك وتفهمها وتشتغل عليها — مش بس يبصلها كـ screenshot.
يعني إيه MCP أصلاً؟
MCP هو بروتوكول مفتوح طورته Anthropic (الشركة اللي عملت Claude) عشان يكون في طريقة موحدة أي أداة AI تتكلم مع أي مصدر بيانات.
فكر فيه كده: بدل ما Claude يشوف صورة من الـ design بتاعك ويحاول يخمن إيه اللي فيها، دلوقتي بيقدر يدخل جوا ملف الـ Figma ويقرأ كل حاجة:
- الـ layers والتسلسل الهرمي
- الألوان والخطوط والـ spacing
- الـ components والـ variants
- الـ auto layout settings
- وحتى الـ design tokens
طب إيه اللي بيتغير عملياً؟
١. من تصميم لكود في ثواني
بدل ما تاخد screenshot وتحطها في ChatGPT وتقوله “حولها لكود”، دلوقتي Claude بيقدر يقرأ الـ node بتاعك من Figma مباشرة ويطلعلك كود دقيق — مش تخمين.
الكود بيطلع بالـ spacing الصح، الألوان الصح، والـ responsive behavior الصح لأنه قاري البيانات مش بيحلل صورة.
٢. Code Connect
لو عندك design system في Figma ومعمول ليها components في الكود، Figma MCP بيقدر يعمل mapping بينهم. يعني لما Claude يشوف Button component في الـ design، بيعرف إنه لازم يستخدم <Button /> من الـ codebase بتاعك مش يعمل واحد جديد.
٣. Design Review بالـ AI
تخيل إنك بعد ما تخلص تصميم، تقدر تقول لـ Claude “راجعلي الـ design ده” وهو يقدر يشوف:
- في inconsistencies في الـ spacing؟
- الألوان بتتبع الـ design system؟
- في مشاكل accessibility؟
ده مش مستقبل — ده بيحصل دلوقتي.
إزاي تبدأ تستخدمه؟
الطريقة الأسهل: Claude Code
لو بتستخدم Claude Code (أداة Anthropic في الـ terminal)، كل اللي عليك:
- شغّل Figma MCP server
- ادي Claude لينك الـ Figma frame أو page
- اطلب منه يحول التصميم لكود أو يراجعه
Claude هيقرأ الـ design بكل تفاصيله ويشتغل عليه.
للـ Developers
لو بتبني أدوات، MCP مفتوح وتقدر تستخدم Figma API مع أي LLM بيدعم البروتوكول.
نصيحتي
لو أنت مصمم، مش لازم تخاف من الـ AI. اللي بيحصل هو إن الأدوات بتبقى أذكى والشغل الروتيني بيقل. التصميم الحقيقي — اللي فيه فهم للمستخدم وحل مشاكل حقيقية — ده مش هيتعوض.
بس لازم تتعلم تستخدم الأدوات دي. المصمم اللي بيعرف يستخدم AI في شغله هيكون أسرع وأكفأ بمراحل من اللي بيرفض يجربه.
خلاصة: Figma MCP هو بداية عصر جديد في التصميم — عصر التعاون بين المصمم والـ AI. ابدأ جربه دلوقتي وشوف إزاي ممكن يغير طريقة شغلك.
