Figma کوڈ لیئرز اور Specs: وہ کیا ہیں، وہ کیسے کام کرتے ہیں، اور کہاں رکتے ہیں2 min read

Figma کوڈ کی پرتیں کینوس پر رننگ کوڈ ڈالتی ہیں، اور Figma Specs نے وہاں بھی Markdown ڈال دیا ہے۔ دونوں نے 15 اکتوبر 2026 کو Config India پر اوپن بیٹا میں داخل کیا، لہذا ایک ڈیزائن فائل اب فریم، ایک ورکنگ پروٹو ٹائپ اور تحریری منصوبہ رکھ سکتی ہے جس سے ایجنٹ بناتا ہے۔

یہ گائیڈ ڈیزائنرز، پی ایمز اور فرنٹ اینڈ انجینئرز کے لیے ہے جو یہ فیصلہ کر رہے ہیں کہ آیا پروٹوٹائپ اور اسپیک ورک کو Figma میں منتقل کرنا ہے۔ یہ اس بات کا احاطہ کرتا ہے کہ ہر فیچر کیا کرتا ہے، کیسے شروع کرنا ہے، AI کریڈٹس میں اس کی کیا قیمت ہے، اور جہاں کام کو Claude، ChatGPT یا Cursor میں ٹیم کے ساتھیوں کے لیے Figma چھوڑنا پڑتا ہے۔

AI کے دور میں، ڈیزائن کوڈ ہے۔ AI کے ساتھ کوڈ میں براہ راست ڈیزائن کرنے کے لیے، یا اپنے Figma ڈیزائن کو کوڈ میں تبدیل کرنے کے لیے، استعمال کریں Anima Playground: اسکرین کی وضاحت کریں یا Figma ڈیزائن سے شروع کریں، پھر ایک قابل تدوین ایپ پر تکرار کرتے رہیں جس کا آپ پیش نظارہ اور شائع کر سکتے ہیں۔

AI کے ساتھ کوڈ میں براہ راست ڈیزائن کریں۔

AI کے ساتھ ڈیزائن: اسکرین کی وضاحت کریں یا Figma ڈیزائن کو کوڈ میں تبدیل کریں۔

Figma نے Config India 2026 میں کیا لانچ کیا؟

کوڈ لیئرز اور Specs سرخی تھیں، لیکن وہ اپنے ارد گرد ایجنٹ کی خصوصیات کے ایک سیٹ کے ساتھ پہنچے۔ Figma کے امدادی مرکز سے موجودہ صورتحال یہ ہے:

دونوں بیٹا کئی ہفتوں میں رول آؤٹ ہوتے ہیں، لہذا آپ انہیں اپنی باقی ٹیم سے پہلے یا بعد میں دیکھ سکتے ہیں۔

Figma کوڈ پرتیں کیا ہیں؟

کوڈ پرت ایک پرت ہے جو حقیقی، چل رہا کوڈ رکھتی ہے۔ ایک ایسے پروٹو ٹائپ کے بجائے جو فریم لنکس کے ساتھ تعاملات کو جعلی بناتا ہے، آپ کو اپنے ڈیزائن کے ساتھ کینوس پر بیٹھا ایک کام کرنے والا، کوڈ بیکڈ پروٹو ٹائپ ملتا ہے۔ ٹیم کے ساتھی اس پر کلک کر سکتے ہیں، اس پر تبصرہ کر سکتے ہیں، اور ساتھ ساتھ ایک مختلف سمت آزمانے کے لیے اسے نقل کر سکتے ہیں۔

Figma آپ کو ایک شروع کرنے کے چار طریقے فراہم کرتا ہے:

• ایک ڈیزائن سے۔ فریم منتخب کریں اور Figma ایجنٹ سے ان کو کوڈ لیئر میں تبدیل کرنے کے لیے کہیں۔
• لائیو ویب سائٹ سے۔ Figma Chrome ایکسٹینشن کے ساتھ ایک صفحہ کیپچر کریں اور اسے کینوس پر چسپاں کریں۔
• ریپو سے۔ GitHub یا مقامی فولڈر سے تعاون یافتہ، ہلکا پھلکا پروٹو ٹائپنگ کوڈ بیس درآمد کریں۔ ایک GitHub درآمد اس ذخیرہ سے منسلک رہتی ہے۔
• شروع سے۔ ایک خالی کوڈ پرت شامل کریں اور ایجنٹ کو تعمیر کرنے کا اشارہ کریں۔

آپ Figma MCP سرور کے ذریعے کینوس پر کوڈنگ ٹول میں بنایا ہوا پروٹو ٹائپ بھی لا سکتے ہیں۔

ترمیم تین طریقوں سے ہوتی ہے۔ آپ ایجنٹ کو اشارہ کرتے ہیں، آپ اسے یہ دکھانے کے لیے فریموں کی تشریح کرتے ہیں کہ تبدیلی کہاں سے آتی ہے، یا آپ کوڈ ایڈیٹر کھولتے ہیں اور خود کوڈ کو تبدیل کرتے ہیں۔ جب بصری تفصیلات کوڈ سے زیادہ اہمیت رکھتی ہیں، Extract designs کوڈ لیئر سے اسکرینوں کو دوبارہ قابل تدوین Figma فریموں میں بدل دیتا ہے۔ جب کوڈ انجینئرز کے لیے تیار ہو جائے، تو آپ اسے برانچ میں لے جا کر پل کی درخواست کھول سکتے ہیں۔

Figma Specs کیا ہے؟

Figma Specs کو "سیاق و سباق کے لیے ایک آبائی گھر” کہتا ہے۔ عملی طور پر یہ ایک مشترکہ Markdown دستاویز ہے جو یا تو Figma Design فائل یا FigJam بورڈ کے کینوس پر رہتی ہے، یا اس کی اپنی Spec فائل کے طور پر رہتی ہے۔

شروع کرنا تیز ہے:

1. فائل براؤزر سے اسٹینڈ اسٹون Spec بنائیں، یا پر جائیں۔ figma.com/spec/new.
2. ڈیزائن فائل یا FigJam بورڈ کے اندر، ٹول بار میں Spec پر کلک کریں یا دبائیں ڈی.
3. پہلے سے ہی ایک ہے۔ .md فائل؟ اسے کینوس پر گھسیٹیں اور یہ ایک قیاس بن جاتا ہے۔
4. Markdown کے ساتھ لکھیں جسے آپ پہلے سے جانتے ہیں: # عنوانات کے لیے، - گولیوں کے لیے، [] کرنے کے لیے، > کوٹس کے لیے، کوڈ کے لیے تین بیک ٹِکس۔ قسم / تصاویر کے لیے، Figma ایمبیڈز اور ڈیوائیڈرز۔

Markdown فائل سے زیادہ جو چیز قیاس آرائی کرتی ہے وہی ہے جو متن کے ارد گرد بیٹھی ہے۔ آپ ایک فریم، FigJam بورڈ یا کینوس سے کسی بھی نوڈ کو ایمبیڈ کر سکتے ہیں، اس لیے اس کی ضرورت اور ڈیزائن ایک دوسرے کے قریب رہیں۔ ٹیم کے ساتھی اس پر تبصرہ کرتے ہیں، اور Figma ایجنٹ ان تبصروں کو پڑھ اور جواب دے سکتا ہے۔

Specs Figma سے باہر بھی کام کرتا ہے۔ Figma MCP سرور سے منسلک کوڈنگ ایجنٹس کا استعمال کرتے ہوئے چشمی کو پڑھ، تخلیق اور اپ ڈیٹ کر سکتے ہیں۔ figma-spec مہارت ایک بند کرنے کے لیے، آپ مخصوص لنک کو اپنے کوڈنگ ایجنٹ کے پرامپٹ میں کاپی کرتے ہیں، اور اس کے ساتھ منسلک فریم، ڈایاگرام، کوڈ لیئرز اور Code Connect کے ٹکڑے آتے ہیں۔

Markdown ہینڈ آف فارمیٹ کیوں بن گیا۔

Figma کی اپنی لانچ پوسٹ صاف صاف کہتی ہے: Markdown اب ایجنٹوں کے ساتھ سیاق و سباق کا اشتراک کرنے کے لیے ڈی فیکٹو فارمیٹ ہے۔ ہر کوڈنگ ایجنٹ اسے پڑھتا ہے۔ زیادہ تر پروڈکٹ ٹیمیں پہلے سے ہی منصوبے، PRDs اور ایجنٹ کی ہدایات رکھتی ہیں۔ .md فائلیں

میرا پڑھا ہوا ہے کہ Specs Figma ہے یہ قبول کرتا ہے کہ ایجنٹ کو ہینڈ آف ٹیکسٹ ہے، پھر اس ٹیکسٹ کو ملٹی پلیئر بناتا ہے۔ ایک مقامی AGENTS.md یا PRD فارمیٹ کی وجہ سے کبھی ناکام نہیں ہوا۔ یہ ناکام ہو گیا کیونکہ صرف ایک شخص نے اس میں ترمیم کی، یہ ڈیزائن سے ہٹ گیا، اور کوئی بھی نہیں دیکھ سکا کہ ایجنٹ نے کون سا ورژن استعمال کیا۔

Figma کے اندر، Specs اسے ٹھیک کرتا ہے۔ کھلا سوال یہ ہے کہ اس کے باہر کیا ہوتا ہے۔ ایمبیڈز، تبصرے اور لائیو ڈیزائن حوالہ جات Figma خصوصیات ہیں، اور ایجنٹ ان تک Figma MCP کیٹلاگ میں درج کلائنٹس کے ذریعے پہنچتے ہیں۔ اگر آپ کے انجینئرز، آپ کے PM کے ChatGPT اور آپ کی مارکیٹنگ ٹیم کے Claude سبھی کو ایک ہی پلان کی ضرورت ہے، تو آپ کو ابھی بھی فیصلہ کرنا ہوگا کہ مشترکہ کاپی کہاں رہتی ہے۔

ایک عملی ورک فلو: درخواست کو کھینچنے کے لیے PRD سے کوڈ لیئر تک

یہاں یہ ہے کہ کس طرح دونوں خصوصیات ایک حقیقی خصوصیت پر ایک ساتھ فٹ بیٹھتی ہیں، صرف وہی استعمال کرتے ہوئے جو آج Figma دستاویزات ہیں۔

1. اپنے PRD کو کینوس پر گھسیٹیں۔ آپ کا موجودہ .md فائل ایک خصوصیت بن جاتی ہے۔ کچھ بھی دوبارہ نہیں لکھا جاتا ہے، اور ہاتھ سے اس میں ترمیم کرنے میں کوئی AI کریڈٹ استعمال نہیں ہوتا ہے۔
2. اس کے بارے میں بات کرنے والے فریموں کو شامل کریں۔ استعمال کریں۔ / PRD بیان کردہ بہاؤ کو شامل کرنے کے لیے۔ جائزہ لینے والے اب ضرورت اور اسکرین کو ایک ساتھ دیکھتے ہیں۔
3. کلیدی فریموں کو کوڈ پرت میں تبدیل کریں۔ انہیں منتخب کریں اور ایجنٹ کو فوری طور پر بتائیں۔ اگر آپ کے پاس پہلے سے ہی پروٹوٹائپ ریپو ہے، تو اسے GitHub سے درآمد کریں۔
4. ایک جگہ جائزہ لیں۔ قیاس آرائی اور کوڈ پرت پر تبصرے جمع کریں۔ Figma ایجنٹ سے تجویز کردہ حل کے ساتھ ہر کھلے تبصرے کا جواب دینے کو کہیں جب کہ لوگ ایک ہی تھریڈز پر وزن رکھتے ہیں۔
5. قیاس سے دستبردار ہوں۔ Figma MCP سرور سے منسلک Codex، Claude Code یا Cursor میں مخصوص لنک چسپاں کریں۔ ایجنٹ کو Markdown کے علاوہ منسلک ڈیزائن کا سیاق و سباق ملتا ہے۔
6. پروٹو ٹائپ کوڈ بھیجیں۔ کوڈ پرت کی تبدیلیوں کو برانچ میں دھکیلیں اور پل کی درخواست کھولیں تاکہ انجینیئر انضمام سے پہلے جائزہ لیں۔

آؤٹ پٹ ایک قیاس ہے جو آپ کا کوڈنگ ایجنٹ پڑھ سکتا ہے اور ایک ورکنگ پروٹو ٹائپ ہے جس پر آپ کی ٹیم نے حقیقت میں کلک کیا ہے۔ کسی دوسرے کوڈ کی طرح تیار کردہ کوڈ کی جانچ کریں۔ ایک پروٹو ٹائپ جو چلتا ہے وہ پروڈکشن ریڈی کوڈ جیسا نہیں ہوتا ہے۔

اگر اگلا مرحلہ Figma ڈیزائن کو کوڈ میں تبدیل کر رہا ہے تو آپ چلا سکتے ہیں، یا پرامپٹ سے کوڈ میں ڈیزائن کر رہے ہیں، یہ Anima Playground کا کام ہے۔

کوڈ لیئرز اور Specs کی قیمت کیا ہے؟

• کوڈ پرتیں AI کریڈٹ استعمال کرتی ہیں۔ بامعاوضہ منصوبوں پر، 4 نومبر 2026 تک کوڈ لیئر کے اندر تخلیق اور ترمیم مفت ہے۔ اسی پرامپٹ میں دیگر ایجنٹ کا کام اب بھی کریڈٹ استعمال کرتا ہے، اور 4 نومبر کے بعد تمام کوڈ لیئر ٹاسک کریڈٹ استعمال کرتے ہیں۔
• Specs لکھنے کے لیے آزاد ہیں۔ خود کسی قیاس کو ٹائپ کرنا اور اس میں ترمیم کرنا کریڈٹس کا استعمال نہیں کرتا ہے۔ ایک قیاس کے ساتھ ایجنٹ کا استعمال کرتا ہے. ہر پرامپٹ کے بعد رسید کو ہوور کریں یہ دیکھنے کے لیے کہ اس کی قیمت کیا ہے۔
• Payload اور رہنما خطوط لاگت میں اضافہ کرتے ہیں۔ Figma نوٹ کرتا ہے کہ دونوں ہی ایجنٹ کو زیادہ سیاق و سباق اور زیادہ کام دیتے ہیں، لہذا وہی پرامپٹ زیادہ کریڈٹ استعمال کر سکتا ہے۔

ان کے ارد گرد منصوبہ بندی کرنے سے پہلے چیک کرنے کی حدود

• رول آؤٹ دونوں خصوصیات کھلے بیٹا ہیں جو ہفتوں کے دوران شروع ہو رہی ہیں۔ Figma Design ٹول بار میں کوڈ آئیکن اور فائل براؤزر میں Spec آپشن تلاش کریں۔
• منصوبے Specs کو ایک ادا شدہ پلان کی ضرورت ہے۔ سٹارٹر صارفین کو کوڈ لیئرز ملتے ہیں لیکن Specs نہیں۔ دونوں کو تخلیق کرنے کے لیے ترمیم تک رسائی کی ضرورت ہے۔
• آپٹ آؤٹ کرنا۔ صرف انٹرپرائز ایڈمنز کوڈ لیئرز کو بند کر سکتے ہیں، اور صرف Figma AI خصوصیات کو بند کر کے۔
• ریپو سائز۔ GitHub درآمد ہلکے وزن والے پروٹو ٹائپنگ کوڈ بیسز کے لیے ہے، مکمل پروڈکشن ایپ نہیں۔
• ڈیزائن سسٹم کوڈ۔ کوڈ کے ذرائع کے ذریعے آپ کے اصلی اجزاء کوڈ کو جوڑنا ابھی بھی ایک بند بیٹا ہے، لہذا کوڈ کی پرتیں آپ کے پروڈکشن اجزاء کو ابھی تک استعمال نہیں کرسکتی ہیں۔

جہاں Figma رکتا ہے، اور کہاں Anima اور AgentGrid.io فٹ ہوتا ہے

اگر آپ کی پوری ٹیم Figma میں کام کرتی ہے تو کوڈ لیئرز اور Specs ایک مضبوط ڈیفالٹ ہیں۔ پروٹو ٹائپ، پلان اور تبصرے ایک ہی فائل میں بیٹھے ہیں، اور Figma کے ایجنٹ اور MCP کلائنٹس ان پر کام کر سکتے ہیں۔

دو عام حالات اب بھی اس فائل سے باہر ہیں۔

خیال کہیں اور شروع ہوا۔ ایک Claude Design پروٹو ٹائپ، ایک ChatGPT سے تیار کردہ HTML صفحہ، یا ایک لائیو سائٹ جس سے آپ سیکھنا چاہتے ہیں۔ Figma کے MCP سرور میں اب ایک ہے۔ html_to_figma ایجنٹ سے تیار کردہ HTML کے لیے ٹول۔ Anima کا Buddy، Figma کے اندر ہمارا AI ڈیزائن ایجنٹ بھی بدل جاتا ہے۔ HTML، Claude نمونے، تصاویر اور URLs قابل تدوین Figma تہوں میں، جو اس وقت مفید ہے جب آپ اپنے ڈیزائن سسٹم کے ساتھ ان تہوں پر ڈیزائننگ جاری رکھنا چاہتے ہیں۔

نتیجہ کو Figma چھوڑنے کی ضرورت ہے۔ آپ کی قیاس آرائی یا پروٹو ٹائپ کا آپ کی Figma ٹیم سے باہر کے لوگوں کے ذریعہ جائزہ لینا ہوگا، کئی دکانداروں کے ایجنٹوں کے ذریعہ ترمیم کی گئی ہے، یا لائیو لنک کے طور پر شائع کی گئی ہے۔ یہ وہ کام ہے جو AgentGrid.io، Anima کے ذریعے بنایا گیا ہے۔ Markdown آرٹفیکٹ AgentGrid.io پر ایک لائیو، خود کار طریقے سے محفوظ کرنے والی دستاویز ہے جسے لوگ اور منسلک ایجنٹ جیسے Claude, ChatGPT, Cursor اور Grok Bot ترمیم کر سکتے ہیں، ہر تبدیلی کو ورژن کی تاریخ میں نام سے منسوب کیا جاتا ہے۔ HTML آرٹفیکٹ ایک چل رہا صفحہ ہے جس پر آپ تبصرہ کر سکتے ہیں اور اسے منظور ہونے پر عوامی URL پر شائع کر سکتے ہیں۔ آپ ایک Figma فریم کو AgentGrid.io میں بطور ایپ آرٹفیکٹ درآمد کر سکتے ہیں۔ وہ درآمد یک طرفہ ہے، اس لیے بعد میں Figma ترمیمات مطابقت پذیر نہیں ہوتی ہیں۔

دونوں ایک ہی قدم کے لیے مقابلہ نہیں کر رہے ہیں۔ Figma ڈیزائن کینوس کا مالک ہے۔ AgentGrid.io وہ جگہ ہے جہاں Markdown اور HTML نمونے تب جاتے ہیں جب کام ٹولز اور ٹیموں کو عبور کرتا ہے۔

AgentGrid.io آزمائیں۔ ایک مخصوص یا پروٹو ٹائپ رکھنے کے لیے جسے آپ کی ٹیم کا ہر ایجنٹ ترمیم اور شائع کر سکتا ہے۔

جب ہر ٹول کا استعمال کریں۔

• Figma کوڈ لیئرز استعمال کریں۔ جب اسٹیک ہولڈرز کو ڈیزائن کے آگے کام کرنے والے پروٹو ٹائپ پر کلک کرنے اور سمتوں کا ساتھ ساتھ موازنہ کرنے کی ضرورت ہوتی ہے۔
• Figma Specs استعمال کریں۔ جب پلان کو فریموں کے ساتھ رہنا چاہیے اور Figma MCP سرور کے ذریعے کوڈنگ ایجنٹ کے ذریعے پڑھنا چاہیے۔
• استعمال کریں۔ Anima Playground جب آپ AI کے ساتھ کوڈ میں براہ راست ڈیزائن کرنا چاہتے ہیں، یا Figma ڈیزائن کو قابل تدوین ایپ میں تبدیل کرنا چاہتے ہیں تو آپ پیش نظارہ اور شائع کر سکتے ہیں۔
• استعمال کریں۔ Buddy جب نقطہ آغاز Figma سے باہر ہو اور آپ کینوس پر قابل تدوین پرتیں چاہتے ہوں۔ Figma بمقابلہ براؤزر بلڈر میں عمارت کے مکمل موازنہ کے لیے، دیکھیں Figma Make بمقابلہ Anima Playground.
• AgentGrid.io استعمال کریں۔ جب اسپیس یا پروٹو ٹائپ کو لوگوں اور ایجنٹوں کے ذریعہ ٹولز میں ترمیم کرنا، تبصروں کے ساتھ جائزہ لینا، اور لائیو لنک کے طور پر شائع کرنا ضروری ہے۔

اکثر پوچھے گئے سوالات

Figma میں کوڈ کی پرتیں کیا ہیں؟

کوڈ کی پرت Figma کینوس پر ایک پرت ہوتی ہے جس میں اصلی، چل رہا کوڈ ہوتا ہے۔ آپ منتخب فریموں سے ایک، Figma Chrome ایکسٹینشن کے ساتھ کیپچر کی گئی لائیو ویب سائٹ، ایک GitHub پروٹو ٹائپنگ ریپو، یا ایک خالی پرامپٹ سے ایک بنا سکتے ہیں، پھر اس پر کلک کریں، اس پر تبصرہ کریں، اور ڈائریکشنز کا موازنہ کرنے کے لیے اسے ڈپلیکیٹ کریں۔

کیا Figma Specs صرف Markdown ہے؟

Specs اپنے متن کے لیے Markdown استعمال کرتا ہے، اور آپ کسی بھی .md فائل کو تخلیق کرنے کے لیے کینوس پر گھسیٹ سکتے ہیں۔ یہ اس متن کے ارد گرد Figma خصوصیات شامل کرتا ہے: ایمبیڈڈ فریم اور FigJam بورڈز، تبصرے، اور ایک ایجنٹ جو ان تبصروں کو پڑھ اور جواب دے سکتا ہے۔

کیا Figma کوڈ لیئرز کی قیمت AI کریڈٹ ہے؟

جی ہاں بامعاوضہ منصوبوں پر، 4 نومبر 2026 تک کوڈ لیئر کے اندر تخلیق اور ترمیم مفت ہے۔ اسی پرامپٹ میں دیگر ایجنٹ کا کام اب بھی کریڈٹ استعمال کرتا ہے، اور 4 نومبر کے بعد تمام کوڈ لیئر ٹاسک AI کریڈٹ استعمال کرتے ہیں۔

کیا Claude Code, Codex یا Cursor Figma Spec پڑھ سکتے ہیں؟

ہاں، اگر وہ Figma MCP سرور سے منسلک ہیں۔ کوڈنگ ایجنٹ figma-spec مہارت کے ساتھ چشمی کو پڑھ سکتے ہیں، تخلیق کر سکتے ہیں اور اپ ڈیٹ کر سکتے ہیں، اور آپ اس کے منسلک ڈیزائن کے سیاق و سباق سے گزرنے کے لیے اپنے پرامپٹ میں مخصوص لنک چسپاں کر سکتے ہیں۔

کون سے Figma منصوبوں میں Specs شامل ہے؟

Specs بامعاوضہ منصوبوں پر کھلے بیٹا میں ہے: پیشہ ورانہ، تنظیم، انٹرپرائز اور تعلیم، نیز حکومت فی Figma کے Config India مضمون۔ یہ مفت سٹارٹر پلان پر نہیں ہے۔ سٹارٹر سمیت تمام منصوبوں کے لیے کوڈ کی پرتیں آ رہی ہیں۔