Figma ถึง Linear: เชื่อมการออกแบบสู่การพัฒนา
วิธีเชื่อมต่อ Figma กับ Linear ด้วย native embeds ปลั๊กอิน Figma และรูปแบบเวิร์กโฟลว์ที่รักษาการออกแบบและวิศวกรรมให้ซิงค์กัน
By Ellis Keane · 2026-03-15
ในช่วงปีที่ผ่านมา กระบวนการส่งมอบงานจากการออกแบบสู่วิศวกรรมกลายเป็นละครในที่ทำงาน นักออกแบบทำ component ใน Figma เสร็จ ทิ้งความคิดเห็นที่ร่างมาอย่างดีสามข้อ วางลิงก์ไว้ใน Slack และแท็กวิศวกรที่จะสร้างมัน วิศวกรเปิดลิงก์สองวันต่อมา อ่านความคิดเห็นสองในสามข้อ พลาด variant หนึ่ง และส่งมอบงานที่ใกล้เคียงพอที่จะไม่มีใครสังเกตจนกว่าจะถึง QA
ถ้าคุณเคยผ่านประสบการณ์การสื่อสารผิดพลาดแบบนี้ (และฉันก็เคย หลายครั้ง) คุณก็รู้อยู่แล้วว่าการแก้ไขไม่ใช่ "การสื่อสารที่ดีขึ้น" แต่คือการเชื่อมต่อเครื่องมือเพื่อให้บริบทเดินทางไปพร้อมกับงาน นี่คือวิธีการเชื่อมต่อ Figma กับ Linear – การฝังแบบ native ปลั๊กอิน และรูปแบบเวิร์กโฟลว์สามแบบที่ทำให้การเชื่อมต่อนี้มีประโยชน์จริง
การเชื่อมต่อ Figma ของ Linear ทำอะไรได้จริงๆ
Linear รองรับ Figma embeds มาระยะหนึ่งแล้ว และพื้นฐานนั้นแข็งแกร่ง วาง Figma URL ลงในคำอธิบายหรือความคิดเห็นของ issue ใดก็ได้ แล้ว Linear จะสร้างภาพตัวอย่างแบบฝังของการออกแบบ ภาพตัวอย่างเหล่านี้เป็นแบบ static โดยค่าเริ่มต้น – Linear ตรึงไว้ ณ จุดที่ฝังเพื่อรักษาบริบท ซึ่งเป็นการตัดสินใจโดยเจตนา คุณสามารถรีเฟรชด้วยตนเองในโหมดแก้ไข แต่การออกแบบจะไม่อัปเดตอย่างเงียบๆ ใต้มือคุณ
คุณยังสามารถแนบลิงก์ Figma เป็นไฟล์แนบของ issue ซึ่งจัดระเบียบไว้ใน sidebar แทนที่จะฝังอยู่ในกระทู้ความคิดเห็นที่เติบโตเป็นสี่สิบข้อความในวันพฤหัสบดีอย่างหลีกเลี่ยงไม่ได้
สิ่งที่การเชื่อมต่อ figma linear ไม่ทำคือสิ่งที่เป็นสองทิศทาง Linear เห็น Figma แต่ Figma ไม่เห็น Linear ความคิดเห็นยังคงอยู่ที่ที่เขียน การเปลี่ยนแปลงสถานะไม่แพร่กระจาย ถ้าวิศวกรทำเครื่องหมาย issue ว่า "Done" ใน Linear ไม่มีใครใน Figma รู้ เว้นแต่จะมีคนบอก ซึ่งในทางปฏิบัติ หมายความว่าไม่มีใครใน Figma รู้
วิธีการเชื่อมต่อ Figma กับ Linear: ทีละขั้นตอน
การตั้งค่าเป็นเรื่องตรงไปตรงมา (ดีนะที่ไม่ต้องทำ OAuth สิบสองขั้นตอน!)
ขั้นตอนที่ 1: เปิดใช้งานการเชื่อมต่อ
ไปที่การตั้งค่า workspace ของ Linear แล้วเลือก Integrations ค้นหา Figma ในรายการแล้วคลิก Enable คุณจะถูกเปลี่ยนเส้นทางไปยัง Figma เพื่ออนุญาตการเชื่อมต่อ อนุญาตการเข้าถึง และคุณก็เสร็จสิ้นงานด้านผู้ดูแลระบบ
ขั้นตอนที่ 2: เชื่อมโยง Frame กับ Issue
เมื่อเปิดใช้งานแล้ว การวาง Figma URL ใดๆ ลงใน Linear issue จะสร้างภาพตัวอย่างแบบฝัง สำหรับผลลัพธ์ที่ดีที่สุด:
- เชื่อมโยง frame ที่เฉพาะเจาะจง ไม่ใช่ทั้งไฟล์ ลิงก์ไปยัง
figma.com/file/abc123?node-id=42:1337 แสดง component ที่เกี่ยวข้อง ลิงก์ไปยัง figma.com/file/abc123 แสดงสิ่งที่ Figma ตัดสินใจว่าเป็นมุมมองเริ่มต้น ซึ่งมักไม่ใช่สิ่งที่คุณต้องการ
- ใช้คำอธิบาย issue สำหรับการอ้างอิงการออกแบบหลัก ความคิดเห็นใช้สำหรับการทำซ้ำ แต่คำอธิบายคือสิ่งที่วิศวกรอ่านก่อนเมื่อรับ issue
- เพิ่มลิงก์ Figma ก่อนที่ issue จะเข้าสู่ sprint ฟังดูชัดเจน แต่ฉันประหลาดใจจริงๆ ว่าบ่อยครั้งที่บริบทการออกแบบถูกแนบหลังจากที่วิศวกรใช้เวลาค้นหาไปยี่สิบนาทีแล้ว
ขั้นตอนที่ 3: ติดตั้งปลั๊กอิน Figma
Figma มี Linear plugin ที่ให้นักออกแบบสร้างและอัปเดต Linear issue โดยตรงจาก canvas เลือก frame เปิดปลั๊กอิน กรอก issue title และ team แล้วจะสร้าง issue โดยมีลิงก์ Figma แนบไว้ล่วงหน้า ปลั๊กอินยังรองรับการอัปเดตสถานะ issue และ assignee โดยไม่ต้องออกจาก Figma
สิ่งนี้พลิกกระบวนการส่งมอบการออกแบบสู่การพัฒนาจาก "วิศวกรไปค้นหาการออกแบบ" เป็น "นักออกแบบส่งการออกแบบไปยังวิศวกรรม" จากประสบการณ์ของทีมเรา การเปลี่ยนแปลงเพียงอย่างเดียวนั้นลดข้อความ Slack ที่ว่า "การออกแบบสำหรับอันนี้อยู่ที่ไหน?" ลงประมาณครึ่งหนึ่ง เชื่อฉันเถอะ แค่นั้นก็คุ้มกับเวลาห้านาทีในการตั้งค่าแล้ว!
จุดที่การเชื่อมต่อ Native ขาดตกบกพร่อง
ฉันไม่อยากลดคุณค่าสิ่งที่ Linear และ Figma สร้างขึ้น – สำหรับการเชื่อมต่อเบาๆ มันใช้งานได้ แต่มีช่องว่างที่ควรระบุ เพราะการแกล้งทำว่าไม่มีอยู่นำไปสู่การสนทนาว่า "เรามีการเชื่อมต่อแล้ว ทำไมไม่มีอะไรซิงค์?" สามเดือนต่อมา
ความคิดเห็นไม่ข้ามไป ถ้านักออกแบบทิ้งข้อเสนอแนะใน Figma และวิศวกรตอบกลับใน Linear ไม่มีฝ่ายใดเห็นการตอบสนองของอีกฝ่ายโดยไม่ต้องตรวจสอบทั้งสองเครื่องมือด้วยตนเอง จากประสบการณ์ของเรา ไซโลความคิดเห็นนี้คือที่มาของการสื่อสารผิดพลาดระหว่างการออกแบบกับการพัฒนาส่วนใหญ่ – ไม่ใช่จากสเปคที่ไม่ดี แต่จากการสนทนาที่เกิดขึ้นในสองที่พร้อมกัน
สถานะเป็นแบบทิศทางเดียว Issue ที่ย้ายไปเป็น "In Progress" ใน Linear ไม่อัปเดตอะไรใน Figma นักออกแบบต้องตรวจสอบ Linear (หรือในทางปฏิบัติมากกว่า คือถามใน Slack) เพื่อรู้ว่าการออกแบบของพวกเขากำลังถูกสร้างหรือไม่
ไม่มีการแจ้งเตือนการเปลี่ยนแปลง เมื่อนักออกแบบอัปเดต frame ที่เชื่อมโยงกับ Linear issue วิศวกรที่ได้รับมอบหมาย issue นั้นจะไม่ได้รับการแจ้งเตือนใน Linear เนื่องจากภาพตัวอย่างเป็นแบบ static โดยค่าเริ่มต้น วิศวกรอาจสร้างตาม version ของการออกแบบที่ถูกแก้ไขไปแล้ว เว้นแต่มีคนรีเฟรช embed ด้วยตนเองหรือพูดถึงมันใน Slack การอัปเดตนั้นจะมองไม่เห็น
รูปแบบเวิร์กโฟลว์ที่เชื่อมช่องว่าง
การฝังแก้ปัญหาการอ้างอิง รูปแบบสามแบบเหล่านี้แก้ปัญหาการประสานงาน – และเป็นสิ่งที่กำหนดว่าการเชื่อมต่อ figma linear ของคุณจะปรับปรุงการส่งมอบจริงๆ หรือแค่เพิ่มการเชื่อมต่อเครื่องมืออีกอย่างที่ไม่มีใครดูแล
รูปแบบที่ 1: Design-Ready Issues
ก่อนที่ design issue จะเข้าสู่ sprint backlog ต้องมีสามสิ่งแนบไว้ใน Linear:
- ลิงก์ Figma frame (frame เฉพาะ ไม่ใช่ไฟล์)
- Design notes สรุปสิ่งที่เปลี่ยนแปลงตั้งแต่ iteration ล่าสุด (เพราะภาพตัวอย่างแบบฝังแสดงสถานะปัจจุบัน ไม่ใช่สิ่งที่ใหม่)
- Acceptance criteria ที่อ้างอิงการออกแบบโดยเฉพาะ – "ตรงกับ Figma frame" ไม่ใช่ acceptance criteria "ใช้ spacing token 8px ระหว่าง card title และ subtitle" นั่นใช่
เวลาเตรียมงานของนักออกแบบเพิ่มขึ้นเล็กน้อยต่อ issue ผลตอบแทนคือวิศวกรที่สามารถเริ่มสร้างได้โดยไม่ต้องขุดค้นใน Slack ก่อน
รูปแบบที่ 2: Design Review Labels
สร้าง Linear label แบบกำหนดเอง – บางอย่างเช่น "Needs Design Review" – และนำไปใช้กับ issue เมื่อสร้างเสร็จแล้วแต่ต้องให้นักออกแบบตรวจสอบการนำไปใช้ เคล็ดลับ (และฉันรู้ว่าฟังดูชัดเจนอย่างเจ็บปวด) คือทำให้มันเป็นส่วนหนึ่งของ template วงจรชีวิต issue เพื่อให้มันเรียกใช้งานโดยอัตโนมัติเมื่อ issue ย้ายไปที่ "In Review" ฉันพูดจากประสบการณ์ – เราสร้าง label นี้ขึ้นมา ใช้มันอย่างสม่ำเสมอสอง sprint แล้วก็เงียบๆ หยุดใช้เพราะไม่มีใคร template มัน จำวิศวกรในตอนต้นที่พลาด variant และส่ง "ใกล้เคียงพอ"? นั่นคือ design review label ที่หายไป
รูปแบบที่ 3: Figma Sections เป็น Sprint Maps
สำหรับโปรเจกต์ขนาดใหญ่ ทุ่มเท Figma section หรือ page ให้กับการออกแบบของ sprint ปัจจุบัน แต่ละ frame แมปกับ Linear issue หนึ่งอย่างพอดี ตั้งชื่อ frame ให้ตรงกับ issue identifier – ENG-142 – Card Component Redesign – เพื่อให้วิศวกรหา frame ที่ถูกต้องได้โดยไม่ต้องเลื่อนผ่าน artboard สี่สิบอันที่ชื่อ "Frame 247"
ทำให้นิสัยเหล่านี้ยั่งยืน
ทีมที่ฉันเห็นทำสิ่งนี้ได้มีลักษณะร่วมกันหลายอย่าง: นักออกแบบเชื่อมโยง frame ก่อนที่ issue จะเข้าสู่ sprint (ไม่ใช่หลังจากวิศวกรบ่น) วิศวกรใช้ review label ก่อนที่จะทำเครื่องหมาย issue ว่าเสร็จ (ไม่ใช่ตามหลัง) และไม่มีใครถือว่า Slack เป็นระบบบันทึกสำหรับการตัดสินใจด้านการออกแบบ
สิ่งสุดท้ายนั้นสำคัญกว่าการเชื่อมต่อใดๆ และถ้าคุณเคยใช้เวลาสิบห้านาทีค้นหา "กระทู้ที่เราตัดสินใจเปลี่ยน border radius" คุณรู้ดีว่าฉันหมายความว่าอะไร Slack คือที่ที่การสนทนาด้านการออกแบบเกิดขึ้น และยังเป็นที่ที่มันหายไป ถ้าการตัดสินใจด้านการออกแบบเกิดขึ้นในกระทู้ ต้องมีใครอัปเดตไฟล์ Figma หรือ Linear issue – มิฉะนั้นมันจะหายไปในสามสัปดาห์ ฝังอยู่ใต้การแจ้งเตือนการ deploy และแผนมื้อกลางวัน
"ถ้าการตัดสินใจด้านการออกแบบเกิดขึ้นในกระทู้ ต้องมีใครอัปเดตไฟล์ Figma หรือ Linear issue – มิฉะนั้นมันจะหายไปในสามสัปดาห์ ฝังอยู่ใต้การแจ้งเตือนการ deploy และแผนมื้อกลางวัน" – Chris Calo
การเชื่อมต่อ Figma-Linear แบบ native จัดการการฝังและการอ้างอิงได้ดี สำหรับการรับรู้แบบสองทิศทาง – ความคิดเห็น สถานะ การแจ้งเตือนการเปลี่ยนแปลง – ต้องอาศัยวินัยของทีมหรือ layer ที่เชื่อมบริบทในทั้งสองเครื่องมือโดยอัตโนมัติ
และถ้าคุณกำลังเชื่อมต่อมากกว่าแค่ Figma และ Linear – เพิ่ม Slack, GitHub และ Notion เข้าไปด้วย – ภาระงานด้วยตนเองในการรักษาทุกอย่างให้ซิงค์กันจะเพิ่มขึ้นอย่างรวดเร็ว นั่นเป็นการสนทนาอีกแบบ แต่คุ้มค่าที่จะมีก่อนที่ post-mortem ครั้งต่อไปจะว่า "ใครเปลี่ยนการออกแบบนี้และทำไมไม่มีใครบอกฉัน?"
เชื่อมต่อ Figma, Linear, Slack และ GitHub ไว้ในกราฟความรู้เดียว – เพื่อให้บริบทการออกแบบคงอยู่กับงาน
Q: Sugarbug เชื่อมต่อ Figma และ Linear โดยอัตโนมัติหรือไม่? A: ใช่ Sugarbug รับสัญญาณจากทั้ง Figma และ Linear โดยเชื่อมโยงความคิดเห็นด้านการออกแบบและการอัปเดตไฟล์กับการเปลี่ยนแปลงสถานะ issue ในกราฟความรู้เมื่อนักออกแบบทิ้งข้อเสนอแนะบน frame Sugarbug สามารถแสดงข้อมูลนั้นควบคู่กับ Linear issue ที่เกี่ยวข้องโดยไม่ต้องคัดลอก URL
Q: Sugarbug ติดตามการส่งมอบงานออกแบบผ่าน Figma, Linear และ Slack ได้หรือไม่? A: Sugarbug เชื่อมต่อ Figma, Linear, Slack, GitHub และ Notion เข้าสู่กราฟความรู้เดียว ข้อเสนอแนะด้านการออกแบบ การอภิปรายทางวิศวกรรม และสถานะงานทั้งหมดยังคงมีความสัมพันธ์กัน ดังนั้นบริบทจะไม่สูญหายระหว่างการส่งมอบ
Q: Linear มีการเชื่อมต่อ Figma ในตัวหรือไม่? A: ใช่ การเชื่อมต่อ Figma แบบ native ของ Linear ช่วยให้คุณวาง Figma URL ลงใน issue เพื่อสร้างภาพตัวอย่างแบบฝัง และใช้ Figma plugin เพื่อสร้างหรืออัปเดต issue จาก canvas อย่างไรก็ตาม เป็นแบบทิศทางเดียว – ความคิดเห็นและการเปลี่ยนแปลงสถานะไม่ซิงค์ระหว่างเครื่องมือ
Q: ฉันจะเชื่อมโยง Figma frame กับ Linear issue ได้อย่างไร? A: วาง URL ของ Figma frame ลงในคำอธิบายหรือความคิดเห็นของ Linear issue Linear จะสร้างภาพตัวอย่างแบบฝัง คุณยังสามารถใช้ปลั๊กอิน Figma ของ Linear เพื่อสร้าง issue โดยตรงจาก canvas โดยมีลิงก์แนบมาด้วย
Q: ทำไม Figma comments จึงไม่ปรากฏใน Linear? A: การเชื่อมต่อ Figma แบบ native ของ Linear ฝังภาพตัวอย่างการออกแบบแต่ไม่ซิงค์ความคิดเห็นระหว่างเครื่องมือ ความคิดเห็นของนักออกแบบใน Figma และความคิดเห็นของวิศวกรใน Linear อยู่ในไซโลที่แยกจากกัน เครื่องมืออย่าง Sugarbug เชื่อมช่องว่างนี้โดยรับสัญญาณจากทั้งสองและเชื่อมโยงไว้ในกราฟความรู้ที่ใช้ร่วมกัน