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

वेब डिज़ाइन के लिए Figma

सुंदर, उत्तरदायी वेब डिज़ाइन बनाएं

Figma एक मुफ़्त ऑनलाइन प्लेटफ़ॉर्म है जहां लोग मिलकर दुनिया की सबसे बेहतरीन वेबसाइट्स डिजाइन करते हैं. वाइडफ़्रेम से डिज़ाइन से प्रोटोटाइप से डेवलपमेंट तक—Figma वेब डिज़ाइन को सहज बनाता है.

वेब डिज़ाइन स्क्रीन का एक ग्राफिक प्रतिनिधित्व जो इंद्रधनुष चित्रणों से भरा हुआ है.वेब डिज़ाइन स्क्रीन का एक ग्राफिक प्रतिनिधित्व जो इंद्रधनुष चित्रणों से भरा हुआ है.

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

hp लोगोPuma लोगोSpotify लोगोStripe लोगोThe New York Times लोगोNetlfix लोगो

किसी भी डिवाइस के लिए उत्तरदायी वेब डिज़ाइन

ऐसे डिज़ाइन के साथ जो हर जगह अच्छी तरह से काम करते हैं, विचार से कार्यान्वयन तक तेज़ी से जाएं.

टीम कर्सर्स रंग शैलियों और ऑटो लेआउट को एक वेबपेज पर चुनते हैं.टीम कर्सर्स रंग शैलियों और ऑटो लेआउट को एक वेबपेज पर चुनते हैं.

सही उपकरणों के साथ तेज़ी से डिज़ाइन करें

अपने प्रोज़ेक्ट को शुरू करें और ऑटो लेआउट, कम्पोनेन्ट, शैलियों और अधिक जैसे टूल्स के साथ स्केल पर लगातार डिज़ाइन करें.

इसे जीवन में लाएं, विकास से पहले

इंटरएक्टिव नो-कोड प्रोटोटाइप के साथ अपनी दृष्टि दिखाएं. कुछ ही क्लिक में वास्तविक वेब अनुभव प्राप्त करें.

डिज़ाइन से लेकर लाइव साइट तक का सफर तेज़ी से तय करें

डेव मोड, हैंडऑफ़ में संरचना जोड़ता है और डेवलपर्स के लिए उन्हें जो चाहिए, वह ढूंढना आसान बनाता है.

वेब डिज़ाइन के लिए सुविधाओं को एक्सप्लोर करें

बेहतर वेब अनुभव को तेजी से डिज़ाइन करें, सुविधाओं के साथ जो आपको अंत तक मिलकर बनाने में मदद करती हैं.

बैंगनी बैकग्राउंड, बटन टेक्स्ट उदाहरणों और रंग शैली के साथ कम्पोनेन्ट Design किट फ़ाइल.बैंगनी बैकग्राउंड, बटन टेक्स्ट उदाहरणों और रंग शैली के साथ कम्पोनेन्ट Design किट फ़ाइल.

UI किट्स और टेम्पलेट्स के साथ शुरूआत करें

Figma समुदाय द्वारा निर्मित निःशुल्क कम्पोनेन्ट-आधारित वाइडफ़्रेम किट के साथ अपनी वेबसाइट डिज़ाइन वर्कफ़्लो को तेज़ करें.

समुदाय को ब्राउज़ करें

टीम कर्सर्स एक मोबाइल ऐप डिज़ाइन को घेरते हैं. एक टिप्पणी में कहा गया है, "यह दिशा वास्तव में ठोस लगती है, चलो प्रोटोटाइपिंग शुरू करते हैं."टीम कर्सर्स एक मोबाइल ऐप डिज़ाइन को घेरते हैं. एक टिप्पणी में कहा गया है, "यह दिशा वास्तव में ठोस लगती है, चलो प्रोटोटाइपिंग शुरू करते हैं."

कोलैबोरेटर को आमंत्रित करें

अपने वेब डिज़ाइन में इंस्टैंट फ़ीडबैक के लिए संदर्भात्मक टिप्पणी जोड़ने के लिए क्रॉस-फंक्शनल भागीदारों और स्टेकहोल्डर को आमंत्रित करें.

सहयोग शुरू करें

एक कर्सर बटन के लिए कस्टम वैरिएबल के मेन्यू से चयन कर रहा हैएक कर्सर बटन के लिए कस्टम वैरिएबल के मेन्यू से चयन कर रहा है

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

आसानी से कॉम्पोनेंट्स और स्टाइल्स बनाएं, बनाए रखें, और साझा करें और डिज़ाइन फ़ाइलों के बीच एक ही भाषा का उपयोग करें और टोकन्स के साथ कोड करें.

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

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

Dev Mode के साथ निर्माण करें.

अपने वेब डिज़ाइन में स्पष्टता लाएं और डेवलपर्स को उन्हें कोड में अनुवाद करने के लिए आवश्यक उपकरण प्रदान करें.

Dev Mode में डाइव करें

कोई फर्क नहीं पड़ता कि विभाग क्या है, हर किसी के लिए एक केंद्रीकृत स्थान है जहां वे काम को व्यू कर सकते हैं, समझ सकते हैं और योगदान दे सकते हैं.

लॉरेन लोप्रेट, डिजाइन सिस्टम्स लीड, Dropbox

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

वेब डेवलपर्स के लिए और अधिक संसाधन.

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

हमने अपनी वेबसाइट डिज़ाइन सिस्टम कैसे बनाया

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

लेख पढ़ें

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

वेब डिज़ाइन के लिए सामुदायिक संसाधन

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

समुदाय को एक्सप्लोर करें

कर्सर एक प्रोटोटाइप लिंक बना रहा है जो बैंगनी उत्पाद लैंडिंग पेज को एक विवरण पृष्ठ से जोड़ता है.कर्सर एक प्रोटोटाइप लिंक बना रहा है जो बैंगनी उत्पाद लैंडिंग पेज को एक विवरण पृष्ठ से जोड़ता है.

Figma की प्रोटोटाइपिंग गाइड

Figma में प्रोटोटाइपिंग फीचर्स के साथ शुरुआत कैसे करें, सीखें.

मार्गदर्शिका प्राप्त करें

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