डिज़ाइन
Design system क्या है, startup को कब चाहिए और इसकी cost कितनी होती है?
Design system UI/UX के नियमों, components और guidelines का साझा सेट है। छपी दरें ₹7.7–14.4 लाख (50–80 components, एक डिज़ाइन एजेंसी, मई 2026) से ₹96 लाख–1.9 करोड़ और ऊपर (governance सहित, एक नॉर्वेजियन स्टूडियो) तक हैं। आम तौर पर यह तब चाहिए जब दो या अधिक लोग एक साथ interface पर काम करें। VITON13 में यह $113 से।
Design system क्या है, और UI kit से यह कैसे अलग है?
Nielsen Norman Group के अनुसार design system बड़े पैमाने पर design संभालने के standards का समूह है: यह दोहराव घटाता है और साझा भाषा तथा visual एकरूपता देता है। व्यवहार में यह एक repository (style guide, component library, अक्सर pattern library) और उसे चलाने वाले लोग हैं; UI kit उसका visual हिस्सा है। ध्यान रहे: “design system kya hai” खोजने पर अक्सर “system design” दिखता है, जो software architecture का अलग विषय है।
| स्तर | अंदर क्या है | कब ठीक बैठता है |
|---|---|---|
| 1. Tokens वाला UI kit | Figma में रंग, typography और spacing के नामित styles और कुछ आम components | एक ही designer है और product हर हफ़्ते बदलता है |
| 2. Figma में components | 20–40 documented components की साझा library, variants और states के साथ | एक product पर दो या अधिक designers काम करते हैं |
| 3. Code में library और docs | वही components code में (web के लिए React या Next.js), tokens variables के रूप में, docs site या Storybook | Developers एक ही form कई जगह दोबारा बनाते हैं |
| 4. Governance और versions | एक owner, बदलाव मंज़ूर करने के नियम, version numbers, components हटाने की योजना | कई teams या products system पर निर्भर हैं |
Design system की cost कितनी होती है?
कोई एक क़ीमत नहीं है, क्योंकि “design system” का मतलब रंगों के styles वाली Figma file भी हो सकता है और team वाली versioned code library भी। नीचे के आँकड़े चार संस्थाओं के हैं, हर एक का अपना बाज़ार और scope है। क़ीमत से पहले scope पढ़ें।
| स्रोत और scope | क़ीमत | बताया गया समय |
|---|---|---|
| Luft (नॉर्वे), फ़रवरी 2026: open-source kit पर अपना brand layer | $0–$5,000 (≈ ₹4.8 लाख तक) | नहीं बताया |
| Luft: base, 20–30 components, tokens, Figma और code | $15,000–$25,000 (≈ ₹14.4–24.1 लाख) | 3–4 हफ़्ते |
| Luft: production, 50–70 components, WCAG AA guidance | $40,000–$80,000 (≈ ₹38.5–77.1 लाख) | 6–10 हफ़्ते |
| Luft: enterprise, governance, system team, कई brands | $100,000–$200,000 और ऊपर (≈ ₹96 लाख–1.93 करोड़) | 12–20 हफ़्ते, फिर रखरखाव |
| BAMN, मई 2026: 50–80 components, एक product | $8,000–$15,000 (≈ ₹7.7–14.4 लाख) | नहीं बताया |
| Homem Máquina (ब्राज़ील), सितंबर 2026: 35–60 components, Figma, code, governance | R$50,000–R$180,000 (≈ ₹9.3–33.4 लाख) | 3–6 महीने |
| VITON13: design foundations, component library, governance documentation | $113 AI-सहायित या $173 विशेषज्ञ-नेतृत्व | 10–18 कार्यदिवस |
Autentika (पोलैंड) हर component के 100–120 घंटे मानकर 40 components का अनुमान लगभग $288,000 (≈ ₹2.77 करोड़) बताता है, testing और documentation सहित: यह ऊपरी सीमा है, quote नहीं। भारत की एजेंसियों की दरें अलग हो सकती हैं, इसलिए घंटों का ब्योरा माँगें।
Startup को design system कब चाहिए?
शुरू में नहीं, और फिर अचानक। Luft इसे stage से जोड़ता है: एक से तीन लोग हों तो अपनाया हुआ open-source kit; paying customers आने और hiring शुरू होने पर documented foundation। स्रोत यही मोड़ गिनाते हैं:
- दूसरा designer जुड़ता है, या दो लोग एक साथ design करते हैं। BAMN और Luft इसे साझा source of truth की शुरुआत मानते हैं।
- Developers बार-बार पूछते हैं कि padding कितनी है या कौन-सा नीला रंग लेना है, या एक ही form तीन versions में है।
- Reviews product पर नहीं, font sizes और spacing पर होते हैं (BAMN)।
- तीन या अधिक designers, कई product areas, accessibility का बढ़ता महत्व, मुश्किल onboarding (Luft, production स्तर)।
- Homem Máquina की जाँच: अपने product के अलग-अलग buttons गिनें। पाँच से ज़्यादा हों तो जवाब मिल गया।
Design system की cost किन बातों से बढ़ती है?
- Components और उनके states। Autentika हर component के 100–120 घंटे गिनता है; text input और data table एक जैसा काम नहीं हैं।
- Platforms। सिर्फ़ web एक scope है; web के साथ iOS और Android दूसरा (Homem Máquina का ऊँचा स्तर)।
- Themes। Dark mode या कई brands में हर token के एक से ज़्यादा मान होते हैं और हर component हर theme में जाँचा जाता है।
- Accessibility। Luft production स्तर में WCAG AA guidance जोड़ता है; zeroheight के सर्वे के सिर्फ़ 59% systems में accessibility guidelines हैं। GIGW 3.0, भारत सरकार की वेबसाइट और ऐप की गाइडलाइन, WCAG 2.1 Level AA के अनुरूप है; सरकारी ग्राहकों के लिए इसे पहले दिन से दायरे में रखना समझदारी है (हमारी राय)।
- Code। Autentika के button उदाहरण में developer और designer दोनों 24-24 घंटे लेते हैं; सिर्फ़ Figma वाली library developer का हिस्सा बचा लेती है।
- Migration। मौजूदा screens को नए components पर ले जाना system से महँगा हो सकता है; Luft का उदाहरण $50,000 का system और $150,000 की migration है।
Build करें या adopt: shadcn/ui जैसा kit या अपना system?
| विकल्प | यह क्या है | पेच |
|---|---|---|
| shadcn/ui | Accessible components जिनका code आप अपने project में copy करके बदलते हैं; मुफ़्त | इसके docs इसे आपकी component library बनाने का तरीक़ा कहते हैं, library नहीं; Homem Máquina के अनुसार यह नियम, owner और brand नहीं देता |
| Custom system | आपके product और brand के हिसाब से foundations, components और नियम | सबसे धीमा और महँगा रास्ता; तभी चुकता है जब बहुत लोग इसे दोबारा इस्तेमाल करें |
आम बीच का रास्ता: kit अपनाएँ, फिर कुछ हफ़्ते brand पर लगाएँ। Luft इसे designer के दो–तीन हफ़्तों के लिए $5,000–$8,000 (≈ ₹4.8–7.7 लाख) आँकता है। Homem Máquina चेताता है कि defaults जस के तस रखने पर product बाक़ियों जैसा दिखता है।
Design system को चालू रखने की cost कितनी है?
System users वाला product है और देखरेख के बिना बिगड़ता है। Homem Máquina हर साल शुरुआती निवेश का 20–30% रखता है, जो बड़ी teams में आधे से तीन पूर्णकालिक लोगों तक पहुँचता है; उसके सालाना आँकड़े adapted base के लिए R$3,000–R$12,000 (≈ ₹0.56–2.2 लाख) से product system के लिए R$15,000–R$45,000 (≈ ₹2.8–8.4 लाख) तक हैं। Autentika रखरखाव को अक्सर सबसे महँगा हिस्सा कहता है, और NN/g के अनुसार मौजूदा system से शुरू करने पर भी लोगों को सिखाना पड़ता है।
असली बात owner है: zeroheight के 2026 सर्वे में 83% teams के पास समर्पित team है, 100 से कम लोगों वाले संगठनों में भी 71%।
क्या design system अपनी cost निकाल लेता है, और ROI किसने मापा?
हर ROI आँकड़े को ऐसा दावा समझें जिसका कोई लेखक है। तीन तरह के आँकड़े चलते हैं।
- मॉडल। Smashing का 2022 का formula (BestSecret Group के दो designers) लगभग दस designers और तीस developers, 20% समय पर बारह महीने की शुरुआत और पाँच अध्ययनों के औसत से 38% (design) और 31% (development) बचत मानता है। लेखक मानते हैं कि बचत पहले से नहीं जानी जा सकती।
- काल्पनिक गणनाएँ। Autentika 1,000 designers और front-end developers वाली काल्पनिक कंपनी का 7.5 गुना रिटर्न दोहराता है; Luft की चार से छह महीने में वसूली उसके अपने अनुमान पर टिकी है: हफ़्ते में 15–25 घंटे की बचत, $75–$85 प्रति घंटे पर।
- सर्वे। zeroheight की 2026 रिपोर्ट में 147 में से सिर्फ़ 5% practitioners ROI मापते हैं। इसे documentation tools बेचने वाली कंपनी चलाती है और जवाब उन्होंने दिए जो देना चाहते थे।
अपनी जाँच: interface के सवालों और दोबारा काम में हर हफ़्ते जाते घंटे, गुणा औसत घंटा-दर, गुणा 52, और उसकी तुलना build की क़ीमत और एक साल के रखरखाव से। पहली संख्या का अनुमान न लगे तो buttons गिनें।
Design system कब नहीं बनाना चाहिए?
- Screens हर हफ़्ते बदलती हैं और product को बाज़ार में जगह नहीं मिली। NN/g के अनुसार system में समय और लोग लगते हैं; इस stage पर Luft अपनाया हुआ open-source kit सुझाता है।
- उसे कोई संभालने वाला नहीं है। zeroheight के सर्वे में संसाधनों की कमी हर कामकाजी मॉडल में दिखती है, और ज़िम्मेदारी का धुँधलापन तीन में से दो में।
- दर्द काल्पनिक है: buttons के कम variants, कोई नई hiring नहीं, दूसरा platform नहीं।
- आप build का ख़र्च उठा सकते हैं, migration का नहीं। दोनों का बजट रखें या रुकें।
VITON13 में design system और उसकी screens की cost कितनी होगी?
System अक्सर उन्हीं product screens के साथ लिया जाता है जिनके लिए वह बना है। कुल में VITON13 की दोनों modes की शुरुआती क़ीमतें जुड़ती हैं।
लागत कैलकुलेटर
अपना design system प्लान करें
जो चाहिए उसे चुनें; कुल अपने आप बदलता है।
आपका अनुमान
- AI-सहायित
- से $113
- विशेषज्ञ-नेतृत्व
- से $173
- समय
- 10–18 कार्यदिवस
चरण साथ-साथ चल सकते हैं; लिखित अनुमान तारीख़ें तय करता है
1 कार्यदिवस में लिखित अनुमान पाएँVITON13 पैकेजों की शुरुआती क़ीमतें; ब्रीफ़ के बाद लिखित estimate scope और क़ीमत पक्की करता है।
समय: design system 10–18 कार्यदिवस, SaaS पैकेज 15–30 कार्यदिवस, dashboard पैकेज 6–10 कार्यदिवस।
VITON13 design system कैसे बनाता है
हम पहले research करते हैं कि आपकी team आज क्या ship करती है: screens, Figma files और कई versions वाले elements। फिर visual direction और design foundations तय करते हैं, component library बनाते हैं और governance documentation लिखते हैं (system कैसे इस्तेमाल और बदला जाए), और सब आपके designers और developers को सौंपते हैं। Components की संख्या और platforms काम शुरू होने से पहले estimate में लिखे जाते हैं। AI-सहायित: AI research और पहले ड्राफ़्ट तेज़ करता है, और designer हर फ़ैसला जाँचता है। विशेषज्ञ-नेतृत्व: designer नेतृत्व करता है और AI मदद करता है, इसलिए दूसरी क़ीमत ज़्यादा है।
डिज़ाइन सिस्टम डेवलपमेंट
- कीमत
- $113 AI-सहायित या $173 विशेषज्ञ-नेतृत्व
- समय
- 10–18 कार्यदिवस
SaaS प्रोडक्ट डिज़ाइन
- कीमत
- $213 AI-सहायित या $313 विशेषज्ञ-नेतृत्व
- समय
- 15–30 कार्यदिवस
डैशबोर्ड इंटरफ़ेस डिज़ाइन
- कीमत
- $93 AI-सहायित या $113 विशेषज्ञ-नेतृत्व
- समय
- 6–10 कार्यदिवस
AI-सहायित: तय चरणों में AI ड्राफ़्ट बनाता है, एक व्यक्ति दिशा देता है और हर नतीजा जाँचता है। विशेषज्ञ-नेतृत्व: काम विशेषज्ञ करता है, AI मदद करता है।
क्या शामिल है
- Design foundations
- Component library
- Governance documentation
- आपके designers और developers को handoff
- समय: ब्रीफ़ मंज़ूर होने के बाद 10–18 कार्यदिवस
शामिल नहीं
- तीसरे पक्ष के शुल्क: font licences, Figma seats, documentation platforms, hosting
- आपके codebase में engineering का काम, जब तक लिखित scope में नाम न हो
- क़ानूनी सलाह, या यह घोषणा कि आपका product किसी accessibility क़ानून की शर्तें पूरी करता है
- हैंडऑफ़ के बाद system का रोज़ का रखरखाव
संशोधन: डिलिवरेबल्स पर 2 संशोधन राउंड
1 कार्यदिवस में अनुमान पाएँ1 कार्यदिवस में लिखित अनुमान
उदाहरण
पायलटपायलट जारी है
Design system का कोई प्रकाशित केस अभी नहीं
VITON13 ने किसी ग्राहक के लिए बना design system अभी प्रकाशित नहीं किया है, इसलिए इस गाइड में 'पहले और बाद' के screens या बचाए गए घंटे नहीं हैं। पहले systems पायलट के रूप में बनते हैं और ग्राहक की अनुमति से ही दिखाए जाएँगे।
यह क्या साबित नहीं करता
- क़ीमतों की सीमाएँ स्रोतों में गिनाई संस्थाओं की हैं और संकेत उनकी अपनी सलाह से; इनमें से कुछ भी VITON13 के काम को नहीं मापता।
सवाल और जवाब
Design system और UI kit में क्या फ़र्क़ है?
NN/g design system को एक repository बताता है, आम तौर पर style guide, component library और अक्सर pattern library, और उसे चलाने वाले लोग। UI kit उसका visual हिस्सा है: design tool में रंग, typography, icons और तैयार components। Code, उपयोग के नियम और owner के बिना वह kit है, system नहीं।
Design system बनने में कितना समय लगता है?
Luft 20–30 components की base के लिए तीन से चार हफ़्ते और production system के लिए छह से दस हफ़्ते बताता है; Homem Máquina product system के लिए तीन से छह महीने। VITON13 अपना पैकेज 10–18 कार्यदिवस में देता है।
क्या shadcn/ui से शुरू करके बाद में design system जोड़ सकते हैं?
हाँ, छोटी team के लिए यही आम सलाह है। रंग, spacing और radius पहले दिन से variables में रखें और component का हर बदलाव लिख लें। जब कई लोगों को वही नियम चाहिए हों, उन्हें documented करें: यही क़दम library को system बनाता है।
क्या सरकारी ग्राहकों के लिए design system में accessibility पहले से रखनी चाहिए?
GIGW 3.0 भारत सरकार की वेबसाइटों और ऐप की गाइडलाइन है और WCAG 2.1 Level AA के अनुरूप है। सरकारी ग्राहक हों तो रंग-contrast जैसे नियम tokens में पहले दिन से रखना बाद में सुधारने से आसान है; यह हमारी राय है। लागू होने की शर्त वकील से पूछें; यह क़ानूनी सलाह नहीं है।
स्टूडियो से quote लेने से पहले क्या पूछें?
कितने components और कितने states; कौन-से platforms और themes; library सिर्फ़ Figma में है या code में भी; accessibility का स्तर; हैंडऑफ़ के बाद owner कौन; और migration शामिल है या नहीं। दो quotes तभी तुलनीय हैं जब ये जवाब मेल खाएँ।
ब्राज़ील या नॉर्वे की दरें भारत के लिए कितनी काम की हैं?
आकार समझने के लिए काम की हैं, घंटे-दर के लिए नहीं। हर संस्था अपने बाज़ार में quote देती है और रुपये में बदलने से सिर्फ़ मुद्रा बदलती है। Scope (components, platforms, code, governance) की तुलना करें और घंटों का ब्योरा माँगें।
स्रोत
- Luft, Do startups need a design system? (अंग्रेज़ी) —
- BAMN, Design systems for growing companies (अंग्रेज़ी) —
- Homem Máquina, Quanto custa criar um design system (पुर्तगाली) —
- Autentika, How much is a design system? (अंग्रेज़ी) —
- Smashing Magazine, The ROI of a design system (अंग्रेज़ी) —
- zeroheight, Design Systems Report 2026 (अंग्रेज़ी) —
- Nielsen Norman Group, Design Systems 101 (अंग्रेज़ी) —
- shadcn/ui, Introduction (अंग्रेज़ी) —
- GIGW 3.0 पोर्टल, New features of GIGW 3.0 —
- यूरोपीय केंद्रीय बैंक, यूरो की संदर्भ विनिमय दरें —