अपॉइंटमेंट के दो पेज साफ़-सुथरे दिखते हैं। दोनों में एक तारीख फ़ील्ड और एक Save बटन है। पहले पेज पर एक डायलॉग अपॉइंटमेंट बदलता है; दूसरे पर एक अलग पेज खुलता है। कौन-सा संस्करण बेहतर है? स्क्रीनशॉट रंगों और स्पेसिंग में मदद करता है। यह केवल सीमित हद तक दिखाता है कि लोग प्रवाह को समझते हैं या नहीं।
15 अक्टूबर 2026 को Figma ने Code Layers को बीटा के रूप में खोला। समर्थित प्रोटोटाइप को कोड के साथ आगे विकसित किया जा सकता है और साझा डिज़ाइन कैनवास पर उनकी तुलना की जा सकती है; मौजूदा कोड को प्रलेखित शर्तों के तहत लाया जा सकता है। संपादकीय दृष्टि से, दिलचस्प पहलू व्यवहार पर मिलकर काम करना है। इस तरह एक प्रोटोटाइप केवल अपना आकर्षक परिणाम दिखाने के बजाय निर्णय का विषय बन जाता है।
पहले वही कार्य, फिर अलग-अलग इंटरफ़ेस
हमारा अपना उदाहरण एक क्लब कार्यक्रम है। व्यक्ति को तारीख बदलनी है, भागीदारी की शर्त पढ़नी है और फिर या तो सेव करना है या रद्द करना है। दोनों संस्करणों को एक ही शीर्षक, एक ही तारीख और एक ही लंबा नोट मिलता है। यदि एक संस्करण में केवल एक छोटा प्लेसहोल्डर शीर्षक दिखाया जाता, तो तुलना पहले से ही पक्षपाती हो जाती।
डायलॉग अपॉइंटमेंट के अवलोकन को पृष्ठभूमि में बनाए रखता है। एक अलग संपादन पेज अधिक जगह देता है। ये अलग-अलग डिज़ाइन निर्णय हैं, गुणवत्ता के फ़ैसले नहीं। दिलचस्प बात संक्रमणों पर शुरू होती है: सेव करने के बाद व्यक्ति कहाँ होता है? रद्द करने पर उनके द्वारा शुरू किए गए इनपुट का क्या होता है? बदलाव के दौरान कौन-सी जानकारी दिखाई देती रहती है?
एक स्टेट मॉडल व्यवहार को चर्चा योग्य बनाता है
पहले प्रवाह का वर्णन प्रोग्रामिंग सिंटैक्स के बिना करें। अपॉइंटमेंट दिखाई देता है। Edit एक इनपुट खोलता है। अमान्य इनपुट से एक स्पष्टीकरण मिलता है, और मान्य प्रविष्टियाँ बनी रहती हैं। Save पुष्टि की गई स्थिति दिखाता है। Cancel अपरिवर्तित स्थिति पर लौटाता है। ये हमारे उदाहरण की आवश्यकताएँ हैं, Figma की अंतर्निहित सुविधाओं के बारे में कोई वादा नहीं।
View → Edit → Input
Input → valid → Save → Confirmation
Input → invalid → Hint + input kept
Input → Cancel → original viewइस छोटे मॉडल से हर संस्करण की लक्षित तरीके से जाँच की जा सकती है। शायद डायलॉग बहुत अच्छा दिखता है, लेकिन त्रुटि होने पर संकेत-पाठ खो देता है। शायद अलग पेज कम सुरुचिपूर्ण है, लेकिन वापस जाने का रास्ता समझना आसान बनाता है। तब आकलन देखे जा सकने वाले व्यवहार के बारे में होता है, डायलॉग के लिए किसी सामान्य पसंद के बारे में नहीं।
फ़ीडबैक को एक साझा संदर्भ-बिंदु की आवश्यकता होती है
एक उपयोगी टिप्पणी इस तरह है: “रद्द करने के बाद, मैं यह नहीं बता पाया कि मेरी नई तारीख सेव हुई थी या नहीं।” इसमें स्थान, क्रिया और अनिश्चितता का उल्लेख है। दूसरी ओर, “पर्याप्त आधुनिक नहीं लगता” से अभी ऐसा कोई प्रश्न नहीं मिलता जिस पर कोई काम कर सके। जब ड्राफ़्ट और टिप्पणियाँ एक ही कैनवास पर हों, तो देखे जा रहे संस्करण से संबंध बनाए रखा जा सकता है।
हर बदलाव के लिए नोट करें कि उसका उद्देश्य कौन-सी अनिश्चितता दूर करना है। उदाहरण के लिए, टाइपफ़ेस, रंग और नेविगेशन एक साथ बदलने के बजाय पहले पुष्टि को बदलें। इससे यह समझना आसान हो जाता है कि दूसरा संस्करण अलग क्यों लगता है। यह कोई नियंत्रित उपयोगिता अध्ययन नहीं है, लेकिन डिज़ाइन चरण के लिए यह एक समझदारी भरा कार्य-अनुशासन है।
निर्णय हस्तांतरणीय है; कोड अपने आप नहीं
अंत में एक छोटा हैंडओवर नोट होना चाहिए: पसंदीदा संस्करण, वह कार्य जिसमें यह मदद करता है, संबंधित स्थितियाँ और बचे हुए प्रश्न। सैंपल डेटा वाला एक इंटरैक्टिव ड्राफ़्ट अभी कोई वास्तविक बुकिंग प्लेटफ़ॉर्म नहीं है। साइन-इन, संग्रहीत डेटा और वास्तविक अनुमतियों को किसी एप्लिकेशन में अलग से काम करना होगा।
किसी KENJTEC पेज में एक छोटे क्लाइंट-साइड जोड़ के लिए, निर्णय को फिर आपके अपने HTML, CSS और JavaScript के रूप में लागू किया जा सकता है। इसके लिए KENJTEC WebSiteBuilder ai एक आइसोलेटेड प्रीव्यू और अपने अलग कोड प्रकाशन चरण के साथ एक डेवलपर मोड प्रदान करता है। संबंधित कंपोनेंट आप स्वयं स्थानांतरित करते हैं; इसका अर्थ Figma इम्पोर्ट या आपकी पसंद के किसी भी एप्लिकेशन के लिए होस्टिंग नहीं है।
प्रलेखित स्थिति के अनुसार, Code Layers अभी भी बीटा है। किसी भी विशिष्ट चरण-दर-चरण गाइड से पहले उपलब्धता, समर्थित शुरुआती प्रोजेक्ट और शर्तों की फिर से जाँच की जानी चाहिए। हालाँकि, यह तरीका टूल से स्वतंत्र रूप से कारगर रहता है: केवल दो आकर्षक स्क्रीनों की तुलना न करें। किसी चीज़ का उपयोग कैसे होता है, इसी एक प्रश्न के दो ऐसे उत्तरों की तुलना करें जिन्हें समझा और परखा जा सके।
स्रोत और स्थिति
25 अक्टूबर 2026 तक का शोध और दस्तावेज़ीकरण। कैनवास पर code layers के साथ मिलकर डिज़ाइन करें।
