Claude Design पर विचार और impressions

• डिज़ाइन को systematize करने पर ज़ोर बढ़ने के साथ Figma ने components, styles, variables, props जैसी अपनी units के इर्द-गिर्द जटिल संरचना खड़ी की, और वास्तविक implementation medium से दूरी पैदा हो गई
• Figma का proprietary format स्वाभाविक रूप से LLM training data से बाहर रह गया, और agent युग में code-based tools के उभरने के साथ डिज़ाइन का source of truth फिर से code की ओर खिसकने लगा
• Claude Design HTML/JS को सीधे संभालने वाला ईमानदार medium है, जो Figma की तरह code की lossy approximation से गुज़रे बिना सीधे वास्तविक implementation medium में काम करने का तरीका अपनाता है
• Claude Code के साथ सिब्लिंग relationship के कारण डिज़ाइन और implementation के बीच feedback loop को एक ही conversation में समेटने की structural strength मौजूद है
• डिज़ाइन टूल बाज़ार code-based tools और pure exploration tools में बंटता दिख रहा है, और Figma के Sketch के रास्ते पर चल पड़ने की संभावना बन गई है **Sketch moment**

---

Figma के systematization का paradox

• product teams का आकार बढ़ने के साथ डिज़ाइन को engineering organization के भीतर अपने अस्तित्व को justify करना पड़ा, और इसी कारण उसे systematization की दिशा में धकेला गया
• इसके लिए Figma ने components, styles, variables, props जैसी proprietary primitives गढ़ीं, लेकिन कुछ programming से ली गईं और कुछ नहीं, इसलिए उनका किसी एक चीज़ से साफ-सुथरा correspondence नहीं बनता
• guidelines लगातार बदलती रहीं, migrations जमा होती गईं, और automation करने के लिए कुछ low-quality plugins पर निर्भर रहना पड़ता है
• जटिलता इतनी बढ़ गई कि इस system को manage करने में विशेषज्ञ डिज़ाइन roles भी अलग से पैदा हो गए

Source of Truth का स्थानांतरण

• Figma और code के बीच हमेशा यह तनाव रहा कि source of truth आखिर क्या होना चाहिए

• Sketch को हराने के बाद Figma ने यह रुख अपनाया कि उसका tool ही canonical बनेगा

• लेकिन इस जीत की छिपी हुई कीमत थी: locked-down, ज़्यादातर undocumented format को programmatically संभालना कठिन था, इसलिए वह स्वाभाविक रूप से LLM training data से बाहर हो गया

• LLMs ने code पर training पाई है, Figma primitives पर नहीं, इसलिए models Figma की system को सीख ही नहीं पाए

• जैसे-जैसे code लिखना designers के लिए भी आसान हुआ और agents बेहतर हुए, source of truth स्वाभाविक रूप से फिर code की तरफ लौटता दिख रहा है

• इसके सामने Figma ने पिछले 10 साल में जो जटिल infrastructure जोड़ा, वह ज़रूरत से ज़्यादा लग सकता है

  "अगर आपको मिट्टी के बर्तन बनाने हैं, तो आप उनके watercolor sketches क्यों बना रहे हैं? सीधे मिट्टी को आकार क्यों न दें?"

Figma के अपने design system की जटिलता

• वास्तविक काम में code में सीधे किए गए design changes को Figma में back-port करना बेहद कठिन होता है
• उदाहरण के तौर पर Figma के अपने product के design system files का ज़िक्र है, और सबसे सक्षम design system team के बनाए होने के बावजूद वे अत्यधिक जटिल दिखते हैं
  • 946 color variables हैं, जो "bg/desktopBackgrounded" जैसे nested groups में बने हैं, और एक variable में Light, Dark, FigJam-Light सहित 8 mode-specific values मौजूद हैं
  • modal footer component में 12 variants हैं, और "DS Library Swap", "QA Plugin" जैसे values वाले dropdowns तथा 8 props शामिल हैं
  • slider component की effect style में सिर्फ 0.5px drop shadow के लिए अलग नाम वाली style मौजूद है — क्योंकि CSS variables के साथ correspondence document करने का यही एकमात्र तरीका है
  • combo input component में 16 variants हैं, और layer names "Default, Default, Close Button=False" जैसे रूप में हैं
• जब colors गलत दिखते हैं, तो debugging के लिए component check करना → variable check करना → alias किए गए दूसरे variable को देखना → mode देखना → instance-level override देखना → library swap लगे nested components को देखना जैसी multi-step tracing करनी पड़ती है

Figma Make vs Claude Design

• source of truth के code की ओर जाने के साथ Figma एक passive, pre-agentic system लेकर असहज स्थिति में खड़ा है
• आगे डिज़ाइन tools दो स्पष्ट रूपों में बँट सकते हैं
  • 2016 में Figma ने जिस सवाल का जवाब दिया था — "एक designer के तौर पर मेरी idea को सबसे तेज़ी से बाहर निकालने वाला tool कौन-सा है?" — उस पर प्रतिस्पर्धा फिर से शुरू हो सकती है
• Figma Make पहले से Figma system के अभ्यस्त लोगों के लिए tool है
  • यह Figma styles, component libraries, proprietary props (Prop Props) को पढ़ता है, और इस नए environment में भी design file को ही canonical मानने वाला लगभग अकेला tool है
  • यह उन लोगों के लिए tool है जो system के भीतर रहना चाहते हैं, या जिनके पास वही विकल्प है
• Claude Design इसके ठीक उलट दांव है
  • Arts and Crafts movement के "truth to materials" सिद्धांत — यानी किसी वस्तु का अपने substance और निर्माण के तरीके के प्रति ईमानदार होना — के अधिक नज़दीक
  • इसके उलट Figma को बेहद rigid schema के ऊपर चढ़ी एक मुक्त "vibe" layer की तरह बताया गया है — जैसे Type A personality ज़बरदस्ती relaxed दिखने की कोशिश करे, जबकि भीतर frames की nesting और token separation पर चीख रही हो
  • Claude Design खुरदरा ज़रूर है, लेकिन कम-से-कम अपनी असलियत को लेकर ईमानदार है: आख़िर तक HTML और JS

Claude Design की structural strength

• Claude Design का sibling ऐसा Claude Code है जो code को अच्छी तरह संभालता है — यही इसकी मुख्य structural advantage है
• अंततः Claude Design से Claude Code में सीधे handoff, या उलटा handoff संभव होने वाली structure बनती है
• Claude Design के onboarding में पहले से repository (repo) import फीचर दिया गया है
• डिज़ाइन और implementation के बीच का feedback loop — जो ऐतिहासिक रूप से हमेशा friction का कारण रहा — एक ही conversation में सिमट सकता है

Code से असंबंधित दूसरे tools की संभावना: pure exploration environment

• इस विभाजन की दूसरी धुरी पर ऐसे tools उभर सकते हैं जिनमें code से कोई अपेक्षा ही न हो
• rectangles रखना, layer styles जमाना, blend modes और gradients के साथ खुलकर काम करना — यानी ऐसा pure exploration environment जो किसी system या prompt rule से बंधा न हो
• यह iPad + Pencil support वाले app में जल्दी-जल्दी rectangles sketch करने जैसा हो सकता है, या 37signals किसी दिलचस्प प्रयोग की दिशा में जा सकता है
• दूसरी दिशा में यह Photoshop की तरह high-fidelity compositing पर पूरा ज़ोर देकर CSS effects की सीमाओं से बाहर कल्पना को मुक्त करने वाला tool बन सकता है
• यह अजीब लगता है कि Figma ने अपनी उम्र के 90% हिस्से तक layer effects में सिर्फ drop shadow या blur ही दिए

Figma का "Sketch moment"

• Figma का Sketch moment — यानी जैसे Sketch को Figma ने पीछे छोड़ा था, वैसे ही Figma के पीछे छूटने का क्षण — तेज़ी से नज़दीक आ रहा है