Figma और Linear: बिना Copy-Paste डिज़ाइन हैंडऑफ़
Figma को Linear से कैसे इंटीग्रेट करें – नेटिव एम्बेड, Figma प्लगइन और वर्कफ़्लो पैटर्न की मदद से डिज़ाइन और इंजीनियरिंग को सिंक में रखें।
By Ellis Keane · 2026-03-15
पिछले एक साल में, डिज़ाइन से इंजीनियरिंग तक का हैंडऑफ़ एक तरह के वर्कप्लेस थिएटर का हिस्सा बन गया है। एक डिज़ाइनर Figma में एक कंपोनेंट तैयार करता है, तीन सावधानी से लिखे कमेंट्स छोड़ता है, Slack में एक लिंक पेस्ट करता है और उस इंजीनियर को टैग करता है जो इसे बनाएगा। इंजीनियर दो दिन बाद लिंक खोलता है, तीन में से दो कमेंट पढ़ता है, एक variant से चूक जाता है और कुछ ऐसा ship करता है जो काफी करीब होता है कि QA तक किसी को पता न चले।
अगर आप इस खास तरह की गलतफहमी से गुज़रे हैं (और मैं बार-बार गुज़रा हूँ), तो आप पहले से जानते हैं कि इसका हल "बेहतर संचार" नहीं है। बात यह है कि टूल्स को इस तरह जोड़ा जाए कि कॉन्टेक्स्ट काम के साथ-साथ चले। यहाँ बताया गया है कि Figma को Linear से कैसे इंटीग्रेट करें – नेटिव एम्बेड, प्लगइन और तीन वर्कफ़्लो पैटर्न जो कनेक्शन को वास्तव में उपयोगी बनाते हैं।
Linear का Figma इंटीग्रेशन असल में क्या करता है
Linear कुछ समय से Figma एम्बेड को सपोर्ट करता है, और बुनियादी चीज़ें ठीक काम करती हैं। किसी भी issue description या comment में Figma URL पेस्ट करें, और Linear डिज़ाइन का एम्बेडेड प्रीव्यू बना देता है। ये प्रीव्यू डिफ़ॉल्ट रूप से स्टेटिक होते हैं – Linear उन्हें एम्बेड के समय फ्रीज़ कर देता है ताकि कॉन्टेक्स्ट बना रहे, जो एक जानबूझकर किया गया फ़ैसला है। आप edit mode में मैन्युअली रिफ्रेश कर सकते हैं, लेकिन डिज़ाइन चुपचाप आपके नीचे से नहीं बदलेगा।
आप Figma लिंक को issue attachments के रूप में भी जोड़ सकते हैं, जो उन्हें sidebar में व्यवस्थित रखता है – न कि एक comment thread में दफ्न, जो गुरुवार तक अनिवार्य रूप से चालीस संदेशों तक बढ़ जाता है।
Figma-Linear इंटीग्रेशन जो नहीं करता वह है द्विदिशात्मक होना। Linear Figma को देखता है, लेकिन Figma Linear को नहीं देखता। कमेंट्स वहीं रहते हैं जहाँ लिखे गए थे। स्टेटस बदलाव आगे नहीं जाते। अगर कोई इंजीनियर Linear में किसी issue को "Done" मार्क करता है, तो Figma में कोई नहीं जानता – जब तक कोई बताए न – जो व्यवहार में इसका मतलब है कि Figma में कोई नहीं जानता।
Figma को Linear से कैसे इंटीग्रेट करें: चरण-दर-चरण
सेटअप सीधा-साफ है (शुक्र है – हर चीज़ को बारह-चरणी OAuth नृत्य की ज़रूरत नहीं होती!).
चरण 1: इंटीग्रेशन सक्षम करें
अपने Linear workspace settings में जाएँ, फिर Integrations पर। सूची में Figma ढूँढें और Enable पर क्लिक करें। आपको कनेक्शन अधिकृत करने के लिए Figma पर रीडायरेक्ट किया जाएगा। एक्सेस दें, और admin का काम हो गया।
चरण 2: Frames को Issues से लिंक करें
एक बार सक्षम होने पर, किसी Linear issue में कोई भी Figma URL पेस्ट करने से एम्बेडेड प्रीव्यू बनता है। बेहतर परिणामों के लिए:
- विशिष्ट frames लिंक करें, पूरी फ़ाइलें नहीं।
figma.com/file/abc123?node-id=42:1337 का लिंक संबंधित कंपोनेंट दिखाता है। figma.com/file/abc123 का लिंक वह दिखाता है जो Figma डिफ़ॉल्ट व्यू के रूप में तय करता है – जो आमतौर पर वह नहीं होता जो आप चाहते हैं।
- Issue description का उपयोग करें प्राथमिक डिज़ाइन संदर्भ के लिए। कमेंट्स iteration के लिए काम करते हैं, लेकिन description वह है जो इंजीनियर पहले पढ़ते हैं जब वे कोई issue उठाते हैं।
- Issue sprint में जाने से पहले Figma लिंक जोड़ें। यह स्पष्ट लगता है, लेकिन मैं वाकई हैरान हूँ कि डिज़ाइन कॉन्टेक्स्ट कितनी बार उसके बाद जुड़ता है जब इंजीनियर पहले से बीस मिनट इसे ढूंढने में बिता चुका होता है।
चरण 3: Figma प्लगइन इंस्टॉल करें
Figma के पास एक Linear प्लगइन है जो डिज़ाइनरों को canvas से सीधे Linear issues बनाने और अपडेट करने देता है। एक frame चुनें, प्लगइन खोलें, issue का title और team भरें, और यह issue को Figma लिंक के साथ बना देता है। प्लगइन Figma छोड़े बिना issue status और assignee अपडेट करने को भी सपोर्ट करता है।
यह डिज़ाइन से डेवलपमेंट हैंडऑफ़ को "इंजीनियर डिज़ाइन ढूंढता है" से "डिज़ाइनर इंजीनियरिंग को डिज़ाइन भेजता है" में बदल देता है। हमारी टीम के अनुभव में, इस एक बदलाव से "इसके लिए डिज़ाइन कहाँ है?" वाले Slack संदेश लगभग आधे हो गए। यकीन मानिए, यह अकेले उन पाँच मिनटों के लायक है जो इसे सेट करने में लगते हैं!
नेटिव इंटीग्रेशन कहाँ कम पड़ता है
मैं यह कम नहीं आंकना चाहता कि Linear और Figma ने क्या बनाया है – हल्के कनेक्शन के लिए यह काम करता है। लेकिन कुछ कमियाँ हैं जिन्हें नाम देना ज़रूरी है, क्योंकि यह दिखावा करना कि वे मौजूद नहीं हैं, तीन महीने बाद "हमारे पास इंटीग्रेशन है, फिर कुछ सिंक क्यों नहीं हो रहा?" की बातचीत की ओर ले जाता है।
कमेंट्स एक-दूसरे तक नहीं पहुँचते। अगर कोई डिज़ाइनर Figma में फ़ीडबैक छोड़ता है और कोई इंजीनियर Linear में जवाब देता है, तो दोनों में से कोई भी दोनों टूल्स को मैन्युअली चेक किए बिना दूसरे का जवाब नहीं देखता। हमारे अनुभव में, डिज़ाइन-से-डेव की ज़्यादातर गलतफहमी इसी comment silo से आती है – बुरी specs से नहीं, बल्कि एक साथ दो जगह होने वाली बातचीत से।
स्टेटस एकतरफ़ा है। Linear में कोई issue "In Progress" पर जाने से Figma में कुछ अपडेट नहीं होता। डिज़ाइनर को Linear चेक करना पड़ता है (या, यथार्थवादी रूप से, Slack में पूछना पड़ता है) यह जानने के लिए कि उनके डिज़ाइन बन रहे हैं या नहीं।
कोई बदलाव अधिसूचना नहीं। जब कोई डिज़ाइनर किसी Linear issue से जुड़े frame को अपडेट करता है, तो उस issue को असाइन किए गए इंजीनियर को Linear में कोई अलर्ट नहीं मिलता। चूँकि प्रीव्यू डिफ़ॉल्ट रूप से स्टेटिक होते हैं, इंजीनियर उस डिज़ाइन के version के आधार पर build कर सकता है जो पहले ही revise हो चुका है। जब तक कोई embed को मैन्युअली रिफ्रेश नहीं करता या Slack में कुछ नहीं कहता, अपडेट अदृश्य रहता है।
कमियाँ दूर करने वाले वर्कफ़्लो पैटर्न
एम्बेड reference की समस्या हल करते हैं। ये तीन पैटर्न coordination की समस्या हल करते हैं – और यही तय करते हैं कि आपका Figma-Linear इंटीग्रेशन वास्तव में हैंडऑफ़ को बेहतर बनाता है या बस एक और टूल कनेक्शन जोड़ता है जिसे कोई maintain नहीं करता।
पैटर्न 1: Design-Ready Issues
किसी design issue के sprint backlog में जाने से पहले, Linear में तीन चीज़ें जुड़ी होनी चाहिए:
- Figma frame लिंक (विशिष्ट frame, फ़ाइल नहीं)
- डिज़ाइन नोट्स जो पिछले iteration के बाद क्या बदला है वह संक्षेप में बताएं (क्योंकि एम्बेडेड प्रीव्यू मौजूदा स्थिति दिखाता है, न कि क्या नया है)
- Acceptance criteria जो डिज़ाइन का विशेष रूप से संदर्भ दें – "Figma frame से मेल खाता है" acceptance criteria नहीं है। "Card title और subtitle के बीच 8px spacing token उपयोग करता है" है।
प्रति issue डिज़ाइनर की तैयारी में कुछ अतिरिक्त मिनट। इसका फ़ायदा यह है कि इंजीनियर पहले Slack archaeology expedition किए बिना बनाना शुरू कर सकते हैं।
पैटर्न 2: Design Review Labels
एक कस्टम Linear label बनाएँ – जैसे "Needs Design Review" – और इसे उन issues पर लगाएँ जो बन चुकी हों लेकिन डिज़ाइनर को implementation verify करनी हो। तरकीब (और मुझे पता है कि यह दर्दनाक रूप से स्पष्ट लगती है) यह है कि इसे issue lifecycle template का हिस्सा बनाएँ ताकि यह automatically trigger हो जब कोई issue "In Review" में जाए। मैं यह अनुभव से कह रहा हूँ – हमने बिल्कुल यही label बनाया, दो sprints तक नियमित रूप से इस्तेमाल किया, फिर चुपचाप बंद कर दिया क्योंकि किसी ने इसे template में नहीं डाला था। शुरुआत के उस इंजीनियर को याद करें जिसने एक variant छोड़ा और "काफी करीब" ship किया? वह एक गायब design review label था।
पैटर्न 3: Sprint Maps के रूप में Figma Sections
बड़े projects के लिए, एक Figma section या page मौजूदा sprint के डिज़ाइन को समर्पित करें। हर frame बिल्कुल एक Linear issue से मेल खाता है। Frames को issue identifier से मेल खाते नाम दें – ENG-142 – Card Component Redesign – ताकि इंजीनियर "Frame 247" नाम वाले चालीस artboards के बीच स्क्रॉल किए बिना सही frame ढूंढ सकें।
इन आदतों को टिकाए रखना
जिन teams को मैंने यह काम करते हुए देखा है, उनमें कुछ समान गुण हैं: डिज़ाइनर frames को issues के sprint में जाने से पहले लिंक करते हैं (इंजीनियरों के शिकायत करने के बाद नहीं), इंजीनियर review label issues को done mark करने से पहले लगाते हैं (बाद के ख्याल के रूप में नहीं), और कोई Slack को डिज़ाइन निर्णयों के record system के रूप में नहीं मानता।
वह आखिरी बात किसी भी इंटीग्रेशन से ज़्यादा मायने रखती है – और अगर आपने कभी "वह thread ढूंढने में पंद्रह मिनट बिताए हैं जहाँ हमने border radius बदलने का फ़ैसला किया था," तो आप जानते हैं कि मेरा मतलब क्या है। Slack वह जगह है जहाँ डिज़ाइन की बातचीत होती है, और यह भी वह जगह है जहाँ वे गायब हो जाती हैं। अगर कोई डिज़ाइन फ़ैसला किसी thread में लिया गया था, तो किसी को Figma file या Linear issue अपडेट करनी होगी – वरना तीन हफ्ते में वह गायब हो जाएगी, deployment alerts और lunch plans के नीचे दफ्न।
"अगर कोई डिज़ाइन फ़ैसला किसी thread में लिया गया था, तो किसी को Figma file या Linear issue अपडेट करनी होगी – वरना तीन हफ्ते में वह गायब हो जाएगी, deployment alerts और lunch plans के नीचे दफ्न।" – Chris Calo
नेटिव Figma-Linear इंटीग्रेशन embedding और reference को अच्छी तरह handle करता है। द्विदिशात्मक जागरूकता के लिए – कमेंट्स, स्टेटस, बदलाव अधिसूचनाएँ – आपको या तो मैन्युअल अनुशासन चाहिए या एक layer जो दोनों टूल्स में कॉन्टेक्स्ट को automatically जोड़े।
और अगर आप Figma और Linear से भी आगे जोड़ रहे हैं – Slack, GitHub और Notion को मिलाकर – तो सब कुछ सिंक में रखने का मैन्युअल बोझ जल्दी बढ़ जाता है। यह एक अलग बातचीत है, लेकिन यह अगली "किसने यह डिज़ाइन बदला और किसी ने क्यों नहीं बताया?" post-mortem से पहले करने लायक है।
Figma, Linear, Slack और GitHub को एक नॉलेज ग्राफ़ में जोड़ें – ताकि डिज़ाइन कॉन्टेक्स्ट काम के साथ-साथ चले।
Q: क्या Sugarbug Figma और Linear को अपने आप जोड़ता है? A: हाँ। Sugarbug Figma और Linear दोनों से सिग्नल इकट्ठा करता है और डिज़ाइन कमेंट्स तथा फ़ाइल अपडेट को अपने नॉलेज ग्राफ़ में issue स्टेटस बदलाव के साथ जोड़ता है। जब कोई डिज़ाइनर किसी frame पर फ़ीडबैक छोड़ता है, Sugarbug उसे संबंधित Linear issue के साथ दिखा सकता है – बिना किसी के URLs कॉपी किए।
Q: क्या Sugarbug Figma, Linear और Slack में डिज़ाइन हैंडऑफ़ ट्रैक कर सकता है? A: Sugarbug Figma, Linear, Slack, GitHub और Notion को एक नॉलेज ग्राफ़ में जोड़ता है। डिज़ाइन फ़ीडबैक, इंजीनियरिंग चर्चा और टास्क स्टेटस सभी आपस में जुड़े रहते हैं – ताकि हैंडऑफ़ के दौरान कॉन्टेक्स्ट न खोए।
Q: क्या Linear में Figma इंटीग्रेशन पहले से बना है? A: हाँ। Linear का नेटिव Figma इंटीग्रेशन issues में Figma URLs पेस्ट करके एम्बेडेड प्रीव्यू बनाने की सुविधा देता है, और Figma प्लगइन से canvas से सीधे issues बनाने या अपडेट करने की। हालाँकि यह एकतरफ़ा है – कमेंट्स और स्टेटस बदलाव टूल्स के बीच सिंक नहीं होते।
Q: मैं Figma frame को Linear issue से कैसे लिंक करूँ? A: Figma frame URL को किसी Linear issue की description या comment में पेस्ट करें। Linear एक एम्बेडेड प्रीव्यू बनाता है। आप Linear के Figma प्लगइन का उपयोग करके canvas से सीधे issues बना सकते हैं – जिसमें लिंक पहले से जुड़ा होता है।
Q: Figma के कमेंट्स Linear में क्यों नहीं दिखते? A: Linear का नेटिव Figma इंटीग्रेशन डिज़ाइन प्रीव्यू एम्बेड करता है, लेकिन टूल्स के बीच कमेंट्स सिंक नहीं करता। डिज़ाइनर का Figma कमेंट और इंजीनियर का Linear कमेंट अलग-अलग silos में रहते हैं। Sugarbug जैसे टूल्स दोनों से सिग्नल इकट्ठा करके और उन्हें साझा नॉलेज ग्राफ़ में जोड़कर इस खाई को पाटते हैं।