क्विकस्टार्ट

The tool gallery - every tool as a card, grouped by category

Lolly आपके नियमों — रंगों, टाइपोग्राफ़ी, लेआउट, लॉजिक — को ऐसे टूल में बदल देता है जिनका उपयोग करके कोई भी बस कुछ फ़ील्ड भरकर तैयार फ़ाइलें बना सकता है: इमेज, PDF, सोशल कार्ड, वीडियो। यहाँ न कुछ सीखना है और न कुछ अपलोड करना: सब कुछ आपके डिवाइस पर चलता है, ऑनलाइन हों या ऑफ़लाइन।

सबसे पहले पढ़ने लायक पेज यही है। दो चीज़ें आपको प्रोडक्टिव बना देती हैं: Lolly को अपना बनाएँ और जो आपके पास पहले से है उसे ले आएँ (आपकी डिज़ाइन फ़ाइलें और टोकन)। बाकी सब कुछ बस एक लिंक की दूरी पर है।

Lolly में नए हैं और बस कुछ बनाना चाहते हैं? ऐप खोलें, गैलरी से कोई भी टूल चुनें, खाली फ़ील्ड भरें और रेंडर दबाएँ। जब आप चाहें कि वह आपके ब्रांड में सजा हो, तब यहाँ वापस आएँ।

1. इसे अपना बनाएँ — अपना डिज़ाइन सिस्टम कॉन्फ़िगर करें

Lolly में आपका ब्रांड एक छोटा-सा डिज़ाइन-टोकन दस्तावेज़ है — रंग, फ़ॉन्ट और कुछ नियम — जिसके आधार पर हर टूल रेंडर करता है। इसे एक बार सेट करें और आप जो कुछ भी बनाएँगे वह बनावट से ही ऑन-ब्रांड होगा, समीक्षा से नहीं। शुरू करने के तीन तरीके हैं; वही चुनें जो इस बात से मेल खाता हो कि आपका ब्रांड पहले से कहाँ मौजूद है।

शुरू से शुरुआत करें (डिज़ाइन सिस्टम बिल्डर)

The Brand Studio start screen - name, primary colour, and a derived palette

पहली बार चलाने पर आप Start स्क्रीन (#/start) पर पहुँचते हैं — यानी ब्रांड स्टूडियो। इसे एक नाम और एक प्राइमरी रंग दें, और Lolly उसी से एक पूरा, एक्सेसिबल पैलेट खुद तैयार कर देता है — लाइट/डार्क सरफ़ेस, टेक्स्ट, एक्सेंट — उसी रंग-गणित से जिसे इंजन हर जगह इस्तेमाल करता है। एक फ़ॉन्ट चुनें, और एक मिनट से भी कम में आपके पास एक चालू ब्रांड होगा। वहाँ से स्टूडियो के पाँच टैब (Logos, Colours, Type, Tokens, Catalogue) आपको जितनी दूर चाहें ले जाते हैं — इनमें से कुछ भी बाद में, जब भी वापस आएँ, निखार सकते हैं। डैशबोर्ड से आप इसे हमेशा दोबारा खोल सकते हैं (बशर्ते आप Lolly का ब्रांड-लॉक्ड संस्करण इस्तेमाल न कर रहे हों)

अपना पहले से मौजूद ब्रांड इंपोर्ट करें

अगर आपका ब्रांड पहले से डिज़ाइन टोकन के रूप में दर्ज है — Penpot, Tokens Studio (Figma) या किसी सादी DTCG फ़ाइल से — तो उसे दोबारा टाइप करने के बजाय पूरा-का-पूरा ले आएँ। दो रास्ते हैं:

# a monolithic tokens.json, a one-file-per-set directory, or a Penpot project archive
npm run ingest:brand -- ./my-tokens.json --name acme --label "Acme" --activate

ingest:brand उन तीनों कंटेनरों को स्वीकार करता है जिनमें Penpot / Tokens Studio एक ही दस्तावेज़ एक्सपोर्ट करते हैं — एक अकेली tokens.json, एक डायरेक्टरी ($metadata.json + प्रति-सेट फ़ाइलें), या एक project.penpot आर्काइव। --activate के साथ यह ब्रांड को एक प्रोफ़ाइल के रूप में रजिस्टर करता है, उस पर स्विच करता है और कैटलॉग दोबारा बिल्ड करता है। ब्रांड पैक और प्रोफ़ाइल आपस में कैसे जुड़ते हैं, यह जानने के लिए कॉन्फ़िगरेशन देखें।

ऐप में इसे निखारें

The Dashboard's Design-system tab - the active brand shown read-only

ब्रांड सक्रिय हो जाने के बाद उसे ब्रांड स्टूडियो (#/start) में आकार देते रहें — कोई रंग या रोल बदलें और आपके टाइप करते-करते ऐप भर के सारे प्रीव्यू अपडेट हो जाते हैं। (#/d पर डैशबोर्ड का Design system टैब ब्रांड को सिर्फ़ पढ़ने लायक रूप में दिखाता है; एडिट करने की जगह स्टूडियो है।) वही ब्रांड Profile → Your brand कार्ड पर संक्षेप में दिखता है। फ़ॉन्ट असली हैं: Google Fonts में से चुनें और Lolly उस फ़ाइल को ब्रांड एसेट के रूप में आपके डिवाइस पर स्टोर करता है, इसलिए आपकी टाइपोग्राफ़ी ऑफ़लाइन भी साथ चलती है और रेंडर के समय कुछ भी फ़ेच नहीं होता।

जब आप संतुष्ट हों, तो ब्रांड को एक LollyBrand पैक के रूप में एक्सपोर्ट करें — एक अकेली फ़ाइल, जिसे कोई सहकर्मी इंपोर्ट करके बिल्कुल वही पैलेट, फ़ॉन्ट और नियम पा सकता है। इसी तरह कोई ब्रांड बीच में किसी सर्वर के बिना लोगों और मशीनों के बीच आता-जाता है।

ब्रांड टोकन दोनों दिशाओं में राउंड-ट्रिप करते हैं। चूँकि Lolly का ब्रांड स्वयं DTCG टोकन है — वही फ़ॉर्मैट जिसे Penpot नेटिव रूप से पढ़ता-लिखता है और जिसे Tokens Studio Figma में लाता है — जिस पैलेट से आप डिज़ाइन करते हैं और जिस पैलेट को Lolly लागू करता है, वे एक ही दस्तावेज़ हैं, न कि दो अलग सूचियाँ जिन्हें आपको हाथ से सिंक में रखना पड़े। देखें डिज़ाइन टोकन।

2. जो आपके पास पहले से है, उसे ले आएँ

आप खाली पेज से शुरू नहीं करते। Lolly उस डिज़ाइन काम और उन ओपन फ़ॉर्मैट को खोल देता है जो पहले से आपके अपने हैं।

ओपन-सोर्स डिज़ाइन फ़ाइलें

Figma, Penpot, Illustrator, InDesign या किसी भी SVG ऐप में बना तैयार काम उसी ऐप में बंद रहने को मजबूर नहीं है जिसमें आपने उसे बनाया था। लेआउट स्टूडियो खोलें, Import a design पर क्लिक करें, और फ़ाइल एक जीवित लेआउट के रूप में खुलती है — चपटी तस्वीर के रूप में नहीं। हर लेयर एक एडिट करने लायक बॉक्स बन जाती है: टेक्स्ट दोबारा टाइप किया जा सकता है, आकृतियाँ आकृतियाँ ही रहती हैं, इमेज आपकी लाइब्रेरी में पहुँच जाती हैं, और जटिल वेक्टर आर्ट पूरी वफ़ादारी से सुरक्षित रहती है। वह पहले से ही आपके ब्रांड टाइपफ़ेस और रंग नियमों के अनुरूप ढलकर आती है।

आपके पास हैइस रूप में ले आएँ
कोई Figma फ़्रेमनेटिव .fig (File → Save local copy), या SVG एक्सपोर्ट
कोई Penpot डिज़ाइनउसका .penpot एक्सपोर्ट, या कोई भी SVG
कोई Illustrator फ़ाइलनेटिव .ai (PDF-कम्पैटिबल) या .pdf — सीधे खुलती है
कोई InDesign लेआउट.idml (File → Export → InDesign Markup)
और कुछ भीकोई भी SVG — अंदर आने का सार्वभौमिक दरवाज़ा

पूरा इंपोर्ट आपके डिवाइस पर होता है — फ़ाइल आपके ब्राउज़र में पार्स होती है और कुछ भी अपलोड नहीं होता। पूरी जानकारी, और ठीक-ठीक क्या-क्या साथ आता है, डिज़ाइन इंपोर्ट करें में है।

एक बार के काम से टेम्पलेट तक

असली फ़ायदा यह है: इंपोर्ट किया हुआ लेआउट एक सामान्य लेआउट स्टूडियो सेशन ही है, इसलिए जैसे ही आप उसे सेव करते हैं, वह एक URL पर बस जाता है। Lolly रखने वाला कोई भी व्यक्ति वह URL खोलकर शब्द बदल सकता है, कोई इमेज अदला-बदली कर सकता है और अपना संस्करण रेंडर कर सकता है — किसी डिज़ाइन ऐप की ज़रूरत नहीं, और लॉक किए हुए हिस्से लॉक ही रहते हैं। एक बार का डिज़ाइन दोबारा इस्तेमाल होने वाला टूल बन जाता है। यही तो पूरा विचार है — और वह भी कॉन्फ़िगरेशन की एक भी पंक्ति लिखे बिना।

ओपन डेटा और ओपन टूल

कम्युनिटी टूल सेट ओपन सोर्स और ब्रांड-निरपेक्ष है — QR कोड, स्ट्रीट मैप, फ़िल्टर, प्राइवेसी यूटिलिटी — और जिस पल आप इसे सक्रिय करते हैं, यह आपके ब्रांड के आधार पर रेंडर होने लगता है।

The Utilities view - the on-device workhorses like Strip Hidden Data, Compress PDF and Convert Image, all in one place

टूल्स को अपना ओपन डेटा भी दें: कोई CSV या JSON टेबल पेस्ट करें या ड्रॉप करें और टूल के दोहराए जाने वाले फ़ील्ड उससे भर जाते हैं — हर पंक्ति के लिए एक तैयार एसेट।

3. कुछ बनाएँ, फिर उसे शेयर या ऑटोमेट करें

ब्रांड सक्रिय हो और आपकी सामग्री हाथ में हो, तो हर टूल एक तैयार फ़ाइल देता है:

"URL ही API है" बात अक्षरशः सच है। नीचे का चार्ट किसी ने बनाया नहीं: उसका प्रकार, उसका शीर्षक और उसकी पूरी डेटा टेबल एड्रेस बार में टाइप की गई थी, और वही लिंक किसी भी डिवाइस पर वही चार्ट रेंडर करता है।

An area chart of monthly signups, every value of which arrived as a query parameter rather than a click

आगे कहाँ जाएँ

आप यहाँ क्या करने आए हैं, उसके हिसाब से तीन रास्ते: