Figma कोड परतें और Specs: वे क्या हैं, वे कैसे काम करते हैं, और वे कहाँ रुकते हैं2 min read

Figma कोड परतें कैनवास पर रनिंग कोड डालती हैं, और Figma Specs वहां Markdown भी डालता है। दोनों ने 15 अक्टूबर, 2026 को Config India में ओपन बीटा में प्रवेश किया, इसलिए एक डिज़ाइन फ़ाइल में अब फ़्रेम, एक कार्यशील प्रोटोटाइप और एक एजेंट द्वारा बनाई गई लिखित योजना हो सकती है।

यह गाइड डिजाइनरों, पीएम और फ्रंट-एंड इंजीनियरों के लिए है जो यह निर्णय लेते हैं कि प्रोटोटाइप और स्पेक कार्य को Figma में स्थानांतरित करना है या नहीं। इसमें शामिल है कि प्रत्येक सुविधा क्या करती है, कैसे शुरू करें, एआई क्रेडिट में इसकी लागत क्या है, और काम को क्लाउड, ChatGPT या Cursor में टीम के साथियों के लिए Figma कहां छोड़ना है।

एआई के युग में, डिज़ाइन कोड है। 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 अब एजेंटों के साथ संदर्भ साझा करने का वास्तविक प्रारूप है। प्रत्येक कोडिंग एजेंट इसे पढ़ता है। अधिकांश उत्पाद टीमें पहले से ही योजनाएं, पीआरडी और एजेंट निर्देश रखती हैं .md फ़ाइलें.

मैंने पढ़ा है कि Specs Figma स्वीकार कर रहा है कि एक एजेंट को हैंड-ऑफ़ टेक्स्ट है, फिर उस टेक्स्ट को मल्टीप्लेयर बनाना है। एक स्थानीय AGENTS.md या PRD प्रारूप के कारण कभी विफल नहीं हुआ। यह विफल हो गया क्योंकि केवल एक व्यक्ति ने इसे संपादित किया, यह डिज़ाइन से दूर चला गया, और कोई भी यह नहीं देख सका कि एजेंट ने किस संस्करण का उपयोग किया।

Figma के अंदर, Specs उसे ठीक करता है। खुला प्रश्न यह है कि इसके बाहर क्या होता है। एम्बेड, टिप्पणियाँ और लाइव डिज़ाइन संदर्भ Figma विशेषताएं हैं, और एजेंट Figma MCP कैटलॉग में सूचीबद्ध ग्राहकों के माध्यम से उन तक पहुंचते हैं। यदि आपके इंजीनियरों, आपके पीएम के ChatGPT और आपकी मार्केटिंग टीम के क्लाउड सभी को एक ही योजना की आवश्यकता है, तो भी आपको यह तय करना होगा कि साझा प्रति कहाँ रहेगी।

एक व्यावहारिक वर्कफ़्लो: अनुरोध खींचने के लिए 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, क्लाउड कलाकृतियाँ, चित्र और URL संपादन योग्य Figma परतों में, जो तब उपयोगी होता है जब आप अपने डिज़ाइन सिस्टम के साथ उन परतों पर डिज़ाइन करना जारी रखना चाहते हैं।

परिणाम को Figma छोड़ना होगा। आपके विनिर्देश या प्रोटोटाइप की समीक्षा आपकी Figma टीम के बाहर के लोगों द्वारा की जानी है, कई विक्रेताओं के एजेंटों द्वारा संपादित की जानी है, या लाइव लिंक के रूप में प्रकाशित की जानी है। Anima द्वारा निर्मित AgentGrid.io यही काम करता है। AgentGrid.io पर एक Markdown आर्टिफैक्ट एक लाइव, ऑटोसेविंग दस्तावेज़ है जिसे लोग और क्लाउड, ChatGPT, Cursor और Grok Bot जैसे जुड़े एजेंट संपादित कर सकते हैं, प्रत्येक परिवर्तन को संस्करण इतिहास में नाम से जिम्मेदार ठहराया जा सकता है। एक HTML आर्टिफैक्ट एक चालू पृष्ठ है जिस पर आप टिप्पणी कर सकते हैं और स्वीकृत होने पर इसे सार्वजनिक यूआरएल पर प्रकाशित कर सकते हैं। आप ऐप आर्टिफैक्ट के रूप में एक 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 फ़ाइल बनाने के लिए किसी भी .md फ़ाइल को कैनवास पर खींच सकते हैं। यह उस पाठ के चारों ओर Figma सुविधाएँ जोड़ता है: एम्बेडेड फ़्रेम और FigJam बोर्ड, टिप्पणियाँ, और एक एजेंट जो उन टिप्पणियों को पढ़ सकता है और उनका उत्तर दे सकता है।

क्या Figma कोड परतों की लागत AI क्रेडिट है?

हाँ। सशुल्क योजनाओं पर, 4 नवंबर, 2026 तक कोड लेयर के अंदर निर्माण और संपादन निःशुल्क है। उसी प्रॉम्प्ट में अन्य एजेंट काम अभी भी क्रेडिट का उपयोग करते हैं, और 4 नवंबर के बाद सभी कोड लेयर कार्य एआई क्रेडिट का उपयोग करते हैं।

क्या Claude Code, Codex या Cursor एक Figma Spec पढ़ सकता है?

हाँ, यदि वे Figma MCP सर्वर से जुड़े हैं। कोडिंग एजेंट figma-spec कौशल के साथ स्पेक्स को पढ़, बना और अपडेट कर सकते हैं, और आप इसके लिंक किए गए डिज़ाइन संदर्भ को आगे बढ़ाने के लिए अपने प्रॉम्प्ट में एक स्पेक लिंक पेस्ट कर सकते हैं।

कौन सी Figma योजनाओं में Specs शामिल है?

Specs सशुल्क योजनाओं पर खुले बीटा में है: व्यावसायिक, संगठन, उद्यम और शिक्षा, साथ ही Figma के Config India लेख के अनुसार सरकार। यह मुफ़्त स्टार्टर योजना पर नहीं है. स्टार्टर सहित सभी योजनाओं में कोड परतें लागू की जा रही हैं।