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

वेब डिज़ाइन के लिए 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 में प्रोटोटाइपिंग फीचर्स के साथ शुरुआत कैसे करें, सीखें.

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

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

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

वेब डिज़ाइन दृष्टि से आकर्षक और कार्यात्मक वेबसाइटें बनाने की प्रक्रिया है. इसमें एक आकर्षक यूज़र अनुभव प्रदान करने के लिए लेआउट, रंग योजनाएं, टाइपोग्राफी, और ग्राफिक्स जैसे तत्वों को व्यवस्थित करना शामिल है. उत्तरदायी वेब डिज़ाइन उत्तरदायी डिज़ाइन पर जोर देता है, जो यह सुनिश्चित करता है कि विभिन्न उपकरणों और स्क्रीन आकारों पर वेबसाइटें सही तरह से समायोजित और प्रदर्शित हों. यह दृष्टिकोण यह सुनिश्चित करने के लिए आवश्यक है कि यूज़र को एक निर्बाध और सुसंगत अनुभव मिले, चाहे वे इसे डेस्कटॉप, टैबलेट या स्मार्टफोन से एक्सेस करें.

वेब डिज़ाइन में UI (यूज़र इंटरफ़ेस) के दृष्टिकोण से सीखना, वेबसाइटों और वेब एप्लीकेशन्स के लिए देखने में आकर्षक और यूज़र के अनुकूल इंटरफ़ेस बनाने की कला को साधना शामिल है. शुरू करने के लिए, UI सिद्धांतों और UX डिज़ाइन सेट का अध्ययन करें. HTML और CSS और प्रतिक्रियाशील डिज़ाइन भी सीखें. जैसे-जैसे आप अपनी कौशलों का बनाते जाएं, Figma जैसे वेब डिज़ाइन उपकरणों का उपयोग करके एक पोर्टफ़ोलियो बनाएं. डिज़ाइनर्स के लिए विशेष रूप से बनाए गए Figma के मुफ़्त टेम्पलेट्स का लाभ उठाएं.