डिज़ाइनरों के साथ आप कैसे काम करते हैं और design system को कोड से बहकने से कैसे रोकते हैं?

token की परत को सत्य का इकलौता स्रोत बनाइए: colors, spacing, typography और radii नामित tokens की तरह रहें जिन्हें design टूल और CSS दोनों इस्तेमाल करें, ताकि बदलाव एक ही बार हो। components को कच्ची values नहीं, tokens के सहारे बनाइए, हर नई इकलौती value को design debt की तरह review कीजिए, और component library को दस्तावेज़ी props के साथ पब्लिश कीजिए ताकि प्रोडक्ट टीमें fork करने की जगह जोड़कर काम करें।

जो चीज़ इसे सच में तालमेल में रखती है वह primitives का एक ही स्रोत होना है। colors, spacing, type scale और radii tokens की तरह रहते हैं, कोड के लिए CSS custom properties में export होते हैं और design टूल में variables की तरह इस्तेमाल होते हैं, तो brand का रंग बदलने पर वह एक ही जगह बदलता है और सब कुछ उसे उठा लेता है। components फिर सिर्फ tokens का हवाला देते हैं, कभी कच्ची hex values का नहीं, और हमारे lint नियम pull request में hard coded रंग पर झंडा लगा देते हैं। जब कोई mockup ऐसी value लाता है जो मौजूद ही नहीं, तो वह चुपचाप जुड़ने की जगह एक बातचीत बनती है: आमतौर पर वह अनजाने में हुआ होता है, और कभी कभी वह सच में एक कमी होती है और हम उसे सोच समझकर जोड़ते हैं। components के लिए मैं ऐसी दस्तावेज़ी library रखता हूं जिसमें props और states दिखते हैं, ताकि प्रोडक्ट टीमें दोबारा बनाने से पहले देख सकें कि क्या मौजूद है, और जब किसी को variant चाहिए तो वापस योगदान देने का साफ रास्ता हो। जो नाकामी मैंने झेली है वह ऐसा system था जिसे कोई ढूंढ ही नहीं पाता था, तो चार टीमों ने अपना अपना button शिप कर दिया, और तब तक उन्हें एक करना एक तिमाही का काम बन चुका था।