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

वेब विकास के लिए Figma

विचार से वेबसाइट तक तेज़ी से जाएं

Figma वेब विकास टीमों को एक साथ विचारमंथन करने, डिज़ाइन और तेज़ी से निर्माण करने में मदद करता है.

Dev Mode टॉगल, एक CSS बॉक्स मॉडल, और प्रोटोटाइपिंग नूडल्स का एक ग्राफ़िक प्रतिनिधित्व. यहाँ एक स्माइली चेहरा भी है.Dev Mode टॉगल, एक CSS बॉक्स मॉडल, और प्रोटोटाइपिंग नूडल्स का एक ग्राफ़िक प्रतिनिधित्व. यहाँ एक स्माइली चेहरा भी है.

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

hp लोगोNetflix लोगोStripe लोगोSpotify लोगोvercel लोगोvercel लोगो

बेहतरीन वेब अनुभव बनाना कठिन है. Figma इसे आसान बनाता है.

Figma एक प्लेटफ़ॉर्म पर वेब डिज़ाइन और डेवलपमेंट टीमों को एक साथ लाता है.

अपनी कल्पना की गई साइट भेजें

प्रोटोटाइपिंग के साथ डिज़ाइनर अपनी पूरी डिज़ाइन दृष्टि, जिसमें एनिमेशन और इंटरेक्शन्स शामिल हैं, अपने विकास साझेदारों के साथ संप्रेषित कर सकते हैं - जिस चीज़ों को आगे और पीछे करना और गलतफहमियां कम होती हैं.

ई-कॉमर्स साइट के मोबाइल स्क्रीन के लिए आइकनों, रंग शैलियों, और प्रकार और लेआउट शैलियों को आउटलाइन करने वाले पैनल.ई-कॉमर्स साइट के मोबाइल स्क्रीन के लिए आइकनों, रंग शैलियों, और प्रकार और लेआउट शैलियों को आउटलाइन करने वाले पैनल.

डिज़ाइन और कोड को समन्वयित करें

कोड-अलाइन घटकों और शैलियों के साथ एक साझा डिज़ाइन सिस्टम का उपयोग करके असंगतियों को कम करें और विकास को तेज़ करें.

ऐप उत्पाद शॉट्स की एक लाइट मोड और डार्क मोड व्यू एक्सपोर्ट के लिएऐप उत्पाद शॉट्स की एक लाइट मोड और डार्क मोड व्यू एक्सपोर्ट के लिए

हैंड ऑफ़ प्रभावी बनाएं

Dev Mode के साथ, डेवलपर्स को Figma में एक समर्पित स्थान मिलता है जहाँ वे देख सकते हैं कि क्या तैयार है, संस्करणों के बीच परिवर्तनों की तुलना करें, और डिज़ाइनरों से एनोटेशन्स देखें.

वेब विकास के लिए फ़ीचरों का अन्वेषण करें

एक "बास्केट में जोड़ें" बटन कम्पोनेन्ट के लिए बूलियन प्रोपर्टी का पैनल व्यू.एक "बास्केट में जोड़ें" बटन कम्पोनेन्ट के लिए बूलियन प्रोपर्टी का पैनल व्यू.

कम्पोनेन्ट को कोड से जोड़ें

कम्पोनेन्ट को अधिक अनुकूलन योग्य बनाने और उन्हें रिएक्ट प्रोपर्टीज़ से जोड़ने के लिए घटक प्रोपर्टीज़ का उपयोग करें.

और अधिक जानें

FigJam में बैंगनी बैकग्राउंड पर Asana विज़ेट का एक प्रतिनिधित्व.FigJam में बैंगनी बैकग्राउंड पर Asana विज़ेट का एक प्रतिनिधित्व.

अपने टेक स्टैक के साथ इंटीग्रेट करें

अपने Figma फ़ाइलों को Asana और Microsoft Teams जैसे अन्य टूल्स से कनेक्ट करें, उपयोगी इंटिग्रेशन के साथ जो आपको व्यवस्थित और कुशल बनाए रखते हैं.

सभी इंटिग्रेशन देखें

बैंगनी FigJam आइकन, नीला Figma आइकन, और हरा Dev Mode टॉगल आइकन कनेक्ट करता हुआ एक आरेख.बैंगनी FigJam आइकन, नीला Figma आइकन, और हरा Dev Mode टॉगल आइकन कनेक्ट करता हुआ एक आरेख.

कस्टम वर्कफ़्लो बनाएं

टास्क्स को ऑटोमेट करें, अपने डिज़ाइन्स में डेटा शामिल करें, और समुदाय द्वारा—और समुदाय के लिए—बनाए गए विभिन्न प्रकार के प्लगइन और विज़ेट के साथ सहयोग को बढ़ावा दें.

प्लगइन्स एक्सप्लोर करें

Figma हमारी पूरी कंपनी के लिए नॉर्थ स्टार पेंट करने में मदद करता है. यह सभी को एलाइन्ड और एक्साइटेड रखता है.

हेनरी मोडिसेट
डिज़ाइन हेड, Dev Mode

Perplexity लोगो

वेब विकास सर्वोत्तम प्रथाओं के बारे में और जानें

मल्टी-कलर बैकग्राउंड पर Figma लोगो, एक पीला कर्सर चैट के साथ, जो कहता है 'स्वीट!'मल्टी-कलर बैकग्राउंड पर Figma लोगो, एक पीला कर्सर चैट के साथ, जो कहता है 'स्वीट!'

कैसे Figma ने हमारी वेबसाइट डिज़ाइन सिस्टम को बनाया

कैसे Figma मार्केटिंग टीम ने figma.com के लिए डिज़ाइन सिस्टम बनाया और निर्माण करना जारी रखा, इसकी एक झलक.

लेख पढ़ें

Figma की समुदाय में “web” के लिए खोज परिणाम.Figma की समुदाय में “web” के लिए खोज परिणाम.

वेब विकास संसाधन

वेब विकास के लिए प्रेरणा, उपकरण, और टेम्पलेट्स ब्राउज़ करें — Figma समुदाय द्वारा निर्मित और संग्रहित.

संसाधन खोजें

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

बेहतर डेवलपर हेंडऑफ़ के लिए गाइड

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

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

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