วิธีคัดลอก QR code เข้า Figma เป็นเวกเตอร์ที่แก้ไขได้

วิธีคัดลอก QR code เข้า Figma

การคัดลอก QR code เข้า Figma ใช้เพียงสี่ขั้นตอนและไม่ต้องใช้ปลั๊กอิน สร้างโค้ดในเบราว์เซอร์ คัดลอกเป็น SVG วางลงบนพื้นที่ว่างของแคนวาส แล้วกำหนดขนาดเป็นตัวเลขโดยเปิดล็อกสัดส่วนไว้ ทั้งเส้นทางใช้เวลาไม่ถึงหนึ่งนาที และผลลัพธ์คือกลุ่มเลเยอร์เวกเตอร์ที่คุณเปลี่ยนสีและส่งออกได้เหมือนงานกราฟิกอื่น ๆ ใน Figma

1. สร้างโค้ด. เปิดเครื่องมือสร้าง ใส่ URL หรือเนื้อหาอื่น แล้วตั้งค่ารูปทรง ลวดลาย ดวงตา สี กรอบ และโลโก้ สิ่งที่ไปปรากฏใน Figma คือสิ่งที่ตัวอย่างแสดงอยู่พอดี การจัดสไตล์จึงควรทำตรงนี้ ไม่ใช่หลังจากวางแล้ว
2. เปิดเมนูดาวน์โหลด. คลิกลูกศรข้างปุ่ม Download แล้วเลือก Copy to Figma ปุ่มจะกะพริบคำว่า Copied ซึ่งเป็นการยืนยันว่ามาร์กอัป SVG ไปถึงคลิปบอร์ดของคุณแล้ว
3. วางบนแคนวาสที่ว่าง. สลับไปที่ Figma คลิกพื้นที่ว่างเพื่อไม่ให้มีอะไรถูกเลือกและไม่มีเลเยอร์ข้อความอยู่ในโหมดแก้ไข แล้วกด Cmd+V บน macOS หรือ Ctrl+V บน Windows
4. ตรวจดูเลเยอร์. โค้ดจะมาถึงเป็นกลุ่มที่มี Background และ QR-code อยู่ข้างใน พร้อม Frame และ Logo เมื่องานออกแบบใช้สิ่งเหล่านั้น การเห็นชื่อเหล่านี้คือวิธีที่คุณรู้ว่า Figma อ่านเป็นเวกเตอร์ ไม่ใช่วางเป็นภาพ
5. ล็อกสัดส่วนก่อนย่อขยาย. เปิดล็อกสัดส่วนในแผงด้านขวา แล้วพิมพ์ความกว้างที่ต้องการแทนการลากมือจับที่มุม ความกว้างกับความสูงต้องเท่ากันเสมอ
6. สแกนบนหน้าจอ. ซูมแคนวาสไปที่ 100% แล้วสแกนโค้ดด้วยโทรศัพท์ ยืนยันว่าปลายทางที่เปิดขึ้นคือปลายทางที่คุณตั้งใจ ก่อนที่ไฟล์จะไปถึงมือคนอื่น

Copy to Figma จะไม่ทำอะไรเลยตราบใดที่ช่องเนื้อหายังว่าง เครื่องมือสร้างจะแสดงโค้ดตัวอย่างที่จัดสไตล์ไว้ก่อนที่คุณจะพิมพ์อะไร และการคัดลอกตัวอย่างนั้นจะทำให้โค้ดที่ไม่ชี้ไปไหนเลยเข้าไปอยู่ในงานออกแบบของคุณ ปุ่มจึงกะพริบที่ช่องว่างแทนการเขียนลงคลิปบอร์ด

สิ่งที่มาปรากฏบนแคนวาส Figma จริง ๆ

โค้ด KoloQR ที่วางลงไปจะมาถึงเป็นกลุ่มเลเยอร์ที่มีชื่อ ไม่ใช่ภาพแบนราบ คือคอนเทนเนอร์ที่บรรจุ Background และ QR-code พร้อม Frame และ Logo เมื่องานออกแบบใช้สิ่งเหล่านั้น ทุกโมดูลเป็นพาธเวกเตอร์จริง เลเยอร์ใดก็ตามจึงเลือก เปลี่ยนสี ซ่อน หรือส่งออกแยกได้

SVG พกความกว้างและความสูงที่ระบุชัดเจนมาจาก viewBox ของตัวเอง โค้ดจึงมาถึงในขนาดจริงแทนที่จะเป็นกล่องค่าเริ่มต้นที่ Figma ใช้เมื่อไฟล์ไม่ได้ประกาศขนาดไว้ เรื่องนี้สำคัญเพราะโค้ดที่วางลงมาผิดสเกลมักถูกแก้ด้วยการลากมือจับ ซึ่งเป็นทางที่ทำให้สัดส่วนเพี้ยน

ป้ายบนกรอบมาถึงเป็นพาธที่แปลงเป็นเส้นขอบแล้ว ไม่ใช่ข้อความที่ยังแก้ไขได้ ป้ายแบบโค้งถูกส่งออกเป็นพาธเดียวที่รวมกันแล้ว ไม่ใช่หนึ่งออบเจกต์ต่อหนึ่งตัวอักษร คำเหล่านั้นจึงเป็นรูปทรงเดียวที่คุณเปลี่ยนสีและย้ายได้ แต่พิมพ์ใหม่ไม่ได้ การเปลี่ยนข้อความหมายถึงการแก้ป้ายในเครื่องมือสร้างแล้วคัดลอกโค้ดอีกครั้ง ซึ่งเป็นลำดับที่ถูกต้องอยู่แล้ว เพราะส่วนโค้งของป้ายคำนวณมาจากกรอบ

การคัดลอกโค้ดหลายอันเข้าไฟล์ Figma เดียวกันนั้นปลอดภัย ทุก id ที่มาร์กอัปอ้างถึง ทั้งพาธสำหรับตัดและพาธที่มองไม่เห็นซึ่งป้ายโค้งวิ่งไปตามนั้น จะได้รับคำนำหน้าที่ไม่ซ้ำกันในตอนที่คุณคัดลอก การที่ SVG สองไฟล์ใช้ id เดียวกันคือสาเหตุปกติที่ทำให้กราฟิกชิ้นที่สองที่วางลงไปถูกตัดด้วยรูปทรงของชิ้นแรก และเวิร์กโฟลว์นี้ตัดปัญหานั้นออกตั้งแต่โครงสร้าง

ชื่อเลเยอร์ที่มีไว้เพื่อความสวยงามล้วน ๆ ถูกปล่อยให้สะอาดโดยตั้งใจ Background, QR-code, Frame และ Logo ไม่ถูกอ้างถึงจากที่ใดในไฟล์ จึงคงชื่อที่อ่านออกไว้ในแผงเลเยอร์ของ Figma แทนที่จะพกคำนำหน้าแบบสุ่ม

SVG หรือ PNG: ควรนำฟอร์แมตไหนเข้า Figma

ใช้ SVG กับทุกอย่างที่จะถูกย่อขยาย เปลี่ยนสี หรือพิมพ์ และใช้ PNG เฉพาะกับม็อกอัปที่คุณจะทิ้ง SVG เป็นฟอร์แมตเดียวในสองอย่างนี้ที่ยังแก้ไขได้ใน Figma ส่วน PNG เป็นภาพสำเร็จรูปตั้งแต่วินาทีที่ส่งออก และการขยายมันในกรอบจะทำให้ขอบของทุกโมดูลนุ่มลง

ความไม่สมมาตรนี้ทำให้หลายคนสะดุดตอนส่งงาน Figma ส่งออก PDF ได้แต่นำเข้าไม่ได้ QR code ที่เป็น PDF ไม่ว่าจะมาจากเครื่องมือสร้างใด ต้องถูกแปลงหรือเปลี่ยนเป็น SVG ก่อนจึงจะเข้าไปอยู่ในเลย์เอาต์ Figma ได้

PNG ไม่ใช่ทางเลือกที่ผิด มันเพียงแต่เป็นขั้นสุดท้าย การส่งออก PNG ของ KoloQR เรนเดอร์โค้ดที่สี่เท่าของขนาดบนหน้าจอ ซึ่งพอสำหรับม็อกอัปและงานพิมพ์ขนาดเล็กที่รู้ขนาดแน่นอน แต่พิกเซลเหล่านั้นตายตัว ถ้าภายหลังเลย์เอาต์ต้องการโค้ดใหญ่ขึ้นเป็นสองเท่า ต้องสร้าง PNG ใหม่ ไม่ใช่ขยายของเดิม ดูความละเอียดของ QR code สำหรับการคำนวณที่ตัดสินว่าโค้ดแบบแรสเตอร์พิมพ์ได้ใหญ่แค่ไหนอย่างปลอดภัย

ทำไมบางครั้งการวางจึงได้ข้อความ หรือไม่ได้อะไรเลย

การวางที่ล้มเหลวเกือบทั้งหมดมาจากสามเรื่องนี้ มีเลเยอร์ข้อความอยู่ในโหมดแก้ไข การเขียนลงคลิปบอร์ดถูกบล็อก หรือการวางไปลงบนพื้นผิวที่ไม่อ่านมาร์กอัป SVG ไม่มีข้อใดเป็นความผิดของตัวโค้ดเอง และทั้งสามข้อมีทางออกเดียวกัน คือดาวน์โหลดไฟล์ SVG แล้วลากเข้าไป

• มาร์กอัปปรากฏเป็นตัวอักษรที่มองเห็นได้ มีเลเยอร์ข้อความอยู่ในโหมดแก้ไขตอนที่คุณกด Cmd+V Figma จึงแทรกข้อความจากคลิปบอร์ดเป็นข้อความ กด Escape คลิกแคนวาสที่ว่าง แล้ววางอีกครั้ง
• ไม่มีอะไรปรากฏขึ้น เบราว์เซอร์ปฏิเสธการเขียนลงคลิปบอร์ด การเข้าถึงคลิปบอร์ดต้องใช้หน้าเว็บ HTTPS ที่ปลอดภัยและการคลิกจริง และส่วนขยายด้านความเป็นส่วนตัวบางตัวบล็อกมันทั้งหมด ใช้การดาวน์โหลด SVG แทนที่จะไปสู้กับสิทธิ์นั้น
• พื้นผิวต่างกันก็ทำงานต่างกัน FigJam และ Figma Slides จัดการมาร์กอัปที่วางลงไปไม่เหมือนแคนวาสงานออกแบบ ถ้าที่นั่นการวางกลายเป็นข้อความ ให้ลากไฟล์ .svg ที่ดาวน์โหลดไว้ลงบอร์ดแทน
• ปุ่ม Copy to Figma กะพริบที่ช่องกรอกข้อมูล ช่องเนื้อหายังว่าง จึงยังไม่มีโค้ดจริงให้คัดลอก ใส่ URL หรือเนื้อหาอื่นก่อน

ทางสำรองนี้ควรรู้ไว้ก่อนที่จะต้องใช้จริง กด Download แล้วเลือก SVG จากนั้นลากไฟล์ .svg จากตัวจัดการไฟล์ลงบนแคนวาส Figma Figma นำเข้าไฟล์ SVG ที่ถูกลากมาวางเป็นเลเยอร์เวกเตอร์ชุดเดียวกับที่การวางสร้างขึ้น ผลลัพธ์จึงไม่ต่างกันเลย ต่างแค่จำนวนขั้นตอน

การแก้ไขใน Figma แบบใดปลอดภัย และแบบใดทำให้โค้ดเสีย

การเปลี่ยนสี ย้าย หมุน จัดกลุ่ม ใส่กรอบ และย่อขยายตามสัดส่วนนั้นปลอดภัย ส่วนการยืดแกนเดียว การตัดขอบว่างออก การลดคอนทราสต์ และการทำบูลีนที่ตัดรูปทรงออกนั้นไม่ปลอดภัย QR code ถูกถอดรหัสจากรูปทรงของตารางสี่เหลี่ยมจัตุรัส การแก้ไขใดก็ตามที่เปลี่ยนตารางนั้นจึงเปลี่ยนสิ่งที่เครื่องสแกนอ่านได้

คอนทราสต์คือเรื่องที่ควรตัดสินก่อนคัดลอก ไม่ใช่หลังวาง ตัวอย่างในเครื่องมือสร้างรายงานอัตราส่วนคอนทราสต์ของคู่สีที่คุณเลือก และบอกตรง ๆ เมื่อคู่สีนั้นอาจสแกนยาก ซึ่งเป็นการตรวจสอบที่ Figma ไม่มีอะไรเทียบได้ Figma จะเรนเดอร์โค้ดสีเทากลางบนพื้นสีเบจกลางให้อย่างเต็มใจโดยไม่บอกว่ามีอะไรผิด

ถ้างานออกแบบบังสัญลักษณ์บางส่วน เช่น โลโก้ตรงกลางหรือรูปทรงที่พาดมุม ค่าเผื่อที่รองรับสิ่งนั้นถูกกำหนดตอนสร้าง ไม่ใช่ใน Figma ดูการแก้ไขข้อผิดพลาด ว่าแต่ละระดับกู้คืนสัญลักษณ์ได้มากแค่ไหน แล้วสร้างที่ระดับที่งานออกแบบต้องการก่อนคัดลอก

ข้อจำกัดที่ควรพูดตรง ๆ ไม่มีกฎข้อใดที่นี่รับประกันว่าจะสแกนได้บนอุปกรณ์ของคนอื่น อัตราส่วนคอนทราสต์ ขนาดโมดูล และระดับการแก้ไขข้อผิดพลาดล้วนเพิ่มโอกาสให้คุณ แต่สิ่งที่ตัดสินจริง ๆ คือการทดสอบกับโทรศัพท์จริงสองเครื่อง

การกำหนดขนาด QR code ภายในเฟรมของ Figma

Figma วัดเป็นพิกเซลและไม่มีหน่วยทางกายภาพ ให้กำหนดขนาด QR code โดยตัดสินใจว่าหนึ่งพิกเซลหมายถึงอะไรในสื่อปลายทาง แล้วยึดตามนั้น ที่ 96 พิกเซลต่อนิ้ว 1 ซม. เท่ากับ 37.8 พิกเซล โค้ดขนาด 2 ซม. จึงเท่ากับ 76 พิกเซล ที่ 300 พิกเซลต่อนิ้ว โค้ด 2 ซม. เดียวกันเท่ากับ 236 พิกเซล สำหรับงานออกแบบบนหน้าจอ ให้ตั้งเป้าอย่างน้อย 4 พิกเซลต่อโมดูล

จำนวนโมดูลขึ้นกับเนื้อหา ไม่ใช่งานออกแบบ URL สั้น ๆ ที่ใช้การแก้ไขข้อผิดพลาดระดับกลางมักลงเอยที่ 29 หรือ 33 โมดูล ซึ่งเท่ากับ 37 หรือ 41 เมื่อรวมขอบว่าง ที่ 4 พิกเซลต่อโมดูลจะได้ราว 150–165 พิกเซลบนหน้าจอ และต่ำกว่านั้นมาก ๆ ความคมของโมดูลจะเริ่มหายไปบนจอความละเอียดมาตรฐาน

กฎของงานพิมพ์ไม่เปลี่ยนเพียงเพราะเลย์เอาต์อยู่ใน Figma โค้ดที่พิมพ์ออกมาต้องการความกว้างราว 1 ซม. ต่อระยะอ่านทุก 10 ซม. โดยมี 2 × 2 ซม. เป็นขั้นต่ำที่ใช้งานได้จริงสำหรับการอ่านระยะใกล้ และโมดูลที่พิมพ์ควรอยู่ที่ 0.4 มม. ขึ้นไป หรือ 0.5 มม. บนกระดาษไม่เคลือบ ซึ่งหมึกจะแผ่จนโมดูลสีเข้มหนาขึ้น

กำหนดความกว้างเป็นตัวเลขแทนการลากมือจับ การลากมุมโดยปิดล็อกสัดส่วนคือสาเหตุอันดับหนึ่งที่ทำให้ QR code ออกจากไฟล์ Figma ในสภาพยืดเล็กน้อย และความเพี้ยน 4% นั้นมองไม่เห็นบนหน้าจอแต่ร้ายแรงที่เครื่องสแกน

การส่งออก QR code ออกจาก Figma

เลือกเลเยอร์ชั้นบนสุดของโค้ดแล้วส่งออกเป็น SVG สำหรับการส่งงานแบบเวกเตอร์ PDF สำหรับงานพิมพ์ หรือ PNG ที่ 3x หรือ 4x สำหรับหน้าจอ การส่งออกเฟรมแทนตัวโค้ดเท่ากับส่งออกเลย์เอาต์รอบ ๆ ด้วย ซึ่งเป็นสิ่งที่โรงพิมพ์ต้องการ แต่แทบไม่เคยเป็นสิ่งที่นักพัฒนาต้องการ

• SVG เปิด “Include id attribute” ไว้ถ้าคุณอยากให้ชื่อเลเยอร์ติดไปในไฟล์ด้วย ส่วน “Outline text” ไม่เปลี่ยนอะไรตรงนี้ เพราะป้ายบนกรอบมาถึงเป็นพาธอยู่แล้ว
• PDF Figma ส่งออก PDF ได้ทั้งที่นำเข้าไม่ได้ ซึ่งทำให้ PDF เป็นรูปแบบส่งงานที่เป็นธรรมชาติสำหรับเลย์เอาต์งานพิมพ์ที่มีโค้ดอยู่ข้างใน
• PNG ที่ 3x หรือ 4x โค้ด 100 พิกเซลที่ส่งออกที่ 4x จะได้ 400 พิกเซล ซึ่งเป็นแอสเซตสำหรับหน้าจอ อย่าใช้มันเป็นแอสเซตงานพิมพ์ ให้คำนวณย้อนจากขนาดพิมพ์แทน
• อย่าใช้ 1x กับงานพิมพ์ การส่งออกแบบแรสเตอร์ใหญ่ได้เท่าจำนวนพิกเซลที่มีอยู่เท่านั้น และเพดานของงานพิมพ์อยู่ที่ราว ๆ ความกว้างพิกเซล ÷ 300 × 2.54 เซนติเมตร

สำหรับโค้ดที่จะไปปรากฏบนเว็บไซต์ วิธีส่งงานที่ดีกว่ามักไม่ใช่การส่งออกเลย นักพัฒนาสามารถสร้างโค้ดตอนบิลด์หรือส่งไฟล์ SVG ตรง ๆ ก็ได้ และทั้งสองทางดีกว่าภาพที่ส่งออกจากไฟล์งานออกแบบซึ่งไม่มีใครจำได้ว่าต้องอัปเดตเมื่อ URL เปลี่ยน

Copy to Figma เทียบกับปลั๊กอิน QR code ของ Figma

ปลั๊กอินสร้างโค้ดภายใน Figma และสร้างใหม่หรือสร้างทีละหลายอันได้โดยไม่ต้องออกจากไฟล์ ส่วนเส้นทางผ่านคลิปบอร์ดสร้างโค้ดในเบราว์เซอร์และให้การควบคุมรูปทรง กรอบ และโลโก้ได้มากกว่า ทั้งสองทางสร้างโค้ดแบบสแตติก ไม่มีทางใดเปลี่ยนปลายทางของโค้ดที่วางไว้แล้วได้โดยไม่แทนที่ตัวงานกราฟิก

ใช้ปลั๊กอินเมื่อปัญหาคือปริมาณ การสร้างป้ายชื่อสำหรับงานอีเวนต์สี่สิบใบจากสเปรดชีตภายใน Figma เป็นงานที่เส้นทางผ่านคลิปบอร์ดทำให้สบายไม่ได้ และปลั๊กอินแบบสร้างทีละหลายอันเป็นเครื่องมือที่เหมาะกว่าอย่างตรงไปตรงมา KoloQR ไม่มีปลั๊กอิน Figma และหน้านี้จะไม่แสร้งว่านั่นเป็นข้อได้เปรียบ

ใช้คลิปบอร์ดเมื่อปัญหาคืองานออกแบบ โค้ดทรงกลมและทรงกำหนดเองแบบอื่น กรอบ สไตล์ดวงตาเชิงตกแต่ง และโลโก้ที่วางโดยมีระดับการแก้ไขข้อผิดพลาดที่เหมาะสมรองอยู่ ล้วนเป็นการตัดสินใจที่เกิดในเครื่องมือสร้าง และมาถึง Figma ในสภาพสมบูรณ์แล้ว ดูQR code ทรงกลม และQR code แบบมีแบรนด์ ว่าหน้าตาเป็นอย่างไร

มีความต่างข้อหนึ่งที่คงอยู่ยาวและควรพูดถึง ปลั๊กอินคือสิ่งที่คุณต้องพึ่งพา ปลั๊กอิน Figma ถูกอัปเดตโดยผู้เขียน พังเมื่อ API ของปลั๊กอินเปลี่ยน และบางครั้งก็หายไปจาก Community ส่วน SVG ผ่านคลิปบอร์ดคือการวาง ไม่มีอะไรในเส้นทางนี้ที่จะเลิกได้รับการดูแล

สิ่งที่ทำไม่ได้อีกแล้วเมื่อโค้ดอยู่ใน Figma

โค้ดที่วางลงไปเป็น QR code แบบสแตติก ปลายทางจึงถูกเขียนอยู่ในรูปทรงแทนที่จะเก็บไว้ข้าง ๆ Figma เปลี่ยนสไตล์ของรูปทรงนั้นได้แต่คำนวณใหม่ไม่ได้ ซึ่งทำให้ความต้องการที่พบบ่อยสี่อย่างอยู่นอกเหนือความเป็นไปได้

• เปลี่ยนปลายทาง การแก้ URL หมายถึงการสร้างสัญลักษณ์ใหม่ ไม่มีช่องให้แก้ ทั้งใน Figma และที่อื่นใด
• เพิ่มระดับการแก้ไขข้อผิดพลาดย้อนหลัง ระดับนี้กำหนดวิธีจัดวางข้อมูล มันจึงเปลี่ยนตัวสัญลักษณ์เอง ไม่ใช่คุณสมบัติของงานกราฟิกที่เสร็จแล้ว
• พิมพ์ป้ายบนกรอบใหม่ คำเหล่านั้นมาถึงเป็นพาธที่แปลงเป็นเส้นขอบแล้ว ให้แก้ในเครื่องมือสร้างแล้วคัดลอกโค้ดอีกครั้ง
• ทำให้โลโก้แบบแรสเตอร์คมขึ้น โลโก้ที่อัปโหลดเป็น PNG หรือ JPG จะถูกฝังอยู่ใน SVG ในรูปภาพ มันจึงยังเป็นแรสเตอร์อยู่ในไฟล์ที่เหลือเป็นเวกเตอร์ และจะไม่คมขึ้นเมื่อขยายโค้ด

โลโก้แบบแรสเตอร์เป็นข้อเดียวที่มีทางแก้ที่สะอาด อัปโหลดโลโก้เป็น SVG เมื่อคุณมีเวอร์ชันเวกเตอร์ หรือลบเลเยอร์ Logo ใน Figma แล้ววางโลโก้เวกเตอร์ของคุณเองลงในช่องที่มันเคยอยู่ สัญลักษณ์ถูกสร้างโดยเว้นที่ไว้ให้แล้ว และการแก้ไขข้อผิดพลาดที่กู้โมดูลที่ถูกบังกลับมาก็ไม่สนใจว่ากราฟิกที่วางทับเป็นอะไร

อีกอย่างคือไม่มีระบบวิเคราะห์ข้อมูล และนั่นเป็นคุณสมบัติของโค้ดแบบสแตติก ไม่ใช่ของเวิร์กโฟลว์นี้ ถ้าโจทย์ต้องการจำนวนการสแกนหรือปลายทางที่เปลี่ยนได้หลังพิมพ์ โค้ดแบบไดนามิกจากแพลตฟอร์มที่มีโฮสต์คือเครื่องมือที่ถูกต้อง และงานออกแบบก็ยังเข้า Figma ด้วยวิธีเดิม

การดูแลโค้ดให้ยั่งยืนในดีไซน์ซิสเต็ม

ทำโค้ดที่วางลงไปให้เป็นคอมโพเนนต์ของ Figma ตั้งแต่ครั้งแรกที่ใช้ เมื่อปลายทางเปลี่ยน ให้วางโค้ดใหม่ลงในคอมโพเนนต์หลักหนึ่งครั้ง แล้วทุกอินสแตนซ์ในทุกไฟล์จะอัปเดตตาม ซึ่งเป็นสิ่งที่ใกล้เคียงที่สุดที่ QR code แบบสแตติกจะแก้ไขได้

ตั้งชื่อคอมโพเนนต์ตามปลายทาง ไม่ใช่ตามงานออกแบบ มนุษย์อ่าน QR code ไม่ออก ชื่อเลเยอร์จึงเป็นที่เดียวที่ URL อ่านออก “QR / spring-menu” บอกคนถัดไปว่ากำลังดูอะไรอยู่ ส่วน “QR code 3” ไม่บอกอะไรเลย ใส่ URL เต็มไว้ในคำอธิบายคอมโพเนนต์ ซึ่งจะติดไปด้วยเมื่อคัดลอกข้ามไฟล์

เก็บค่าตั้งต้นไว้ในที่ที่คนถัดไปหาเจอ รูปทรง สี กรอบ โลโก้ และระดับการแก้ไขข้อผิดพลาดไม่สามารถกู้กลับจากตัวงานกราฟิกได้ บันทึกสั้น ๆ ในคำอธิบายคอมโพเนนต์ หรือลิงก์ของเครื่องมือสร้างที่ผลิตมัน คือสิ่งที่ทำให้โค้ดนี้สร้างซ้ำได้ในอีกหกเดือนข้างหน้า

อย่าปล่อยให้โค้ดเดียวกันสองเวอร์ชันอยู่ในไฟล์เดียวกัน รูปแบบความผิดพลาดนี้เฉพาะเจาะจงและพบบ่อย โค้ดเก่าค้างอยู่บนอาร์ตบอร์ดที่ไม่มีใครส่งออกใหม่ แล้วถูกพิมพ์ออกมา และส่งคนไปยัง URL ที่เลิกใช้แล้ว หนึ่งคอมโพเนนต์ หนึ่งปลายทาง หนึ่งที่สำหรับอัปเดต

การทดสอบสแกนก่อนส่งงาน

1. สแกนแคนวาสที่ 100%. ซูม Figma ไปที่ 100% แล้วสแกนโค้ดบนหน้าจอด้วยโทรศัพท์ ความล้มเหลวตรงนี้คือปัญหาของงานออกแบบ ทั้งคอนทราสต์ ความบิดเบี้ยว หรือขอบว่างที่ถูกบัง
2. อ่านปลายทางทีละตัวอักษร. ตรวจ URL ที่เปิดขึ้นเทียบกับที่คุณตั้งใจ รวมถึงโปรโตคอลและพารามิเตอร์ติดตามทั้งหมด โค้ดที่สแกนได้สมบูรณ์แบบแต่พาไปผิดหน้าคือความล้มเหลวที่แพงที่สุด
3. สแกนไฟล์ที่ส่งออก ไม่ใช่แคนวาส. ส่งออกอาร์ตบอร์ดในแบบที่จะใช้จริงแล้วสแกนไฟล์นั้น เอฟเฟกต์ ความทึบ และเลเยอร์พื้นหลังทำงานต่างจากที่ตาเห็นบนแคนวาส
4. พิมพ์ปรู๊ฟที่ขนาดจริง. ถ้างานออกแบบจะไปพิมพ์ ให้พิมพ์หนึ่งแผ่นที่ขนาดจริงบนกระดาษจริงแล้วสแกนตรงนั้น คอนทราสต์บนหน้าจอทำให้ทุกอย่างดูดีเกินจริง
5. ทดสอบทั้งสองแพลตฟอร์ม. สแกนด้วย iPhone และโทรศัพท์ Android แอปกล้องของทั้งคู่แปลงภาพเป็นขาวดำต่างกัน โค้ดที่อยู่ในเกณฑ์คาบเส้นมักผ่านบนเครื่องหนึ่งแต่ไม่ผ่านบนอีกเครื่อง
6. ทดสอบในแสงของสถานที่จริง. สแกนในสภาพแสงที่โค้ดจะอยู่จริง เช่น บาร์ที่แสงสลัว หน้าต่างที่แดดส่อง หรือการ์ดเคลือบมันที่มองในมุมเอียง

สองขั้นตอนสุดท้ายคือสิ่งที่จับปัญหาที่เลย์เอาต์แสดงให้เห็นไม่ได้ โค้ดที่ผ่านบนจอเดสก์ท็อปที่สว่างแต่ไม่ผ่านบนเมนูเคลือบพลาสติกในแสงสลัวนั้นไม่ได้เปลี่ยนไปเลย สิ่งที่เปลี่ยนคือสภาพการอ่าน

SVG จากคลิปบอร์ดชุดเดียวกันใช้ได้นอก Figma ด้วย

คลิปบอร์ดเก็บมาร์กอัป SVG มาตรฐาน ไม่ใช่ฟอร์แมตเฉพาะของ Figma การคัดลอกชุดเดียวกันจึงวางลง Illustrator, Sketch, Affinity Designer และ Inkscape เป็นเวกเตอร์ที่แก้ไขได้ ไม่มีอะไรในเวิร์กโฟลว์นี้ผูกกับ Figma นอกจากชื่อของรายการในเมนู

เครื่องมือที่ต้องการไฟล์แทนมาร์กอัป เช่น โปรแกรมแก้ไขเอกสาร ซอฟต์แวร์นำเสนอ และเครื่องมือออกแบบบนเบราว์เซอร์ส่วนใหญ่ ต้องการการดาวน์โหลด SVG การดาวน์โหลดแล้ววางไฟล์ให้งานกราฟิกเวกเตอร์ชุดเดียวกัน ต่างกันแค่วิธีนำพาเท่านั้น

ในที่ที่เครื่องมือไม่รับทั้งสองอย่าง PNG คือทางสำรอง และการตัดสินใจเรื่องขนาดต้องเกิดขึ้นเร็วขึ้น ส่งออกโค้ดที่ขนาดพิกเซลซึ่งสื่อปลายทางต้องการ ไม่ใช่ขนาดที่สะดวก เพราะโค้ดแรสเตอร์ที่ต้องขยายทีหลังนั้นแก้ไขให้ดีไม่ได้