Figma ने डिज़ाइन और कोड को एक कैनवास पर लाया — Cursor ने उलटा दांव लगाया

Figma का नया फ़ीचर Code Layers कुछ ऐसा करता है जो दो साल पहले महज़ एक ख़याल लगता था: यह डिज़ाइन कैनवास पर सीधे एक GitHub रिपॉज़िटरी क्लोन करने देता है। रिपॉज़िटरी के वहाँ आ जाने के बाद, मौजूदा कोड से संपादन योग्य डिज़ाइन फ़्रेम निकाले जा सकते हैं, उन्हें विज़ुअली बदला जा सकता है और बदलाव वापस रिपॉज़िटरी में सिंक किए जा सकते हैं — यह सब एक ही Figma फ़ाइल के अंदर, पूर्ण रीयल-टाइम सहयोग के साथ। डिज़ाइन और डेवलपमेंट एक ही विंडो में।

जो डिज़ाइनर वर्षों से हैंडऑफ़ नोट्स लिखते, Jira टिकट में स्पेसिफ़िकेशन कॉपी करते या इंजीनियरिंग टीम को Zeplin लिंक भेजते रहे हैं, Code Layers उनके लिए डिज़ाइन और कोड की बातचीत की जगह बदल देता है। Figma में बदलाव कोड को अपडेट करते हैं; कोड में बदलाव डिज़ाइन लेयर को अपडेट करते हैं। दोनों डिसिप्लिन के बीच का पुल हमेशा से कॉन्टेक्स्ट स्विचिंग की मांग करता था — अब वह स्विचिंग छोटी हो गई है।

Figma Motion: एनिमेशन को शिपमेंट के लिए तैयार कोड में बदलें

Figma ने Motion भी पेश किया — कैनवास में सीधे बना एक keyframe-आधारित एनिमेशन टाइमलाइन। डिज़ाइनर टाइमलाइन और प्रीसेट लाइब्रेरी से ट्रांज़िशन, होवर स्टेट्स और स्क्रॉल एनिमेशन बना सकते हैं, फिर उन्हें सात फ़ॉर्मेट में एक्सपोर्ट कर सकते हैं: CSS, JSON, React, MP4, WebM, Animated SVG और GIF। Figma में डिज़ाइन की गई लोडिंग एनिमेशन अब कोई रेफ़रेंस डॉक्युमेंट नहीं जिसे डेवलपर को समझना पड़े — वह एनिमेशन ख़ुद ही है।

तीसरी बड़ी घोषणा थी Shader Effects — WebGPU (ब्राउज़र का नवीनतम ग्राफ़िक्स मानक) द्वारा संचालित GPU-त्वरित फ़िल्स, जो डिज़ाइनरों को सीधे Figma लेयर्स पर जटिल, गणितीय रूप से उत्पन्न विज़ुअल टेक्सचर लगाने देते हैं। Figma का AI एजेंट किसी टेक्स्ट विवरण या अपलोड की गई इमेज से ये कस्टम शेडर फ़िल्स बना सकता है। ‘मुलायम नीले इंटरफ़ेरेंस पैटर्न के साथ फ्रॉस्टेड ग्लास’ जैसा वाक्यांश टाइप करें, और कैनवास कुछ ऐसा बना देता है जो लाइव रेंडर होता है और इंटरेक्टिव रूप से बदला जा सकता है।

AI एजेंट में कौशल, टूल्स और बाहरी कनेक्शन जुड़े

AI एजेंट ख़ुद भी काफ़ी व्यापक हो गया। अब वह नेचुरल लैंग्वेज प्रॉम्प्ट से पुन: उपयोग योग्य ‘स्किल्स’ बना सकता है — कस्टम टूल जो API की जानकारी के बिना दोहराव वाले डिज़ाइन कार्यों को स्वचालित करते हैं — और Notion, GitHub और Microsoft Excel सहित बाहरी सेवाओं से सीधे जुड़ता है। 2026 के बाद के एक अपडेट में Weavy जुड़ेगा — एक वर्कफ़्लो बिल्डर जिसे Figma ने पिछले साल हासिल किया — जो डिज़ाइन फ़ाइलों के अंदर नोड-आधारित ऑटोमेशन देगा।

सब कुछ आज उपलब्ध नहीं है। Code Layers अर्ली ऐक्सेस में है, जिसके लिए आवेदन जुलाई 2026 में खुलेंगे; इसके लिए पेड Figma प्लान पर Full सीट ज़रूरी है। Shader Effects और बेहतर AI एजेंट पेड प्लान पर पहले से उपलब्ध हैं। Figma Motion Full सीट धारकों के लिए अभी उपलब्ध है, जबकि Code Layers की सामान्य उपलब्धता 2026 के बाद की है।

Figma की कोड एडिटर के वर्कफ़्लो को अपने में समाहित करने की महत्वाकांक्षा एक ठोस सवाल से टकराती है: कोड लिखना और इंटरफ़ेस डिज़ाइन करना अलग-अलग संज्ञानात्मक गतिविधियाँ हैं, और Cursor — वह AI कोड एडिटर जिसे SpaceX ने पिछले हफ़्ते 60 अरब डॉलर में ख़रीदा — ने इंजीनियरों के बीच अपना दर्शक वर्ग बनाया है, डिज़ाइनरों के बीच नहीं। क्या वे दो समुदाय एक साझा कैनवास पर मिलेंगे — यह अभी भी एक खुला सवाल है।

टैग: GitHub, Code Layers, Config 2026, Cursor, Figma, डिज़ाइन टूल्स