00:00:00यह Penpot है, एक ओपन-सोर्स डिज़ाइन टूल जो Figma जैसे टूल्स को टक्कर देता है।
00:00:05शुरुआत में तो यह बिल्कुल Figma जैसा दिखता है, लेकिन इसका व्यवहार बिल्कुल वैसा नहीं है।
00:00:10क्योंकि अंदरूनी तौर पर, यह असली CSS का उपयोग करता है, न कि कुछ ऐसा जिसे आपको बाद में बदलना पड़े।
00:00:15और यह हैंडऑफ़ की समस्या को बड़े पैमाने पर बदल देता है।
00:00:18मुझे दिखाने दीजिये कि मेरा क्या मतलब है।
00:00:20Penpot एक ब्राउज़र-आधारित UI डिज़ाइन और प्रोटोटाइपिंग टूल है।
00:00:29ऊपरी तौर पर, हाँ, यह Figma या Sketch जैसा लगता है।
00:00:32लेकिन वास्तव में, यहाँ बड़ा अंतर है।
00:00:35Penpot 100% ओपन-सोर्स है और यह वास्तविक वेब मानकों पर बना है।
00:00:40SVG, CSS Flexbox, Grid और HTML।
00:00:43तो ऐसी किसी चीज़ में डिज़ाइन करने के बजाय जिसे आपको बाद में डिकोड या नष्ट करना पड़े,
00:00:49आप पहले से ही उसके करीब होते हैं कि वेब वास्तव में कैसे काम करता है।
00:00:52आप इसे एक कमांड के साथ Docker का उपयोग करके खुद होस्ट कर सकते हैं,
00:00:54जो कि मैं इस वीडियो में करूँगा, क्योंकि यही मेरा काम है।
00:00:58टूल्स के ओपन-सोर्स वर्शन और यह देखना कि वे कैसे तुलना करते हैं।
00:01:01अब Penpot के साथ, डिज़ाइनर्स को अभी भी कॉम्पोनेंट्स, लेआउट्स, प्रोटोटाइप्स मिलते हैं।
00:01:06लेकिन डेवलपर्स को वह हिस्सा मिलता है जो वास्तव में मायने रखता है, ऐसा आउटपुट जो असली कोड जैसा दिखता है।
00:01:11इसमें कोई अजीब मध्य परत नहीं है, यह अनुमान लगाने की ज़रूरत नहीं है कि क्या हो रहा है।
00:01:14और यह मुफ़्त है।
00:01:15असीमित फ़ाइलें, असीमित सहयोगकर्ता, इसीलिए लोग इसकी परवाह करते हैं।
00:01:20यदि आप ओपन-सोर्स टूल्स और कोडिंग टिप्स का आनंद लेते हैं जो आपके वर्कफ़्लो को तेज़ करते हैं,
00:01:23तो चैनल को सब्सक्राइब करना न भूलें।
00:01:25हमारे वीडियो लगातार आते रहते हैं।
00:01:27अब Penpot एक डिज़ाइन टूल है।
00:01:28तो आपको परवाह क्यों करनी चाहिए, खासकर यदि आप एक डेवलपर हैं?
00:01:31क्योंकि यह एक बहुत ही विशिष्ट समस्या को ठीक करता है।
00:01:34प्रोजेक्ट हैंडऑफ़ करने या डिज़ाइन को असली कोड में बदलने की समस्या।
00:01:39Penpot डिज़ाइन को वेब के लिए नेटिव महसूस कराता है।
00:01:42तो जब आप किसी चीज़ को इंस्पेक्ट (inspect) करते हैं तो आप अनुमान नहीं लगा रहे होते, आप उसे पढ़ रहे होते हैं।
00:01:46मुझे दिखाने दीजिये।
00:01:48ठीक है, दोस्तों, डेमो का समय है।
00:01:50यह मेरे सेल्फ-होस्टेड Penpot इंस्टेंस पर लाइव चल रहा है।
00:01:54मैंने इसे आधिकारिक Docker Compose फ़ाइल का उपयोग करके एक सिंगल 'Docker Compose up' कमांड के साथ शुरू किया है
00:01:58जिसे हमने अभी कॉन्फ़िगर किया है।
00:02:00यह बहुत बड़ी बात थी।
00:02:02तो इसे शुरू करने में कुछ समय लगा, लेकिन अब जब यह चल रहा है, तो यह बहुत अच्छा काम करता है।
00:02:07और हमें यहाँ एक अच्छा लैंडिंग पेज मिलता है, एक साफ लुक जहाँ मैं एक नया प्रोजेक्ट बना सकता हूँ।
00:02:12अब चलिए वास्तव में कुछ बनाते हैं, बस एक साधारण कार्ड, कुछ भी फैंसी नहीं।
00:02:16बस एक कंटेनर, इसे फ्लेक्सबॉक्स पर सेट करें, थोड़ी पैडिंग जोड़ें।
00:02:21मैं एक शीर्षक, कुछ टेक्स्ट और एक बटन डालूँगा।
00:02:24शायद यहाँ कुछ और जोड़ें, एक और कार्ड, मैं इसे कॉपी-पेस्ट कर सकता हूँ।
00:02:28मैं कुछ त्वरित संपादन करूँगा।
00:02:30हम इंस्पेक्ट मोड में स्विच करेंगे।
00:02:32और यह महत्वपूर्ण हिस्सा है।
00:02:33आपको वास्तविक CSS, फ्लेक्सबॉक्स प्रॉपर्टीज़, स्पेसिंग, लेआउट में साफ संरचना मिलती है।
00:02:39कोई रफ अनुवाद नहीं, यह कुछ ऐसा है जिसे आप पहले से समझते हैं।
00:02:42आप इसे कॉपी करके सीधे अपने प्रोजेक्ट में डाल सकते हैं।
00:02:46आपको वेरिएंट्स, टोकन, प्रोटोटाइप फ्लो और SVG के रूप में एक्सपोर्ट करने की सुविधा भी मिलती है।
00:02:51यही यहाँ सबसे बड़ी बात है।
00:02:52यह डेवलपमेंट टीमों के लिए घर्षण को कम करता है,
00:02:54खासकर जब आप स्वयं पूरे स्टैक के मालिक हों।
00:02:58अब उस हिस्से के बारे में बात करते हैं जहाँ अधिकांश डेवलपर्स संशय में रहते हैं।
00:03:02पहले तो यह सुनने में अच्छा लगता है कि चलो, एक और डिज़ाइन टूल।
00:03:06लेकिन अंतर यह नहीं है कि यह कैसा दिखता है, बल्कि यह है कि यह कैसे काम करता है।
00:03:09Figma लेआउट को सिमुलेट (simulates) करता है।
00:03:12ऑटोलैयर फ्लेक्सबॉक्स से प्रेरित है, लेकिन आप अंततः इन सबको अपने दिमाग में अनुवाद कर रहे होते हैं।
00:03:16दिमाग में।
00:03:17Penpot वास्तविक CSS के बहुत करीब से शुरू होता है, इसलिए
00:03:21डिज़ाइन और कोड के बीच मानसिक रूपांतरण कम हो जाता है।
00:03:25फिर Lockit का क्या?
00:03:26Figma मालिकाना (proprietary) फ़ाइलों का उपयोग करता है।
00:03:29हमारे पास प्राइसिंग सीट मॉडल हैं।
00:03:31Penpot, ओपन सोर्स है, इसलिए आप इसे खुद होस्ट कर सकते हैं।
00:03:34आपका डेटा SVG, CSS और JSON में रहता है।
00:03:38हैंडऑफ़ भी अलग है क्योंकि Figma में यह एक अतिरिक्त परत की तरह लगता है, है ना?
00:03:42डेव मोड, प्लगइन्स, अतिरिक्त चरण।
00:03:45Penpot में, यह सीधे अंदर बना हुआ है।
00:03:47इंस्पेक्ट व्यू पहले से ही उसके करीब है जिसकी हमें वास्तव में आवश्यकता है।
00:03:50और निष्पक्ष होने के लिए, Figma बहुत अच्छा है।
00:03:53मैं इसका उपयोग करता हूँ, यह बहुत बड़ा है, यह एक पॉलिश इकोसिस्टम है।
00:03:56लेकिन Penpot स्पष्ट रूप से शुरुआत से ही डेवलपर्स को ध्यान में रखकर बनाया गया है।
00:04:00तो डेवलपर्स को वास्तव में इसके बारे में क्या पसंद है?
00:04:02खैर, सबसे बड़ी बात जो मैंने कही है, है ना?
00:04:04यह सरल है, हैंडऑफ़ समस्या छोटी हो जाती है।
00:04:07यह हमारे लिए बहुत बड़ी बात है।
00:04:08आप अब लेआउट्स को रिवर्स इंजीनियरिंग नहीं कर रहे हैं।
00:04:11आप कुछ ऐसा पढ़ रहे हैं जो सीधे CSS में मैप होता है।
00:04:15यह डिज़ाइन टोकन में भी दिखता है।
00:04:18रंग, स्पेसिंग, टाइपोग्राफी, वे इस तरह से संरचित हैं जो उस तरीके के करीब महसूस होता है
00:04:22जिस तरह से आप पहले से ही कोड के बारे में सोचते हैं।
00:04:24और सेल्फ-होस्टिंग कुछ टीमों के लिए एक बड़ी बात है।
00:04:27यदि आप गोपनीयता, आंतरिक टूल्स, CI/CD की परवाह करते हैं, तो यह सब मायने रखता है, है ना?
00:04:33लेकिन ओपन सोर्स, यह एकदम सही नहीं है, कोई भी टूल एकदम सही नहीं है, यहाँ तक कि Figma भी नहीं, है ना?
00:04:37लेकिन Penpot वास्तव में बड़ी फ़ाइलों के साथ संघर्ष कर सकता है।
00:04:40प्लगइन इकोसिस्टम बहुत छोटा है।
00:04:43और यदि आप Figma में गहराई से हैं, तो सीखने में थोड़ा समय लगेगा,
00:04:47लेकिन ईमानदारी से, इसे सीखना बहुत आसान है क्योंकि यह सोचने का एक अलग तरीका है।
00:04:51तो हाँ, कुछ क्षेत्रों में कम पॉलिश है, लेकिन डिज़ाइन और डेवलपमेंट के बीच का अंतर बहुत कम है,
00:04:56जो ईमानदारी से वह है जिसकी हममें से बहुत लोग तलाश कर रहे हैं।
00:04:59अब, क्या यह इस्तेमाल करने लायक है?
00:05:01मुझे ऐसा लगता है।
00:05:02यह बहुत मज़ेदार था।
00:05:02मैं इस तरह के टूल्स का आनंद लेता हूँ।
00:05:03तो आप में से बहुत से डेवलपर्स के लिए, हाँ।
00:05:06यदि आप साइड प्रोजेक्ट्स या किसी भी डेव-हेवी चीज़ पर काम कर रहे हैं, तो यह समझ में आता है,
00:05:10खासकर यदि आप पैसे बचाने की परवाह करते हैं, है ना?
00:05:12आप एक MVP बना रहे हैं, आप इसके जैसा कुछ बना रहे हैं,
00:05:14आप लॉक-इन से बचने की कोशिश कर रहे हैं, और
00:05:16आप ऐसे डिज़ाइन प्राप्त करना चाहते हैं जो सफाई से कोड में अनुवादित हों।
00:05:19अब, यदि आप बड़े डिज़ाइन सिस्टम वाली बड़ी कंपनी में हैं,
00:05:23आप पहले से ही Figma के आसपास बने हुए हैं।
00:05:24तो आप शायद इसमें स्विच नहीं करने वाले हैं, कम से कम रात भर में तो नहीं, लेकिन
00:05:28यही वास्तव में बिंदु नहीं है।
00:05:29Penpot को उपयोगी होने के लिए सब कुछ बदलने की ज़रूरत नहीं है।
00:05:31बहुत सारी टीमों के लिए, आप में से बहुतों के लिए, यह अधिकांश ज़रूरतें पूरी करता है,
00:05:35यह डेवलपमेंट को तेज़ बनाता है।
00:05:36और इसीलिए अधिक डेवलपर्स इसे आज़माना शुरू कर रहे हैं।
00:05:39यह उस हैंड-ऑफ समय को कम कर देता है जो डिज़ाइन को कोड में लेने में लगता है।
00:05:45यदि आप इसे आज़माना चाहते हैं, तो यह आसान है।
00:05:46Penpot ऐप पर जाएँ, क्लाउड वर्शन का उपयोग करें, या वही करें जो मैं कर रहा हूँ।
00:05:50यदि आप अधिक नियंत्रण चाहते हैं तो इसे Docker के साथ सेल्फ-होस्ट करें, बिल्कुल यहाँ की तरह।
00:05:54यदि आप इस तरह के ओपन सोर्स टूल्स और कोडिंग टिप्स का आनंद लेते हैं,
00:05:57तो Better Stack चैनल को सब्सक्राइब करना न भूलें।
00:05:59हम आपको अगले वीडियो में देखेंगे।