मुख्य सामग्री पर जाएँ

डिज़ाइन हैंडऑफ़ के लिए Figma

डिज़ाइन हैंडऑफ़ को सरल बनाएं

Figma डिज़ाइन हैंडऑफ़ अनुभव को सक्षम बनाता है जो डिज़ाइनरों और डेवलपर्स को साथ-साथ रखता है. बेहतर संचार करें, स्थिरता सुनिश्चित करें, और बेहतरीन उत्पाद बनाएं.

Figma के Dev Mode को दर्शाते हुए एक शेप और प्रतीकों का समूह, जिसमें Dev Mode टॉगल, एक CSS बॉक्स मॉडल, कर्सर चैट, ऊंचाई डायमेंशन और एक बाउंडिंग बॉक्स शामिल है.Figma के Dev Mode को दर्शाते हुए एक शेप और प्रतीकों का समूह, जिसमें Dev Mode टॉगल, एक CSS बॉक्स मॉडल, कर्सर चैट, ऊंचाई डायमेंशन और एक बाउंडिंग बॉक्स शामिल है.

टीमों का भरोसा

Puma लोगोgithub लोगोStripe लोगोThe New York Times लोगोNetflix लोगोSpotify लोगो

डिज़ाइन और विकास के बीच का अंतर पाटें

डिजाइनरों और डेवलपर्स के बीच संचार और सहयोग में सुधार करें ताकि जो डिज़ाइन किया जाता है वह वही बनता है.

दो सहयोगियों के कर्सर जो एक ई-कॉमर्स उत्पाद पृष्ठ पर इंजीनियरिंग के लिए डिज़ाइन नोट्स को दस्तावेज़ित करने के लिए एनोटेशन कर रहे हैं.दो सहयोगियों के कर्सर जो एक ई-कॉमर्स उत्पाद पृष्ठ पर इंजीनियरिंग के लिए डिज़ाइन नोट्स को दस्तावेज़ित करने के लिए एनोटेशन कर रहे हैं.

गलत विवेचनाओं को कम करें.

अतिरिक्त जानकारी और माप के साथ डिज़ाइन फ़ाइलों को आसानी से एनोटेट करें—स्पष्टता को बढ़ाते हुए और विकास को तेज़ करते हुए.

एक डेवलपर एक ई-कॉमर्स प्रोडक्ट लैंडिंग पेज पर 'बास्केट में डालें' बटन कंपोनेंट के वर्तमान और पूर्व संस्करणों की तुलना कर रहा है.एक डेवलपर एक ई-कॉमर्स प्रोडक्ट लैंडिंग पेज पर 'बास्केट में डालें' बटन कंपोनेंट के वर्तमान और पूर्व संस्करणों की तुलना कर रहा है.

आगे-पीछे भेजना घटाएं

डेवलपर्स आसानी से किसी फ़्रेम की तुलना उसके पहले के संस्करण से कर सकते हैं ताकि वे ठीक से देख सकें कि क्या बदला.

एक स्क्रीन दिखाती है कि कौन से सेक्शन ready for development हैं, Dev Mode मेंएक स्क्रीन दिखाती है कि कौन से सेक्शन ready for development हैं, Dev Mode में

Ready for dev को संप्रेषित करें

सेक्शन स्थिति का उपयोग करके स्पष्ट रूप से दिखाएं कि कौन से स्क्रीन आपके dev पार्टनर्स के लिए काम करने के लिए तैयार हैं.

बेहतर डिज़ाइन हेंडऑफ के लिए निर्मित फ़ीचर एक्सप्लोर करें

डेवलपर्स के लिए एक व्यू

डिज़ाइन निर्णयों पर विचार करने के लिए शुरूआत से ही डेवलपर्स को सहयोग के लिए आमंत्रित करें. उन्हें एक समर्पित Dev Mode प्रदान करें—Dev Mode—डिज़ाइनों का निरीक्षण, तुलना और कार्यान्वयन करने के लिए.

Dev Mode के बारे में अधिक जानकारी प्राप्त करें

एक डेवलपर का कर्सर एक ई-कॉमर्स वेबसाइट डिज़ाइन प्रणाली के लिए रंग शैली के पास.एक डेवलपर का कर्सर एक ई-कॉमर्स वेबसाइट डिज़ाइन प्रणाली के लिए रंग शैली के पास.

डिजाइन सिस्टम्स को कोड के साथ संरेखित करें

कम्पोनेन्ट और शैली आसानी से बनाएं, बनाए रखें, और साझा करें. डिज़ाइन फ़ाइलों और कोड में एक ही भाषा का उपयोग करें टोकन के साथ —और डिज़ाइन फ़ाइल में अन्य डेवलपर संसाधनों को देखें.

डिज़ाइन सिस्टम के बारे में अधिक जानें

कोड स्निपेट का निरीक्षण और प्राप्त करें

माप, विशेष विवरण, और शैलियाँ जैसी जानकारियाँ प्राप्त करें. अपने डिज़ाइन से उत्पादन के लिए तैयार CSS, iOS, या Android कोड स्निपेट जनरेट करें. या, एक ही क्लिक में परिसंपत्तियां एक्सपोर्ट करें.

और अधिक जानें

विज़ुअल स्टूडियो कोड में एक प्रोज़ेक्ट वर्कस्पेस.विज़ुअल स्टूडियो कोड में एक प्रोज़ेक्ट वर्कस्पेस.

VS कोड इंटिग्रेशन

VS कोड के लिए हमारा विस्तार डिज़ाइन फ़ाइल को टेक्स्ट एडिटर में लाता है. Figma फ़ाइल्स का निरीक्षण करें, डिज़ाइनर्स के साथ सहयोग करें, सूचनाएं प्राप्त करें, और कोड सुझाव प्राप्त करें—सभी VS कोड से.

इंटिग्रेशन सेट करें

पहले, डेवलपर्स को प्रत्येक तत्व का निरीक्षण करना पड़ता था. अब, हम डिज़ाइनों से कोड ऑटो-जनरेट कर सकते हैं.

सौरभ सोनी, हेड ऑफ़ डिज़ाइन, Razorpay

Razorpay लोगो
कहानी पढ़ें

डिज़ाइन हेंडऑफ़ की सर्वोत्तम प्रथाओं के बारे में अधिक जानें

हरी, पीली, और काले अतिव्यापी विकास-संबंधी शेप्स के साथ एक कोरल बैकग्राउंड, जैसे Dev Mode टॉगल.हरी, पीली, और काले अतिव्यापी विकास-संबंधी शेप्स के साथ एक कोरल बैकग्राउंड, जैसे Dev Mode टॉगल.

Dev Mode में गहराई से जाएं

Dev Mode के बारे में और जानें और यह डिज़ाइन से डेवलपर हेंडऑफ़ को कैसे सुविधा देता है.

Dev Mode एक्सप्लोर करें

एक डेवलपर कर्सर जो एक हरे घेरे का चयन कर रहा है और डिज़ाइन सिस्टम लाइब्रेरी में ब्रांड रंगों के लिए हेक्स कोड देख रहा है.एक डेवलपर कर्सर जो एक हरे घेरे का चयन कर रहा है और डिज़ाइन सिस्टम लाइब्रेरी में ब्रांड रंगों के लिए हेक्स कोड देख रहा है.

हैंडऑफ़ की सर्वोत्तम प्रथाएं प्राप्त करें

विशेषज्ञों से सर्वोत्तम प्रथाओं का संग्रह पढ़ें.

गाइड प्राप्त करें

Figma का लोगो एक हरे कर्सर द्वारा चुने जाने की प्रक्रिया में.Figma का लोगो एक हरे कर्सर द्वारा चुने जाने की प्रक्रिया में.

कैसे Figma Dev Mode का उपयोग करता है

जानें कि Figma इंजीनियरिंग और डिज़ाइन टीमें हैंडऑफ़ के लिए dev mode का उपयोग कैसे करती हैं.

लेख पढ़ें

अक्सर पूछे जाने वाले प्रश्न